Cara melihat file HTML di browser dengan Visual Studio Code

266

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?

Ninjakannon
sumber
7
Kode VS memiliki Live Server Extention sekarang. Silakan lihat jawaban saya: stackoverflow.com/a/48721885/466066
Jose Cherian
3
Ekstensi server langsung berfungsi untuk saya. Saya tidak ingin mengonfigurasi file apa pun untuk melakukan ini.
AGDM

Jawaban:

209

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:

  1. Gunakan ctrl+ shift+ p(atau F1) untuk membuka Palet Perintah.

  2. Ketik Tasks: Configure Taskatau pada versi yang lebih lama Configure Task Runner. Memilihnya akan membuka file task.json . Hapus skrip yang ditampilkan dan ganti dengan yang berikut:

    {
        "version": "0.1.0",
        "command": "explorer",    
        "windows": {
            "command": "explorer.exe"
        },
        "args": ["test.html"]
    }

    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.

  3. Simpan file.

  4. Beralih kembali ke file html Anda (dalam contoh ini "text.html"), dan tekan ctrl+ shift+ buntuk melihat halaman Anda di Browser Web Anda.

masukkan deskripsi gambar di sini

yushulx
sumber
16
Anda bahkan dapat menggunakan variabel jika Anda memiliki lebih dari satu file HTML. Anda dapat melakukan: "args": ["{$ file}"] untuk meneruskan file terbuka saat ini. Lihat juga code.visualstudio.com/Docs/tasks#_variables-in-tasksjson
Dirk Bäumer
7
Bagaimana saya melakukannya di Mac? Tidak ada file exe. Saya ingin membuka halaman web dalam chrome di Mac
InvisibleDev
3
baru saja mendapatkan "Gagal meluncurkan program eksternal chrome {$ file}. spawn chrome ENOENT"
johny why
7
Untuk Mengkonfigurasi Tugas di folder baru: Pilih tugas: Konfigurasikan Tugas Pelari dan Anda akan melihat daftar templat pelari tugas. Pilih Lainnya untuk membuat tugas yang menjalankan perintah eksternal. . . . Anda sekarang akan melihat file task.json di folder .vscode ruang kerja Anda dengan konten berikut:. . . oleh code.visualstudio.com/Docs/editor/tasks
yu yang Jian
5
Konfigurasikan Pelari Tugas tidak lagi ada di VSC 1.24.0 - Control-Shift-P tidak mengembalikan hasil untuk string itu.
Lonstar
110

VS Code memiliki Live Server Extention yang mendukung peluncuran satu klik dari status bar.

Beberapa fitur:

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

masukkan deskripsi gambar di sini

Jose Cherian
sumber
8
Ekstensi ini juga memiliki add-on web untuk menyediakan fungsionalitas memuat ulang otomatis ke halaman dinamis.
M. Sundstrom
@ M.Sundstrom, bisakah Anda memberi saya nama / tautan add-on itu?
Adil Saju
2
Masih sangat bermanfaat, dan terutama sepenuhnya konfigurasi gratis!
Jonas
2
Ini tidak direkomendasikan untuk halaman yang rumit mungkin bagus untuk coders baru
Yasser Jarouf
1
tetapi tampaknya Anda tidak dapat melihat pratinjau file aktif yang belum disimpan, bukan? (Menjalankannya, tidak mempratinjau html, tetapi menunjukkan hierarki folder pada browser)
JinSnow
73

@InvisibleDev - untuk menjalankan ini di mac mencoba menggunakan ini:

{
    "version": "0.1.0",
    "command": "Chrome",
    "osx": {
        "command": "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome"
    },
    "args": [
        "${file}"
    ]
}

Jika Anda sudah membuka chrome, itu akan meluncurkan file html Anda di tab baru.

Sammydo_55
sumber
32

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

{
    "version": "0.1.0",
    "command": "gulp",
    "isShellCommand": true,
    "args": [
        "--no-color"
    ],
    "tasks": [
        {
            "taskName": "webserver",
            "isBuildCommand": true,
            "showOutput": "always"
        }
    ]
}
  • Di direktori root 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 Code masukkan Ctrl + Shift + P dan ketik "Run Task" ketika Anda memasukkannya Anda akan melihat tugas Anda "webserver" dipilih dan tekan enter.

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

Vlad Bezden
sumber
2
Saya harus menjalankan npm install -g gulp, npm install -g gulp-webserverdan 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?
Kirill Osenkov
2
Sudahlah, hanya perlu mengubah 'aplikasi' dalam contoh Anda menjadi '.' (jadi ini berfungsi dari direktori saat ini).
Kirill Osenkov
1
Satu komentar untuk jawabannya: Jika Anda ingin menjalankan file html di browser Anda, yang akan memuat ulang secara otomatis pada perubahan, gulpfile.js Anda akan terlihat seperti ini, dengan tanda '.' alih-alih 'aplikasi'. Code = var gulp = butuhkan ('tegukan'), webserver = butuhkan ('tegukan-webserver'); gulp.task ('webserver', function () {gulp.src ('.') .pipe (webserver ({fallback: 'index.html', isi-hati: true, open: true}));});
Friis1978
1
Ini luar biasa. Terima kasih telah menjelaskan ini sebagai opsi yang berharga. Saya juga telah menerapkan sedikit jawaban Krill dan Friis untuk membuatnya bekerja. Tapi itu benar!
klewis
Saya mendapatkan "Cannot GET /" karena saya copypasted gulpfile.js tanpa mengkonfigurasi baris gulp.src('app')sehingga benar-benar menunjuk ke sumber saya (yang tidak /apptetapi '.'). Bekerja dengan sempurna. Terima kasih!
22

Anda sekarang dapat menginstal ekstensi View In Browser . Saya mengujinya di windows dengan chrome dan berfungsi.

versi vscode: 1.10.2

masukkan deskripsi gambar di sini

Roel
sumber
5
Ekstensi itu mendapat ulasan yang mengerikan.
Jon Crowell
Ini tidak secara otomatis menyegarkan peramban dan ini bukan yang dicari OP
Jude Niroshan
18

Ini adalah versi 2.0.0 untuk dokumen saat ini di Chrome dengan pintasan keyboard:

tasks.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 di server web:

https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer

noontz
sumber
17

Di linux, Anda dapat menggunakan xdg-openperintah untuk membuka file dengan browser default:

{
    "version": "0.1.0",
    "linux": {
        "command": "xdg-open"
    },
    "isShellCommand": true,
    "showOutput": "never",
    "args": ["${file}"]
}
Loris
sumber
6
Terima kasih! Saya adalah pengguna Linux dan merasa tersesat. Saya ingin menambahkan bahwa orang perlu menekan Ctrl + Shift + buntuk meluncurkannya di browser. Bagi saya, mnemoniknya adalah "b = browser". :-)
ankush981
Ini berfungsi tetapi tampaknya usang, jika Anda memiliki versi yang diperbarui, terima kasih
Bruno L.
14

Langkah 1:

  1. Buka Visual Studio Code, lalu buka ekstensi.
  2. Cari "buka di browser". masukkan deskripsi gambar di sini

    3. Pasang.

    4. Klik kanan pada file html Anda, Anda akan menemukan opsi "Buka di Browser". masukkan deskripsi gambar di sini

    Itu saja................................................ ......

rinku Choudhary
sumber
9

Saya hanya memposting ulang langkah-langkah yang saya gunakan dari msdnblog. 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-host htmlfile statis Anda localhostdan kode debugAnda Javascript.

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:

{
   "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. Instal server web

Di jendela terminal (command prompt di Windows) dibuka di folder proyek Anda, jalankan perintah ini:

npm install

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:

npm start

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:

  • Jangan tutup prompt baris perintah sampai Anda selesai membuat kode di aplikasi Anda untuk hari itu
  • Ini terbuka di http: // localhost: 10001 tetapi Anda dapat mengubah port dengan mengedit file package.json.

Itu dia. Sekarang sebelum sesi pengkodean cukup ketik mulai npm dan Anda baik untuk pergi!

Awalnya diposting di sini di msdnblog. Kredit diberikan kepada Penulis:@Laurent Duveau

shaijut
sumber
6

Jika Anda hanya menggunakan Mac tasks.jsonfile ini :

{
    "version": "0.1.0",
    "command": "open",
    "args": ["${file}"],
}

... adalah semua yang Anda butuhkan untuk membuka file saat ini di Safari, dengan anggapan ekstensinya adalah ".html".

Buat tasks.jsonseperti yang dijelaskan di atas dan aktifkan 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 membuka di tab baru jika aplikasi sudah terbuka.

Sez
sumber
4

Solusi satu klik cukup instal Ekstensi open-in-browser dari pasar Visual Studio.

Manish Sharma
sumber
4

Jawaban Diperbarui pada 18 April, 2020

masukkan deskripsi gambar di sini

Klik pada ikon Manage Kiri-Bawah ini . Klik Extensions atau Short CutCtrl+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 htmlfile dan Anda akan melihat Buka di Browser Default atau Short Cut Ctrl+1untuk melihat htmlfile di browser.

Tuan Perfeksionis
sumber
3

Untuk Mac - Buka di Chrome - Diuji pada VS Code v 1.9.0

  1. Gunakan Command+ shift+ puntuk membuka Palet Perintah.

masukkan deskripsi gambar di sini

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

  2. Setelah di file task.json. Hapus skrip yang ditampilkan dan ganti dengan yang berikut:

{
    "version": "0.1.0",
    "command": "Chrome",
    "osx": {
        "command": "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome"
    },
    "args": ["${file}"]
}
  1. Beralih kembali ke file html Anda dan tekan Command+ Shift+ buntuk melihat halaman Anda di Chrome.
Joe Mellin
sumber
2

CTRL+SHIFT+Pakan memunculkan palet perintah.
Tergantung pada apa yang Anda jalankan tentunya. Contoh dalam aplikasi ASP.net Anda dapat mengetik:
>kestreldan kemudian buka browser web Anda dan ketik localhost:(your port here).

Jika Anda mengetiknya >akan menunjukkan kepada Anda perintah pertunjukan dan jalankan

Atau dalam kasus Anda dengan HTML, saya pikir F5setelah membuka palet perintah harus membuka debugger.

Sumber: tautan

Andreas DM
sumber
Saya mendapatkan konten
2

Membuka file di browser Opera (pada Windows 64 bit). Cukup tambahkan baris ini:

{
"version": "0.1.0",
"command": "opera",
"windows": {
    "command": "///Program Files (x86)/Opera/launcher.exe"
},
"args": ["${file}"] }

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

Jose Carlos
sumber
2

skrip pelari saya terlihat seperti:

{
    "version": "0.1.0",

    "command": "explorer",

    "windows": {
        "command": "explorer.exe"
    },

    "args": ["{$file}"]
}

dan itu hanya membuka explorer saya ketika saya menekan ctrl shift b di file index.html saya

Sahar Ben-Shushan
sumber
2

di sini adalah bagaimana Anda dapat menjalankannya di banyak 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 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

Abdel-Rahman Muhammed
sumber
Saya hanya menyalin tasksbagian. itulah "args":["/C"]yang membuat ini bekerja. Karena penasaran, apa fungsinya?
Ryan B
1

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

Tuan
sumber
1
Pertanyaannya adalah bagaimana cara melihat di browser.
user5389726598465
1

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}"
      ]
    }
  ]
}
Eliandro
sumber
0

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)

PersyJack
sumber
1
Apa versi Visual Studio Code yang Anda gunakan? Perintah-perintah itu tidak berfungsi di 1.8.1 yang baru saya perbarui. Ctrl + F1 tidak melakukan apa-apa dan saya tidak memiliki opsi Lihat di Browser di palet perintah. Mungkin Anda memiliki sesuatu di luar default yang diinstal atau tugas tambahan di task.json Anda?
jla
Saya memiliki versi yang sama tetapi saya menyadari saya menginstal ekstensi untuk itu. Ini adalah: marketplace.visualstudio.com/...
PersyJack
0

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 ?


windowsLagi pula, solusi saya ( ) dibangun di atas @ noontz. konfigurasinya mungkin sudah cukup untuk versi yang lebih lama vscodetetapi tidak dengan 1.34(setidaknya, saya tidak bisa membuatnya berfungsi ..).

konfigurasi kami hampir identik kecuali satu properti - properti itu, groupproperti. Saya tidak yakin mengapa tetapi tanpa ini, tugas saya bahkan tidak akan muncul di palet perintah.

begitu. a berfungsi tasks.jsonuntuk windowspengguna yang menjalankan vscode 1.34:

{
    "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}"
            ],
            "group": "build",
            "problemMatcher": []
        }
    ]
}

perhatikan bahwa problemMatcherproperti 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 dan ctrl+shift+bbuka htmlfile saat ini di chrometab baru , tanpa repot.


mudah.

mad.meesh
sumber
0

Buka Chrome khusus dengan URL dari prompt

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Open Chrome",
      "type": "process",
      "windows": {
        "command": "${config:chrome.executable}"
      },
      "args": ["--user-data-dir=${config:chrome.profileDir}", "${input:url}"],
      "problemMatcher": []
    }
  ],
  "inputs": [
    {
      "id": "url",
      "description": "Which URL?",
      "default": "http://localhost:8080",
      "type": "promptString"
    }
  ]
}

Buka Chrome kustom dengan file aktif

{
  "label": "Open active file in Chrome",
  "type": "process",
  "command": "chrome.exe",
  "windows": {
    "command": "${config:chrome.executable}"
  },
  "args": ["--user-data-dir=${config:chrome.profileDir}", "${file}"],
  "problemMatcher": []
},

Catatan

  • jika perlu, ganti windows properti dengan OS lain
  • menggantikan ${config:chrome.executable} dengan lokasi chrome khusus Anda, mis"C:/Program Files (x86)/Google/Chrome/Application/chrome.exe"
  • ganti ${config:chrome.profileDir}dengan direktori profil chrome custome Anda, mis "C:/My/Data/chrome/profile" atau tinggalkan saja
  • Anda dapat menyimpan variabel seperti di atas jika Anda mau. Untuk melakukannya, tambahkan entri berikut di settings.json- pengguna atau ruang kerja -, sesuaikan jalur dengan kebutuhan Anda:
"chrome.executable": "C:/Program Files (x86)/Google/Chrome/Application/chrome.exe",
"chrome.profileDir": "C:/My/Data/chrome/profile"
  • Anda bisa menggunakan kembali variabel-variabel ini misalnya dalam launch.jsonuntuk keperluan debugging:"runtimeExecutable": "${config:chrome.executable}"
ford04
sumber