使用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文件，這種方法不用打開瀏覽器，但對沒有配置文件的單個文件無效。

 

針對Version 1.17.1的更新

升級到該版本后，發現操作上又有了一定的出入😅，仍舊是在工程文件夾中按下Ctrl+Shift+B，然后點擊下圖中高亮部分：

 

 

這里選哪一個都行，點擊后會自動生成task.json文件

然后將格式更新如下：

{
    // See https://go.microsoft.com/fwlink/?LinkId=733558
    // for the documentation about the tasks.json format
    "version": "2.0.0",
    "tasks": [
        {
            "label": "Run HTML file with Chrome",
            "type": "process",  // [shell,process]
            "command": "Chrome",
            "args": ["${file}"],
            "windows": {
                "command": "C:/Program Files (x86)/Google/Chrome/Application/chrome.exe"
            },
            "group": "build",
            "presentation": {
                // Reveal the output only if unrecognized errors occur.
                "reveal": "never"  //[always,never,silent]
            },
            // Use the standard MS compiler pattern to detect errors, warnings and infos
            "problemMatcher": "$msCompile"
        }
    ]
}

最后執行Ctrl+Shift+B：

這行命令就是上面定義的label。另外，Ctrl+Shift+V這個快捷鍵已經廢棄了。