如何用VS code开启本地服务

用VS code有一段时间了，但有些功能依然没有被开发出来，那天看到一个同行用VS code开启本地服务，引起了我的好奇，于是网上查了查，找到正确开启它的方法，于是赶紧记录下来，以后方便查阅，也分享给大家~

1.要想开启本地服务，首先要在VS code视口中安装插件“Debugger for Chrome”，如下面所示，按步骤安装插件：

安装Debugger for Chrome插件.jpg

2.接着按下图中的步骤调出配置文件launch.json

配置launch.json.png

3.然后再在打开的aunch.json里进行如下配置

  {
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "使用本机chrom调试",
            "url": "http://localhost:8080",
            "webRoot": "${workspaceFolder}",
            "file":"${workspaceRoot}/setWebGLContext.html", //${workspaceRoot}/这块不用改，后面的名称与路径要随需求修改
        }
    ]
}

4.设置保存好之后，按F5键就可以能打开一个浏览器的空白页，同时在编辑器的下面会弹出一个终端调试窗口，如下图所示：

开启终端.jpg

当然这个终端调试窗口也可以按菜单里的 View（查看） -> Terminal（终端）调出来。

5.在“Terminal（终端）”中输入： npm install -g live-server
运行完了之后，在下面出现类似如下版本号信息，说明live-server安装成功了。

• live-server@1.2.1
  updated 2 packages in 48.524s

6.下面就可以开启服务了，我的设置里不是自动启动服务，所以要运行npm run dev手动启动，ok！就这样轻松搞定！