Cara melihat kode HTML di browser 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:

1. Gunakan pilih + shift + p (atau F1) untuk membuka Command Palette.

2. 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.

3. Simpan file.

4. 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:

• Satu Klik Launch dari Status Bar
• Live Reload
• Dukungan untuk Chrome Debugging Lampiran

@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:

• Buka command prompt (cmd) dan jenis

npm install-simpan-dev tegukan-webserver

• Masukkan Ctrl+Shift+P di VS Kode dan jenis Mengkonfigurasi Tugas Runner. Pilih dan tekan enter. Ini akan membuka tugas.file json untuk anda. Hapus segala sesuatu dari itu end masukkan saja kode berikut

tugas-tugas.json

{
    "version": "0.1.0",
    "command": "gulp",
    "isShellCommand": true,
    "args": [
        "--no-color"
    ],
    "tasks": [
        {
            "taskName": "webserver",
            "isBuildCommand": true,
            "showOutput": "always"
        }
    ]
}

• Di root direktori proyek anda tambahkan gulpfile.js dan masukkan kode berikut:

gulpfile.js

var gulp = require('gulp'),
    webserver = require('gulp-webserver');

gulp.task('webserver', function () {
    gulp.src('app')
        .pipe(webserver({
            livereload: true,
            open: true
        }));
});

• Sekarang di VS masukkan Kode Ctrl+Shift+P dan ketik "Menjalankan Tugas" ketika anda masuk ke dalamnya anda akan melihat tugas anda "webserver" yang dipilih dan tekan enter.

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

Anda sekarang dapat menginstal ekstensi View Di Browser. Saya diuji pada windows dengan chrome dan itu bekerja.

vscode versi: 1.10.2

Di linux, anda dapat menggunakan xdg-buka perintah untuk membuka file dengan default browser:

{
    "version": "0.1.0",
    "linux": {
        "command": "xdg-open"
    },
    "isShellCommand": true,
    "showOutput": "never",
    "args": ["${file}"]
}

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:

• Jangan tutup command prompt baris sampai anda selesai coding di aplikasi untuk hari
• Terbuka pada http://localhost:10001 tetapi anda dapat mengubah port dengan editing paket.file json.

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

1. Gunakan Command + shift + p untuk membuka Command Palette.

2. 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.

3. 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}"] }

4. Beralih kembali ke file html anda dan tekan Command + Shift + b untuk melihat halaman anda di Chrome.

Langkah 1:

1. Buka Kode Visual Studio, kemudian pergi ke extensions.
2. Pencarian "buka di browser".

3.Menginstalnya.

4.Klik kanan pada file html anda,anda akan menemukan pilihan "Buka di Browser".

Yang's Semua......................................................

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.jsonuntukwindowspengguna yang menjalankanvscode 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.