vscode作为主流的前端开发编辑器，本身没有内置直接运行html文件的默认快捷键，开发者需要借助扩展工具或者自定义配置来实现一键运行预览html页面的效果。常见的实现方式包括安装Live Server扩展、自定义任务快捷键等，不同的方式对应不同的快捷键用法。
一、使用Live Server扩展的快捷键
Live Server是vscode中最常用的html预览扩展，安装后可以直接启动本地服务器运行html文件，默认提供了对应的快捷键。
1. 安装Live Server扩展
打开vscode的扩展面板，搜索Live Server，点击安装即可，安装完成后不需要额外配置就能使用基础功能。
2. 默认快捷键用法
安装完成后，打开需要运行的html文件，使用以下快捷键即可启动服务预览页面：
- Windows/Linux系统：
Alt+L然后Alt+O，或者直接右键点击html文件选择Open with Live Server - macOS系统：
Option+L然后Option+O
启动后浏览器会自动打开当前html页面，并且修改代码保存后会自动刷新页面，非常方便。
3. 自定义Live Server快捷键
如果觉得默认快捷键不好用，可以自定义快捷键绑定：
- 打开vscode的键盘快捷方式面板，快捷键是
Ctrl+K然后Ctrl+S（Windows/Linux）或者Cmd+K然后Cmd+S（macOS） - 在搜索框中输入live server，找到Open with Live Server命令
- 点击该命令后面的铅笔图标，按下你想要的快捷键组合，比如
Ctrl+Shift+R，保存即可
二、自定义任务运行html的快捷键
如果不想安装扩展，也可以通过自定义任务的方式绑定运行html的快捷键，需要借助系统默认浏览器来实现。
1. 创建自定义任务
打开vscode，按下Ctrl+Shift+P打开命令面板，输入Tasks: Configure Task，选择Create tasks.json file from template，再选择Others模板，然后修改tasks.json文件内容如下：
{
"version": "2.0.0",
"tasks": [
{
"label": "open html in browser",
"type": "shell",
"command": "start",
"args": [
"${file}"
],
"group": {
"kind": "build",
"isDefault": true
},
"presentation": {
"reveal": "never"
},
"problemMatcher": []
}
]
}
如果是macOS系统，需要把command改成open，args保持不变：
{
"version": "2.0.0",
"tasks": [
{
"label": "open html in browser",
"type": "shell",
"command": "open",
"args": [
"${file}"
],
"group": {
"kind": "build",
"isDefault": true
},
"presentation": {
"reveal": "never"
},
"problemMatcher": []
}
]
}
2. 绑定任务快捷键
打开键盘快捷方式面板，搜索Run Task，找到Tasks: Run Task命令，绑定你想要的快捷键，比如Ctrl+Alt+B，之后按下该快捷键，选择open html in browser任务，就能直接用默认浏览器打开当前html文件。
三、不同场景下的使用技巧
- 如果是开发静态html页面，优先使用Live Server扩展，自动刷新功能能大幅提升开发效率
- 如果只需要偶尔预览简单html文件，自定义任务的方式更轻量，不需要安装额外扩展
- 可以在键盘快捷方式面板中搜索html相关命令，查看是否有其他扩展提供的快捷键，根据自己的使用习惯调整
- 如果快捷键冲突，在键盘快捷方式面板中找到对应命令，修改成其他未占用的组合即可
通过上述几种方式，开发者可以根据自己的需求设置vscode运行html的快捷键，适配不同的开发场景，提升日常开发的效率。