最近使用VS Code开发vue项目，需要经常在编辑器和浏览器之间来回切换查看页面效果，感觉特别繁琐！今天就来分享下如何在VS Code中实时预览HTML页面或VUE/React/Angular等页面效果。

如下图：在vscode中预览vue和html页面

vscode预览HTML

1、HTML Preview

一个很不错的vscode预览html页面插件

在扩展中搜索“ HTML Preview ”，点击安装，通过如下快捷键预览页面。

• 打开浏览器预览 - ctrl+shift+v or cmd+shift+v

• 编辑器侧边预览 - ctrl+k v or cmd+k v

2、Live Server

一个超赞的微型http服务器(相当于使用nodejs的http-server )

在扩展中搜索“ Live Server ”，点击安装，通过如下操作方法开启/关闭服务。

打开命令面板( F1 或 Ctrl + Shift + P 或 Shift + ⌘ + P)，输入“ Live Server: Open With Live Server ”开启服务，“ Live Server: Stop Live Server ” 关闭服务。

3、Preview on Web Server

让你预览的web界面同步手机，浏览器，互相同步，拥有非常好的测试效果。

在扩展中搜索“ Preview on Web Server ”，点击安装，通过如下快捷键设置。

• Preview on side panel (ctrl+shift+v)

• Launch on browser (ctrl+shift+l)

• Stop the web server (ctrl+shift+s)

• Resume the web server (ctrl+shift+r)

• show UI Page (ctrl+shift+u)

另外，还支持在html页面鼠标右键打开页面

vscode预览vue/react/angular页面

Browser Preview | 让你能够在VSCode中打开一个真实的浏览器进行预览并调试。

在扩展中搜索“ Browser Preview ”，点击安装

安装好 Browser Preview 插件后，左侧边栏会看到一个新增的图标。点击这个图标，就能在 VS Code 里打开一个浏览器，输入网址即可调试页面。

建议

提醒小伙伴们按需安装Visual Studio Code插件，建议控制插件安装数量在三十个左右，否则会影响Visual Studio Code使用性能。

END