使用Visual Studio Code打开浏览器查看HTML文件

vscode出来之前一直使用sublime，后者在编写HTML文件时可以通过点击鼠标右键，找到open in browser来启动系统默认浏览器，而vscode却没有这个功能，调试和预览起来比较麻烦。不过可以通过配置tasks.json文件来解决这个问题。

一、首先按下Ctrl+shift+p输入Configure Task ，点击Enter，点击使用模板创建tasks.json文件，点击MSbuild，然后打开tasks.json文件，然后再文件中修改某些键值对。下面是tasks.json文件的原始内容和部分内容修改如下：

原始内容：

{

// See https://go.microsoft.com/fwlink/?LinkId=733558

// for the documentation about the tasks.json format

"version": "2.0.0",

"tasks": [

{

"label": "build",

"type": "shell",

"command": "C:/Users/rush/AppData/Local/Google/Chrome/Application/chrome.exe",

"args": [

// Ask msbuild to generate full paths for file names.

"/property:GenerateFullPaths=true",

"/t:build"

],

"group": "build",

"presentation": {

// Reveal the output only if unrecognized errors occur.

"reveal": "silent"

},

// Use the standard MS compiler pattern to detect errors, warnings and infos

"problemMatcher": "$msCompile"

}

]

}

修改后内容：

{

// 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:/Users/rush/AppData/Local/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,就可以看到浏览器自动打开index.html文件。