最近使用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 里打开一个浏览器，输入网址即可调试页面。
在这里插入图片描述

# vscode
Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue