Cara melihat file HTML di browser dengan Visual Studio Code

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?

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.

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

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

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

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

versi vscode: 1.10.2

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

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

Langkah 1:

1. Buka Visual Studio Code, lalu buka ekstensi.

2. Cari "buka di browser".

   3. Pasang.

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

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

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

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.

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

Jawaban Diperbarui pada 18 April, 2020

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.

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

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

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

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

4. Beralih kembali ke file html Anda dan tekan Command+ Shift+ buntuk melihat halaman Anda di Chrome.

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

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

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

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

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

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

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.

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}"