使用Visual Studio Code打開瀏覽器查看HTML文件

vscode出來之前一直使用sublime，后者在編寫HTML文件時可以通過點擊鼠標右鍵，找到open in browser來啟動系統默認瀏覽器，而vscode卻沒有這個功能，調試和預覽起來比較麻煩。不過可以通過配置tasks.json文件來解決這個問題。

按Ctrl+P打開命令面板，輸入tasks.json然后回車打開這個文件，可以看到默認配置，然后修改如下：

{
    // See http://go.microsoft.com/fwlink/?LinkId=733558 // for the documentation about the tasks.json format "version": "0.1.0", "command": "Chrome", //使用chrome瀏覽器 "windows": { "command": "C:/Program Files (x86)/Google/Chrome/Application/chrome.exe" //chrome瀏覽器的路徑  }, "isShellCommand": true, "args": ["${file}"], //表示對當前文件進行操作 "showOutput": "always" }

保存后打開一個html文件，按組合鍵Ctrl+Shift+B就可以使用指定的瀏覽器打開html文件了。

 

針對Version 1.8.0的更新

　　 最近升級到1.8.0，發現上面的操作失效了，於是改了一下(僅對Win)：

• 首先界面按下Ctrl+Shift+P顯示命令面板，輸入ctr
  
  選擇【任務：配置任務運行程序】
  
  
• 然后選擇【Others】，可以看到默認配置
  

最后修改如下(刪除其中一行)：

{
    "version": "0.1.0", "command": "Chrome", "windows": { "command": "C:/Program Files (x86)/Google/Chrome/Application/chrome.exe" },
 "isShellCommand": true, "args": ["${file}"], "showOutput": "never" }

保存后打開html文件，按下Ctrl+Shift+B就能打開瀏覽器了。

另外更正一下下面評論里的說法，直接新建.vscode文件夾是不行的，Windows會認為文件名不合法，這個文件夾只能通過VSCode創建，也就是上面提到的步驟。

除此之外，還可以在上面的基礎上用組合鍵Ctrl+Shift+V來預覽該html文件，這種方法不用打開瀏覽器，但對沒有配置文件的單個文件無效。