安装Live Server插件并设置快捷键可实现一键预览HTML。1. 在VS Code扩展中搜索并安装Ritwick Dey开发的Live Server；2. 右键HTML文件选择“Open with Live Server”或点击右下角Go Live按钮启动实时预览；3. 通过命令面板打开keybindings.json，添加{ "key": "ctrl+alt+v", "command": "extension.liveServer.goOnline", "when": "editorTextFocus"}设置快捷键；4. 确保文件已保存，避免快捷键冲突，可点击状态栏端口关闭服务器。
在 VS Code 中快速预览 HTML 页面，最常用的方法是结合 Live Server 插件和自定义快捷键，实现一键在浏览器中打开页面。下面介绍具体设置步骤。
1. 安装 Live Server 插件
Live Server 是一个非常流行的 VS Code 扩展，可以启动本地服务器并实时刷新页面。
- 打开 VS Code，点击左侧的扩展图标（或按 Ctrl+Shift+X）
- 搜索 Live Server
- 找到由 Ritwick Dey 开发的插件，点击“安装”
2. 使用 Live Server 快速预览
安装完成后，可以通过以下方式启动预览：
- 右键点击编辑器中的 HTML 文件，选择“Open with Live Server”
- 或者点击 VS Code 右下角状态栏的 Go Live 按钮
浏览器会自动打开并显示当前页面，修改代码后页面也会自动刷新。
立即学习“前端免费学习笔记（深入）”；
3. 设置快捷键快速预览
你可以为“Open with Live Server”设置一个快捷键，提升效率。
- 打开命令面板：Ctrl+Shift+P
- 输入“Preferences: Open Keyboard Shortcuts (JSON)”并选择
- 在打开的 keybindings.json 文件中添加一行：
{
"key": "ctrl+alt+v",
"command": "extension.liveServer.goOnline",
"when": "editorTextFocus"
}
保存后，只要光标在 HTML 文件中，按下 Ctrl+Alt+V 就能快速启动预览。
4. 注意事项
- 确保 HTML 文件已保存，Live Server 才能正确加载
- 如果快捷键无效，检查是否与其他插件冲突
- 关闭服务器可点击状态栏的“Port: 5500”然后选“Stop Live Server”
基本上就这些。通过 Live Server + 快捷键，就能高效预览 HTML 页面，开发体验更流畅。
