【VScode】VScode 瀏覽器預覽HTML （windows+ubuntu+OS X平臺）

最近開始學習javascript，工具選擇了vscode，這裏記錄學習中遇到的問題和解決方案，備日後查看。

一、windows下使用vscode 配置瀏覽器預覽html文件：
第一步：打開tasks.json文件
ctrl+shift+p 輸入 tasks
下拉菜單顯示出：Configure Tasks Runner 選中並回車

然後在出現的下拉菜單中選擇 Others
就會出現tasks.json

第二步：修改文件
我用的是chrome瀏覽器，以此爲例：

{
     See httpsgo.microsoft.comfwlinkLinkId=733558
     for the documentation about the tasks.json format
    version 0.1.0,
    command chrome,
    windows {
        command CProgram Files (x86)GoogleChromeApplicationchrome.exe 
        你瀏覽器的exe路徑
    },
    isShellCommand true,
    args [
        ${file}
    ],
    showOutput always
}

第三步：測試html
執行完以上兩個步驟之後，在vscode中打開你要預覽的html文件，使用快捷鍵
ctrl+shift+b 即可看到界面。

二、ubuntu下使用vscode 配置瀏覽器預覽html文件
1、3 步驟同windows下，第二步修改json文件爲：（也是以google chrome爲例）

{
    // See https://go.microsoft.com/fwlink/?LinkId=733558
    // for the documentation about the tasks.json format
    "version": "0.1.0",
    "command": "google-chrome",
    "isShellCommand": true,
    "args": ["${file}"],
    "showOutput": "never"
}

三Mac下使用vscode 瀏覽器預覽html文件
快捷鍵command+⇧+P：輸入tasks，選擇Configure Default Build Task
然後選擇open task.json file

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