安装Live Server扩展后，通过右键菜单或状态栏按钮可运行HTML文件。配置快捷键（如Ctrl+Alt+R）需在keybindings.json中添加对应命令，实现一键启动本地服务器并实时预览页面。
在 VSCode 中运行 HTML 文件，本身没有内置的默认快捷键来直接在浏览器中打开，但可以通过安装扩展和自定义快捷键实现快速预览。最常用的方法是结合 Live Server 扩展来实现一键运行。
1. 安装 Live Server 扩展
Live Server 是 VSCode 插件市场中最受欢迎的工具之一，能启动本地服务器并实时刷新页面。
操作步骤：- 打开 VSCode，点击左侧活动栏的扩展图标（或按 Ctrl+Shift+X）
- 搜索 “Live Server”
- 找到由 Ritwick Dey 开发的 “Live Server” 并点击安装
2. 使用 Live Server 快速运行 HTML
安装完成后，有两种方式启动 HTML 页面：
- 右键点击编辑器中的 HTML 文件，选择 “Open with Live Server”
- 点击 VSCode 右下角状态栏的 “Go Live” 按钮
浏览器会自动打开并显示你的网页，保存代码后页面自动刷新。
立即学习“前端免费学习笔记（深入）”；
3. 设置自定义快捷键运行 HTML
如果你想用快捷键一键启动 Live Server，可以手动配置键盘快捷方式。
设置方法：- 打开命令面板：Ctrl+Shift+P
- 输入 “Preferences: Open Keyboard Shortcuts (JSON)” 并选择
- 在打开的 keybindings.json 文件中添加如下配置：
[
{
"key": "ctrl+alt+r",
"command": "extension.liveServer.goOnline",
"when": "editorTextFocus"
}
]
保存后，在任意 HTML 文件中按下 Ctrl+Alt+R 就能快速启动服务器。
4. 注意事项
- 确保 HTML 文件已保存，Live Server 才能正确加载
- 关闭服务器可点击状态栏的 “Port: 5500” 并选择 “Stop Live Server”
- 若快捷键无效，检查是否与其他插件冲突
基本上就这些。配合 Live Server 和自定义快捷键，VSCode 运行 HTML 就变得非常高效。不复杂但容易忽略细节。
