vscode让html文件保存自动刷新浏览器

前言

在我们使用vscode写html文件写demo的时候，每次改完文件都需要手动切换到浏览器，然后刷新浏览器才能看到我们改动后的效果。我就在想，如果再双屏的情况下，我们能够一块屏幕写代码，保存后直接就在另外一个屏幕上看到效果就好了，非常方便。类似于开发react或vue项目的时候能够自动刷新一样。

live servier插件的安装和使用

1. 插件市场安装
   

2. 重新启动vscode，当你的vscode的状态栏中有了这个标志说明成功了
   

3. 在你需要监听的html文件上右键，然后选择open with live server即可
   也可以在当前文件中使用快捷键command + l command + o
   也可以点击上面截图中的那个GoLive标志

4. 然后当你的浏览器地址栏是这个样子的说明已经成功了
   我这里监听的是端口号是3008，没设置的话应该是3000端口
   

小坑记录

问题

我在安装好之后使用open with live server打开的3000端口不是当前html页面的，而是一个umi的的一个ui配置页面，如图

因为我同时在跑一个umi的项目，然后3000端口被umi项目占用了，导致每次打开live server都是这个页面

解决方案

将live server的默认端口号改成一个不会冲突的端口号（如8010），然后重新打开html项目目录即可