Cara melihat kode HTML di browser baru Microsoft Visual Studio Code?
Dengan Notepad++ anda memiliki pilihan untuk Berjalan di browser. Bagaimana saya bisa melakukan hal yang sama dengan Kode Visual Studio?
Untuk Windows - Buka Browser Default anda - Diuji pada LENSA dengan Kode v 1.1.0
Jawaban untuk kedua membuka file tertentu (nama hard-coded) ATAU membuka file lainnya.
Langkah-langkah:
Gunakan pilih + shift + p (atau F1) untuk membuka Command Palette.
Ketik Tugas: Mengkonfigurasi Tugas
atau versi Mengkonfigurasi Tugas Runner
. Memilih itu akan membuka tugas-tugas.json file. Menghapus script yang ditampilkan dan menggantinya dengan yang berikut ini:
{ "versi": "0.1.0", "perintah": "explorer", "windows": { "perintah": "explorer.exe" }, "args": ["tes.html"] }
Ingat untuk mengubah "args" bagian dari tugas.json file untuk nama file anda. Ini akan selalu terbuka bahwa file tertentu ketika anda menekan F5.
Anda juga dapat mengatur ini untuk membuka apapun file yang anda buka pada saat itu dengan menggunakan ["${file}"]
sebagai nilai untuk "args". Perhatikan bahwa $
berjalan di luar {...}
, jadi ["{$file"]
adalah salah.
Simpan file.
Beralih kembali ke file html anda (dalam contoh ini's "teks.html"), dan tekan pilih + shift + b untuk melihat halaman anda di Browser Web anda.
DIBANDINGKAN dengan Kode yang telah Live Server Extention yang mendukung satu kali klik memulai dari status bar.
Beberapa fitur:
@InvisibleDev - untuk mendapatkan ini bekerja pada mac mencoba menggunakan ini:
{
"version": "0.1.0",
"command": "Chrome",
"osx": {
"command": "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome"
},
"args": [
"${file}"
]
}
Jika anda memiliki chrome sudah terbuka, itu akan meluncurkan file html anda di tab baru.
Jika anda ingin memiliki hidup reload anda dapat menggunakan gulp-webserver, yang akan menonton untuk perubahan file dan reload halaman, dengan cara ini anda don't harus menekan F5 setiap saat pada halaman anda:
Berikut adalah cara untuk melakukannya:
npm install-simpan-dev tegukan-webserver
tugas-tugas.json
{
"version": "0.1.0",
"command": "gulp",
"isShellCommand": true,
"args": [
"--no-color"
],
"tasks": [
{
"taskName": "webserver",
"isBuildCommand": true,
"showOutput": "always"
}
]
}
gulpfile.js
var gulp = require('gulp'),
webserver = require('gulp-webserver');
gulp.task('webserver', function () {
gulp.src('app')
.pipe(webserver({
livereload: true,
open: true
}));
});
Webserver anda sekarang akan membuka halaman di browser default anda. Sekarang setiap perubahan yang anda akan lakukan untuk anda HTML atau CSS halaman akan secara otomatis reloaded.
Berikut ini adalah sebuah informasi tentang cara mengkonfigurasi 'tegukan-webserver' misalnya port, dan apa halaman untuk memuat, ...
Anda juga dapat menjalankan tugas anda hanya dengan memasukkan Ctrl+P ketik tugas webserver
Berikut ini adalah versi 2.0.0 untuk dokumen saat ini di Chrome w/ keyboard shortcut:
tugas-tugas.json
{
"version": "2.0.0",
"tasks": [
{
"label": "Chrome",
"type": "process",
"command": "chrome.exe",
"windows": {
"command": "C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe"
},
"args": [
"${file}"
],
"problemMatcher": []
}
]
}
keybindings.json
:
{
"key": "ctrl+g",
"command": "workbench.action.tasks.runTask",
"args": "Chrome"
}
Untuk berjalan pada sebuah webserver:
https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer
Saya hanya memposting kembali langkah-langkah saya digunakan dari msdn
blog. Hal ini dapat membantu masyarakat.
Ini akan membantu anda untuk
setup web server lokal yang dikenal sebagai lite-server dengan VS Code
, dan juga memandu anda untuk meng-host anda statis html
file localhost
dan debug
anda Javascript
code.
1. Menginstal Node.js
Jika belum terinstal, dapatkan di sini
Ia datang dengan npm (paket manager untuk memperoleh dan mengelola pengembangan perpustakaan)
2. Buat folder baru untuk proyek anda
Di suatu tempat di drive anda, membuat folder baru untuk aplikasi web anda.
3. Tambahkan paket.json file ke folder proyek
Kemudian copy/paste teks berikut:
{
"name": "Demo",
"version": "1.0.0",
"description": "demo project.",
"scripts": {
"lite": "lite-server --port 10001",
"start": "npm run lite"
},
"author": "",
"license": "ISC",
"devDependencies": {
"lite-server": "^1.3.1"
}
}
4. Menginstal web server
Di jendela terminal (command prompt di Windows) dibuka pada folder proyek anda, jalankan perintah ini:
npm install
Ini akan menginstal lite-server (yang didefinisikan dalam paket.json), statis server yang memuat index.html di browser default anda dan auto refresh itu ketika aplikasi mengubah file.
5. Mulai web server lokal!
(Dengan asumsi anda memiliki index.html file dalam folder proyek anda).
Sama dalam jendela terminal (command prompt di Windows) jalankan perintah ini:
npm start
Tunggu sebentar dan index.html dimuat dan ditampilkan dalam browser default yang disediakan oleh server web lokal!
lite-server adalah menonton file anda dan refresh halaman segera setelah anda membuat perubahan ke html, js atau css file.
Dan jika anda memiliki LENSA dengan Kode dikonfigurasi untuk auto save (menu File / Auto Save), anda akan melihat perubahan dalam browser saat anda mengetik!
Catatan:
Itu saja. Sekarang sebelum coding sesi jenis npm mulai dan anda baik untuk pergi!
Awalnya dikirim di sini di baca
blog.
Kredit pergi ke Penulis : @Laurent Duveau
Jika anda're hanya pada Mac ini tugas-tugas.json
file:
{
"version": "0.1.0",
"command": "open",
"args": ["${file}"],
}
...adalah semua yang anda butuhkan untuk membuka file saat ini di Safari, dengan asumsi ekstensi adalah ".html".
Membuat tugas.json` seperti yang dijelaskan di atas dan memohon dengan ⌘+shift+b.
Jika anda ingin membuka di Chrome maka:
{
"version": "0.1.0",
"command": "open",
"args": ["-a", "Chrome.app", "${file}"],
}
Ini akan melakukan apa yang anda inginkan, seperti dalam membuka di tab baru jika aplikasi sudah terbuka.
Klik salah satu solusi yang cukup menginstal buka-di-browser Ekstensi dari Visual Studio marketplace.
CTRL+SHIFT+P
akan memunculkan command palette.
Tergantung pada apa yang anda're menjalankan saja. Contoh dalam ASP.net aplikasi anda dapat mengetik di:
>kestrel
dan kemudian buka web browser dan ketik localhost:(port anda di sini)
.
Jika anda ketik >
ia akan menampilkan menampilkan dan menjalankan perintah
Atau dalam kasus anda dengan HTML, saya pikir F5
setelah membuka command palette harus membuka debugger.
Sumber: [link][1]
Openning file di Opera browser (pada Windows 64 bit). Hanya menambahkan baris ini:
{
"version": "0.1.0",
"command": "opera",
"windows": {
"command": "///Program Files (x86)/Opera/launcher.exe"
},
"args": ["${file}"] }
Memperhatikan jalan format pada "perintah": baris. Don't gunakan "C:\path_to_exe\runme.exe" format.
Untuk menjalankan tugas ini, buka file html yang ingin anda lihat, tekan F1, jenis tugas opera dan tekan enter
saya pelari script terlihat seperti :
{
"version": "0.1.0",
"command": "explorer",
"windows": {
"command": "explorer.exe"
},
"args": ["{$file}"]
}
dan itu's hanya membuka explorer saya ketika saya tekan ctrl shift b di saya index.html file
berikut adalah bagaimana anda dapat menjalankannya di beberapa browser untuk windows
{
"version": "0.1.0",
"command": "cmd",
"args": ["/C"],
"isShellCommand": true,
"showOutput": "always",
"suppressTaskName": true,
"tasks": [
{
"taskName": "Chrome",
"args": ["start chrome -incognito \"${file}\""]
},
{
"taskName": "Firefox",
"args": ["start firefox -private-window \"${file}\""]
},
{
"taskName": "Edge",
"args": ["${file}"]
}
]
}
perhatikan bahwa saya tidak't jenis apa pun di args untuk edge karena Tepi adalah browser default saya hanya memberi nama file.
EDIT: juga anda don't perlu -penyamaran atau -pribadi-jendela...itu's just me aku ingin melihat itu pada jendela pribadi
Untuk Mac - Terbuka di Chrome - Diuji pada LENSA dengan Kode v 1.9.0
Ketik Mengkonfigurasi Tugas Runner, yang pertama kali anda melakukan ini, DIBANDINGKAN dengan Kode yang akan memberikan anda gulir ke bawah menu, jika tidak pilih "lain-Lain." Jika anda telah melakukan ini sebelumnya, DIBANDINGKAN dengan Kode hanya akan mengirimkan anda langsung ke tugas-tugas.json.
Sekali dalam tugas-tugas.file json. Menghapus script yang ditampilkan dan menggantinya dengan yang berikut ini:
{ "versi": "0.1.0", "perintah": "Chrome", "a": { "perintah": "/Aplikasi/Google Chrome.app/Contents/MacOS/Google Chrome" }, "args": ["${file}"] }
Baru-baru ini menemukan fitur ini di salah satu kode visual studio tutorial dalam www.lynda.com
Tekan Ctrl + K diikuti dengan M, maka akan terbuka "Pilih Bahasa Mode" ( atau klik di sudut kanan bawah yang bertuliskan HTML sebelum itu tersenyum ), jenis markdown dan tekan enter
Sekarang Tekan Ctrl + K diikuti dengan V, maka akan terbuka html anda di tempat yang dekat dengan tab.
Tadaaa !!!
Sekarang emmet perintah tidak bekerja dalam mode ini di file html saya, jadi saya kembali ke keadaan semula ( catatan - tag html tellisense bekerja sempurna )
Untuk pergi ke negara asli - Tekan Ctrl + K diikuti oleh M, pilih auto-detect. emmet perintah mulai kerja. Jika anda senang dengan html yang hanya penampil, maka ada tidak perlu bagi anda untuk datang kembali ke keadaan semula.
Bertanya-tanya mengapa vscode tidak memiliki html viewer pilihan secara default, ketika ia mampu dispaly file html di markdown mode.
Pokoknya ini keren. Bahagia vscoding :)
Berikut ini adalah versi 2.0.0 untuk Mac OSx:
{
// See https://go.microsoft.com/fwlink/?LinkId=733558
// for the documentation about the tasks.json format
"version": "2.0.0",
"tasks": [
{
"label": "echo",
"type": "shell",
"command": "echo Hello"
},
{
"label":"chrome",
"type":"process",
"command":"/Applications/Google Chrome.app/Contents/MacOS/Google Chrome",
"args": [
"${file}"
]
}
]
}
Ctrl + F1 akan membuka default browser. atau anda dapat menekan Ctrl + shift + P untuk membuka command window dan pilih "Tampilan di Browser". Kode html harus disimpan dalam sebuah file (yang belum diselamatkan kode pada editor - tanpa ekstensi, doesn't bekerja)
mungkin sebagian besar akan mampu menemukan solusi dari atas jawaban tapi melihat bagaimana tidak bekerja untuk saya (vscode v1.34
) saya pikir saya'd berbagi pengalaman saya. jika setidaknya salah satu orang yang menemukan itu berguna kemudian, keren tidak posting terbuang, amiirte?
anyway, saya larutan (windows
) dibangun atas @noontz's. nya konfigurasi mungkin sudah cukup untuk versi vscode
tapi tidak dengan 1.34
(setidaknya, saya tidak't mendapatkan itu bekerja ..).
kami konfigurasi hampir identik menyimpan satu properti-properti itu berada, kelompok
properti. i'm tidak yakin mengapa tapi tanpa ini, tugas saya bahkan tidak akan muncul di command palette.
jadi. kerja tugas.jsonuntuk
windowspengguna yang menjalankan
vscode 1.34`:
json { "versi": "2.0.0", "tugas": [ { "label": "Chrome", "type": "proses", "perintah": "chrome.exe", "windows": { "perintah": "C:\\Program Files (x86)\\Google\\Chrome\\Aplikasi\\chrome.exe" }, "args": [ "${file}" ], "kelompok": "membangun", "problemMatcher": [] } ] }
perhatikan bahwa problemMatcher
property tidak diperlukan untuk ini untuk bekerja, tetapi tanpa tambahan langkah manual dikenakan pada anda. mencoba untuk membaca dokumen pada properti ini tapi aku'm terlalu tebal untuk memahami. mudah-mudahan seseorang akan datang sekitar dan sekolah saya, tapi ya, terima kasih sebelumnya untuk itu. semua saya tahu adalah-mencakup akomodasi ini dan ctrl+shift+b
terbuka saat ini html
file baru chrome
tab, kerumitan gratis.
mudah.