安装Live Server扩展可实现HTML一键预览,支持实时刷新;2. 右键HTML文件选择“Open with Live Server”或点击状态栏“Go Live”启动;3. 可设置默认浏览器和自定义快捷键提升效率;4. 临时查看可拖拽文件到浏览器。
在 VSCode 中快速运行 HTML 文件并不需要复杂的配置,只要掌握几个实用技巧,就能实现一键预览。核心思路是借助扩展和快捷操作,把浏览器打开流程自动化。
安装 Live Server 扩展
这是最高效的运行方式。Live Server 能启动一个本地服务器,并支持实时刷新。
- 打开 VSCode,点击左侧活动栏的扩展图标(四块方块组成的图标)
- 搜索
Live Server,选择由 Ritwick Dey 开发的版本并安装 - 安装完成后,右键点击任意 HTML 文件,选择“Open with Live Server”
- 浏览器会自动打开,并显示当前页面内容
设置默认打开方式为 Live Server
避免每次手动选择,可以设为默认行为。
- 文件保存后,Live Server 会自动刷新页面,提升开发效率
- 在设置中搜索 “live server default”
- 勾选 “Use Default Browser” 或指定浏览器路径
- 之后通过状态栏右下角的 “Go Live” 按钮即可一键启动
使用快捷键快速启动
提高操作速度的关键是减少鼠标操作。
- 启动服务后,按 Ctrl + Click 可在新标签页打开链接
- 关闭服务只需点击状态栏 “Port: 5500” 并选择停止
- 可自定义快捷键绑定“Live Server: Open with Live Server”命令
直接用浏览器打开(临时测试用)
不需要实时刷新时,可用简单方法。
- 右键 HTML 文件,选择“Reveal in File Explorer”找到文件位置
- 拖拽文件到浏览器标签页即可查看
- 或在资源管理器中右键文件,选择“Open with” → 浏览器
基本上就这些。Live Server 是最推荐的方式,适合日常开发。临时查看可以用直接拖拽浏览器的方法。不复杂但容易忽略的是默认设置和快捷操作,配合适当习惯调整,效率提升明显。

Live Server,选择由 Ritwick Dey 开发的版本并安装






