首先保存文件为.html格式,再通过浏览器或Live Server插件打开预览;推荐安装Live Server实现本地服务器运行与实时刷新,提升开发体验。

在 VS Code 上运行 HTML 文件并不需要复杂的配置,只需几个简单步骤即可预览页面效果。VS Code 本身是一个代码编辑器,不直接运行 HTML,但可以通过浏览器或插件快速打开和查看。
1. 准备工作:安装 VS Code 和浏览器
确保你已经安装了:
- 最新版 Visual Studio Code
- 任意现代浏览器(如 Chrome、Edge、Firefox)
2. 创建并保存 HTML 文件
打开 VS Code,新建一个文件:
- 点击“文件” → “新建文件”
- 输入基础 HTML 代码,例如:
Hello, VS Code!
- 点击“文件” → “另存为”,将文件保存为 index.html(注意后缀必须是 .html)
3. 使用浏览器打开 HTML 文件
最简单的方法是直接用浏览器打开文件:
立即学习“前端免费学习笔记(深入)”;
- 在 VS Code 中右键编辑器空白处
- 选择“在浏览器中打开”(如果没有该选项,请看下一步)
- 或者手动进入文件所在文件夹,双击 .html 文件用默认浏览器打开
4. 安装 Live Server 插件(推荐)
Live Server 可以启动本地服务器并支持实时刷新,开发更方便。
- 在 VS Code 左侧点击扩展图标(四个方块)
- 搜索 Live Server,由 Ritwick Dey 开发的插件
- 点击“安装”
- 安装完成后,右下角会出现“Go Live”按钮
- 点击“Go Live”,浏览器会自动打开并显示你的 HTML 页面
- 修改代码保存后,页面会自动刷新
5. 关闭服务器
使用完后,可点击右下角“Port: 5500”旁的关闭图标,停止本地服务。
基本上就这些。只要保存为 .html 文件,再通过浏览器或 Live Server 打开,就能看到效果。不复杂但容易忽略的是文件后缀和插件的使用。开启 Live Server 后,开发体验会大幅提升。










