使用Live Server插件可轻松在VSCode中运行HTML文件，安装后右键选择“Open with Live Server”即可在浏览器中实时预览，保存自动刷新；也可直接通过资源管理器双击HTML文件用默认浏览器打开，适合快速查看。

在VSCode中运行HTML文件其实很简单，不需要复杂的配置。你只需要借助浏览器和合适的插件或操作方式，就能快速预览页面效果。

使用Live Server插件（推荐）

这是最常用也最方便的方法，适合前端开发调试。

• 打开VSCode，点击左侧的扩展图标（或按 Ctrl+Shift+X）
• 搜索 Live Server，找到由 Ritwick Dey 开发的插件并安装
• 打开一个HTML文件，右键点击编辑器内容，选择 Open with Live Server
• 浏览器会自动打开，并显示你的网页内容，保存代码后页面还会自动刷新

直接用浏览器打开HTML文件

如果你只是想快速查看效果，可以不依赖插件。

前端开发

ys-agent 前端（frontend/）功能迭代的工程规范守门 skill。当任何 agent 接到 ys-agent 前端相关任务时——新增页面、新增组件、加 API、加 Pinia store、改路由、写 mock、调整布局、修改样式、对接后端接口、迁移 demo 代码、做主题、加权限、写公共组件、做数据可视化、做表单、做弹窗、做表格、做搜索过滤、调 Element Plus 用法、做响应式、做性能优化，或仅仅是在 frontend/ 目录下编辑任何 .vue / .ts / .scss / .c

下载

• 在VSCode中保存HTML文件（如 index.html）
• 在资源管理器中右键该文件，选择“在资源管理器中显示”
• 找到这个文件，双击用默认浏览器打开，或者拖到浏览器标签页中

设置默认浏览器（可选）

Live Server 默认会使用系统默认浏览器打开页面。如果你想更改，可以在设置中搜索 Live Server: Settings，找到 Launch in Primary Browser 进行修改，支持 Chrome、Firefox 等。

立即学习“前端免费学习笔记（深入）”；

基本上就这些。用 Live Server 能获得更好的开发体验，尤其是做动态内容时。其他方法适合简单查看。不复杂但容易忽略的是：确保文件已保存，且路径正确。