vscode内置浏览器 开发vue 显示网址

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

vscode预览HTML

1、HTML Preview
在扩展中搜索“ 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

在扩展中搜索“ 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 里打开一个浏览器，输入网址即可调试页面。