VS code前端编辑浏览器自动刷新

背景

   平时在写前端代码的时候，为了提高效率，修改代码后能在浏览器中同步查看修改内容。下面介绍下不用再浏览器中安装任何插件，只需要在vs code中安装live-serve即可，告别Livereload。

解决方案

1、安装live-server，在vs code终端执行

npm install live-server -g

2、启动live-server，在vs code终端执行

live-serve

3、右键html文件，选择如下选项，会在你的默认浏览器中打开此html文件；然后就可以愉快的编写啦。

---

可能遇到的异常情况

异常1

无法加载文件 E:\nodejs\node_global\webpack.ps1，因为在此系统上禁止运行脚本有关详细信息，请参阅 https:/go.microsoft.com/fwlink/?LinkID=135170

解决办法：

1.退出软件，以管理员身份运行vs code

2.在vs code终端执行：get-ExecutionPolicy
  显示Restricted（表示状态是禁止的）

3.在vs code终端执行：set-ExecutionPolicy RemoteSigned

4.在vs code终端执行：get-ExecutionPolicy
  显示RemoteSigned表示开启

异常2

Error: listen EACCES 0.0.0.0:8080

解决办法：

live-server --port=7998

异常3

执行第3步时vs code提示：Open a folder or workspace… (File -> Open Folder)

解决办法：

关闭vs code重新打开，选择File->Open Folder...，再执行上面第3步就不会报错了