Bagaimana saya bisa melihat kode HTML saya di browser dengan Microsoft Visual Studio Code baru?
Dengan Notepad ++ Anda memiliki opsi untuk Jalankan di browser. Bagaimana saya bisa melakukan hal yang sama dengan Visual Studio Code?
html
visual-studio-code
preview
Ninjakannon
sumber
sumber
Jawaban:
Untuk Windows - Buka Browser Default Anda - Diuji pada VS Code v 1.1.0
Jawab untuk membuka file tertentu (nama tersandi kode) ATAU membuka file APA PUN lainnya.
Langkah:
Gunakan ctrl+ shift+ p(atau F1) untuk membuka Palet Perintah.
Ketik
Tasks: Configure Task
atau pada versi yang lebih lamaConfigure Task Runner
. Memilihnya akan membuka file task.json . Hapus skrip yang ditampilkan dan ganti dengan yang berikut:Ingatlah untuk mengubah bagian "args" pada file functions.json menjadi nama file Anda. Ini akan selalu membuka file tertentu ketika Anda menekan F5.
Anda juga dapat mengatur ini untuk membuka file mana saja yang Anda buka pada saat itu dengan menggunakan
["${file}"]
sebagai nilai untuk "args". Perhatikan bahwa$
pergi di luar{...}
, jadi["{$file}"]
tidak benar.Simpan file.
Beralih kembali ke file html Anda (dalam contoh ini "text.html"), dan tekan ctrl+ shift+ buntuk melihat halaman Anda di Browser Web Anda.
sumber
VS Code memiliki Live Server Extention yang mendukung peluncuran satu klik dari status bar.
Beberapa fitur:
sumber
@InvisibleDev - untuk menjalankan ini di mac mencoba menggunakan ini:
Jika Anda sudah membuka chrome, itu akan meluncurkan file html Anda di tab baru.
sumber
Jika Anda ingin memuat ulang secara langsung, Anda dapat menggunakan gulp-webserver, yang akan mengawasi perubahan file dan memuat ulang laman Anda, dengan cara ini Anda tidak perlu menekan F5 setiap kali di laman Anda:
Inilah cara melakukannya:
Buka command prompt (cmd) dan ketik
npm instal --save-dev gulp-webserver
Masukkan Ctrl + Shift + P dalam Kode VS dan ketik Configure Task Runner . Pilih dan tekan enter. Ini akan membuka file task.json untuk Anda. Hapus semuanya dan masukkan kode berikut
task.json
gulpfile.js
Server web Anda sekarang akan membuka halaman Anda di browser default Anda. Sekarang setiap perubahan yang akan Anda lakukan pada halaman HTML atau CSS Anda akan dimuat ulang secara otomatis.
Berikut ini adalah informasi tentang cara mengkonfigurasi 'gulp-webserver' untuk port contoh, dan halaman apa yang dimuat, ...
Anda juga dapat menjalankan tugas Anda hanya dengan memasukkan Ctrl + P dan ketik server web tugas
sumber
npm install -g gulp
,npm install -g gulp-webserver
dan menambahkan variabel lingkungan NODE_PATH yang menunjuk ke AppData \ npm \ node_modules. Kemudian saya bisa menjalankan tugas server web, namun saya mendapatkan 404 saat browser dimulai. Ada yang tahu apa yang saya lewatkan?gulp.src('app')
sehingga benar-benar menunjuk ke sumber saya (yang tidak/app
tetapi '.'). Bekerja dengan sempurna. Terima kasih!Anda sekarang dapat menginstal ekstensi View In Browser . Saya mengujinya di windows dengan chrome dan berfungsi.
versi vscode: 1.10.2
sumber
Ini adalah versi 2.0.0 untuk dokumen saat ini di Chrome dengan pintasan keyboard:
tasks.json
keybindings.json
:Untuk berjalan di server web:
https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer
sumber
Di linux, Anda dapat menggunakan
xdg-open
perintah untuk membuka file dengan browser default:sumber
Ctrl + Shift + b
untuk meluncurkannya di browser. Bagi saya, mnemoniknya adalah "b = browser". :-)Langkah 1:
Cari "buka di browser".
3. Pasang.
4. Klik kanan pada file html Anda, Anda akan menemukan opsi "Buka di Browser".
Itu saja................................................ ......
sumber
Saya hanya memposting ulang langkah-langkah yang saya gunakan dari
msdn
blog. Ini dapat membantu komunitas.Ini akan membantu Anda men-setup server web lokal yang dikenal dengan lite-server with
VS Code
, dan juga memandu Anda untuk meng-hosthtml
file statis Andalocalhost
dan kodedebug
AndaJavascript
.1. Instal Node.js
Jika belum diinstal, dapatkan di sini
Muncul dengan npm (manajer paket untuk memperoleh dan mengelola perpustakaan pengembangan Anda)
2. Buat folder baru untuk proyek Anda
Di suatu tempat di drive Anda, buat folder baru untuk aplikasi web Anda.
3. Tambahkan file package.json ke folder proyek
Kemudian salin / tempel teks berikut ini:
4. Instal server web
Di jendela terminal (command prompt di Windows) dibuka di folder proyek Anda, jalankan perintah ini:
Ini akan menginstal lite-server (didefinisikan dalam package.json), server statis yang memuat index.html di browser default Anda dan secara otomatis menyegarkannya ketika file aplikasi berubah.
5. Mulai server web lokal!
(Dengan asumsi Anda memiliki file index.html di folder proyek Anda).
Di jendela terminal yang sama (command prompt di Windows) jalankan perintah ini:
Tunggu sebentar dan index.html dimuat dan ditampilkan di browser default Anda yang dilayani oleh server web lokal Anda!
lite-server sedang menonton file Anda dan menyegarkan halaman segera setelah Anda membuat perubahan pada file html, js atau css.
Dan jika Anda memiliki Kode VS yang dikonfigurasi untuk menyimpan otomatis (menu File / Simpan Otomatis), Anda melihat perubahan di browser saat Anda mengetik!
Catatan:
Itu dia. Sekarang sebelum sesi pengkodean cukup ketik mulai npm dan Anda baik untuk pergi!
Awalnya diposting di sini di
msdn
blog. Kredit diberikan kepada Penulis:@Laurent Duveau
sumber
Jika Anda hanya menggunakan Mac
tasks.json
file ini :... adalah semua yang Anda butuhkan untuk membuka file saat ini di Safari, dengan anggapan ekstensinya adalah ".html".
Buat
tasks.json
seperti yang dijelaskan di atas dan aktifkan dengan ⌘+ shift+b .Jika Anda ingin membuka di Chrome maka:
Ini akan melakukan apa yang Anda inginkan, seperti membuka di tab baru jika aplikasi sudah terbuka.
sumber
Solusi satu klik cukup instal Ekstensi open-in-browser dari pasar Visual Studio.
sumber
Jawaban Diperbarui pada 18 April, 2020
Klik pada ikon Manage Kiri-Bawah ini . Klik Extensions atau Short Cut
Ctrl+Shift+X
Kemudian Cari di Ekstensi dengan kalimat kunci ini Buka Di Peramban Default . Anda akan menemukan ekstensi ini . Lebih baik bagi saya.
Sekarang klik kanan pada
html
file dan Anda akan melihat Buka di Browser Default atau Short CutCtrl+1
untuk melihathtml
file di browser.sumber
Untuk Mac - Buka di Chrome - Diuji pada VS Code v 1.9.0
Ketik Konfigurasikan Pelari Tugas, pertama kali Anda melakukan ini, Kode VS akan memberikan Anda menu gulir ke bawah, jika itu pilih "Lainnya." Jika Anda pernah melakukan ini sebelumnya, VS Code hanya akan mengirim Anda langsung ke task.json.
Setelah di file task.json. Hapus skrip yang ditampilkan dan ganti dengan yang berikut:
sumber
CTRL+SHIFT+P
akan memunculkan palet perintah.Tergantung pada apa yang Anda jalankan tentunya. Contoh dalam aplikasi ASP.net Anda dapat mengetik:
>kestrel
dan kemudian buka browser web Anda dan ketiklocalhost:(your port here)
.Jika Anda mengetiknya
>
akan menunjukkan kepada Anda perintah pertunjukan dan jalankanAtau dalam kasus Anda dengan HTML, saya pikir
F5
setelah membuka palet perintah harus membuka debugger.Sumber: tautan
sumber
Membuka file di browser Opera (pada Windows 64 bit). Cukup tambahkan baris ini:
Perhatikan format path pada "command": line. Jangan gunakan format "C: \ path_to_exe \ runme.exe".
Untuk menjalankan tugas ini, buka file html yang ingin Anda lihat, tekan F1, ketik opera tugas dan tekan enter
sumber
skrip pelari saya terlihat seperti:
dan itu hanya membuka explorer saya ketika saya menekan ctrl shift b di file index.html saya
sumber
di sini adalah bagaimana Anda dapat menjalankannya di banyak browser untuk windows
perhatikan bahwa saya tidak mengetikkan apa pun di args for edge karena Edge adalah browser default saya, hanya memberikan nama file tersebut.
Sunting: Anda juga tidak perlu -incognito atau -private-window ... hanya saya yang saya suka melihatnya di jendela pribadi
sumber
tasks
bagian. itulah"args":["/C"]
yang membuat ini bekerja. Karena penasaran, apa fungsinya?Baru-baru ini menemukan fitur ini di salah satu tutorial kode studio visual di www.lynda.com
Tekan Ctrl + K diikuti oleh M, itu akan membuka "Pilih Bahasa Mode" (atau klik di sudut kanan bawah yang mengatakan HTML sebelum tersenyum itu), ketik penurunan harga dan tekan enter
Sekarang Tekan Ctrl + K diikuti oleh V, itu akan membuka html Anda di dekat oleh tab.
Tadaaa !!!
Sekarang perintah emmet tidak berfungsi dalam mode ini di file html saya, jadi saya kembali ke keadaan semula (note - tag html tellisense bekerja dengan sempurna)
Untuk kembali ke kondisi awal - Tekan Ctrl + K diikuti oleh M, pilih deteksi otomatis. perintah emmet mulai bekerja. Jika Anda senang dengan hanya penampil html, maka Anda tidak perlu kembali ke keadaan semula.
Bertanya-tanya mengapa vscode tidak memiliki opsi penampil html secara default, ketika itu dapat melumpuhkan file html dalam mode penurunan harga.
Pokoknya itu keren. Selamat vscoding :)
sumber
Ini adalah versi 2.0.0 untuk Mac OSx:
sumber
Ctrl + F1 akan membuka browser default. atau Anda dapat menekan Ctrl + shift + P untuk membuka jendela perintah dan pilih "View in Browser". Kode html harus disimpan dalam file (kode yang tidak disimpan pada editor - tanpa ekstensi, tidak berfungsi)
sumber
mungkin sebagian besar akan dapat menemukan solusi dari jawaban di atas tetapi melihat bagaimana tidak ada yang bekerja untuk saya (
vscode v1.34
) saya pikir saya akan membagikan pengalaman saya. jika setidaknya satu orang merasa terbantu , keren bukan pos yang sia-sia, amiirte ?windows
Lagi pula, solusi saya ( ) dibangun di atas @ noontz. konfigurasinya mungkin sudah cukup untuk versi yang lebih lamavscode
tetapi tidak dengan1.34
(setidaknya, saya tidak bisa membuatnya berfungsi ..).konfigurasi kami hampir identik kecuali satu properti - properti itu,
group
properti. Saya tidak yakin mengapa tetapi tanpa ini, tugas saya bahkan tidak akan muncul di palet perintah.begitu. a berfungsi
tasks.json
untukwindows
pengguna yang menjalankanvscode 1.34
:perhatikan bahwa
problemMatcher
properti ini tidak diperlukan untuk berfungsi, tetapi tanpanya langkah manual ekstra akan dikenakan pada Anda. mencoba membaca dokumen di properti ini tetapi saya terlalu tebal untuk mengerti. semoga seseorang akan datang dan sekolah saya tapi ya, terima kasih sebelumnya untuk itu. yang saya tahu adalah - sertakan properti ini danctrl+shift+b
bukahtml
file saat ini dichrome
tab baru , tanpa repot.mudah.
sumber
Buka Chrome khusus dengan URL dari prompt
Buka Chrome kustom dengan file aktif
Catatan
windows
properti dengan OS lain${config:chrome.executable}
dengan lokasi chrome khusus Anda, mis"C:/Program Files (x86)/Google/Chrome/Application/chrome.exe"
${config:chrome.profileDir}
dengan direktori profil chrome custome Anda, mis"C:/My/Data/chrome/profile"
atau tinggalkan sajasettings.json
- pengguna atau ruang kerja -, sesuaikan jalur dengan kebutuhan Anda:launch.json
untuk keperluan debugging:"runtimeExecutable": "${config:chrome.executable}"
sumber