使用Live Server插件可一键预览html文件，保存后自动刷新；通过设置可指定默认浏览器，配置快捷键Ctrl+Alt+L快速启动，提升开发效率。
在 VS Code 中快速运行 HTML 文件，不需要每次都手动打开浏览器。通过一些简单配置和工具，可以大幅提升开发效率。以下是几种实用技巧，帮助你实现一键预览 HTML 页面。
1. 使用 Live Server 插件
Live Server 是 VS Code 最受欢迎的插件之一，能自动启动本地服务器并实时刷新页面。
使用方法：
- 打开 VS Code，进入扩展商店（快捷键 Ctrl+Shift+X）
- 搜索 Live Server，安装由 Ritwick Dey 开发的插件
- 安装完成后，打开任意 HTML 文件
- 右下角点击 go Live 按钮，或右键选择“Open with Live Server”
浏览器会自动打开页面，且代码保存后页面自动刷新，非常适合前端调试。
2. 配置默认浏览器打开
Live Server 默认使用系统默认浏览器，但你可以指定特定浏览器。
立即学习“前端免费学习笔记（深入）”；
设置方式：
- 打开 VS Code 设置（Ctrl+,）
- 搜索 Live Server: Settings
- 找到 “Live Server > Settings: Browser”
- 输入浏览器名称，如
chrome或firefox
支持常见浏览器：Chrome、Firefox、edge、safari 等。
3. 快捷键快速启动
为“Open with Live Server”设置快捷键，进一步提速。
操作步骤：
- 进入菜单：文件 → 首选项 → 键盘快捷方式（Ctrl+K Ctrl+S）
- 搜索 Live Server: Open with Live Server
- 双击设置你喜欢的快捷键，例如 Ctrl+Alt+L
之后按快捷键即可快速启动服务。
4. 直接用浏览器打开（无需插件）
如果你只是想临时查看效果，也可以不借助插件。
方法如下：
- 右键点击编辑器中的 HTML 文件
- 选择“在浏览器中打开”（部分系统需先安装“Open in Browser”插件）
这个方法不会启动本地服务器，适合静态页面查看，但不支持 ajax 请求等需要服务的场景。
基本上就这些。配合 Live Server，VS Code 就变成了一个轻量高效的前端开发环境。只要保存代码，浏览器就能立刻看到变化，开发体验流畅很多。