VS Code是一款轻量但功能强大的代码编辑器，不过它本质上只是编辑器，本身并不内置浏览器渲染能力，所以想让HTML代码跑起来看到实际效果，需要借助一些额外的手段。很多人第一次用VS Code写完HTML后，双击运行却发现没反应，或者不知道点哪里才能预览页面，这篇文章就把几种最常用的运行方式讲清楚，你可以根据自己的使用习惯挑一种顺手的。
方法一：使用Live Server插件（最推荐）
Live Server是VS Code生态中最流行的HTML预览插件之一，它的核心原理是在本地启动一个小型HTTP服务器，通常是5500端口，然后在浏览器中打开一个本地地址，比如http://127.0.0.1:5500。相比直接双击文件打开，它最大的好处是支持热刷新：你在VS Code里按Ctrl+S保存代码，浏览器页面会自动刷新，不用手动切换窗口再按F5，调试效率提升非常明显。
安装步骤很简单：点击左侧活动栏的扩展图标（四个方块组成的图案），或者直接按Ctrl+Shift+X打开扩展面板，在搜索框输入Live Server，找到作者是Ritwick Dey的那个插件，点击Install安装。装完之后重新加载窗口，插件就生效了。
使用时也有两种方式：第一种是在HTML文件上右键，选择Open with Live Server；第二种是看VS Code底部状态栏，右下角会出现一个Go Live的按钮，点击它就会启动服务器并自动打开默认浏览器。需要注意的是，这种方式打开的是整个工作目录，如果你在VS Code里打开的是一个项目文件夹，插件会根据你当前编辑的文件来定位访问路径。
方法二：使用Open in Browser或View In Browser插件
如果你的需求很简单，只是想把HTML文件用浏览器打开看看，不想启动本地服务器，那可以考虑Open in Browser这类轻量插件。它的功能比较单一：安装后，在编辑器中打开HTML文件，右键菜单会多出两个选项，分别是Open in Default Browser和Open in Other Browser，快捷键分别是Alt+B和Shift+Alt+B。
这种方式本质上和你手动去文件夹里双击HTML文件是一样的，浏览器通过file://协议读取本地文件。优点是不占端口、配置为零、随开随用；缺点是每次改完代码都要手动刷新页面，而且某些依赖HTTP环境的特性会失效，比如使用fetch加载本地JSON文件时，出于浏览器安全策略会被拦截，这种情况下就必须换用Live Server。
还有一个容易踩的坑要提醒一下：如果你的HTML文件里引用了外部的CSS或JS文件，记得确认路径写对了。使用相对路径时，要看清文件相对于HTML文件的位置关系，比如./css/style.css和css/style.css在多数场景下等价，但如果写成了绝对盘符路径（比如C:\project\css\style.css），换台电脑或者部署到服务器后就会失效，这是新手常见问题。
方法三：不用插件，手动用浏览器打开
不装任何插件其实也能运行HTML代码。最直接的做法是找到HTML文件所在的文件夹，双击文件，系统会用默认浏览器打开。或者先打开浏览器，把文件直接拖进浏览器窗口里，效果一样。
另一种做法是利用VS Code自带的命令面板。按Ctrl+Shift+P调出命令面板，虽然VS Code默认没有内置的浏览器打开命令，但你可以配置任务来调用系统命令。以Windows为例，可以在项目下的.vscode/tasks.json中这样配置：
{
"version": "2.0.0",
"tasks": [
{
"label": "在Chrome中打开",
"type": "process",
"command": "C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe",
"args": ["${file}"],
"problemMatcher": []
}
]
}
配置好之后，在命令面板里执行任务，或者绑定一个快捷键，就能把当前编辑的HTML文件交给Chrome打开了。这种方式适合喜欢折腾配置、希望完全掌控工具链的用户。注意上面配置中的路径是双反斜杠形式C:\\Program Files\\...，这是JSON转义的写法，别写成了单反斜杠导致任务执行失败。
几种方法对比与选择建议
把上面的方案放在一起对比一下，方便你做选择：
| 方式 | 是否需要插件 | 自动刷新 | 支持HTTP环境 | 适合场景 |
|---|---|---|---|---|
| Live Server | 是 | 支持 | 支持 | 日常开发、调试页面 |
| Open in Browser | 是 | 不支持 | 不支持 | 快速查看静态页面 |
| 手动双击打开 | 否 | 不支持 | 不支持 | 临时查看、零配置 |
| tasks.json自定义任务 | 否 | 不支持 | 不支持 | 追求定制化的用户 |
综合来看，如果你经常写前端页面，Live Server几乎是不二之选，热刷新带来的体验提升是实打实的；如果只是偶尔看一眼页面效果，右键用默认浏览器打开就够了，没必要多装插件。
另外补充一点，如果你的项目是一个完整的Web工程（包含构建工具、模块化代码等），单纯的静态打开方式基本跑不起来，这时候应该按照项目说明执行对应的启动命令，比如用npm scripts启动开发服务器。本文介绍的方法主要针对原生的HTML、CSS、JavaScript文件，也就是不依赖构建流程的静态页面。掌握这几招之后，在VS Code里写完页面随手就能看到效果，工作流会顺畅很多。
VS Code运行HTMLvscode html插件Live Server使用修改时间：2026-09-04 02:02:42