作为前端开发者，在 Visual Studio Code 中编写 HTML 代码后，如何快速预览和运行这些文件是一个基本需求。本文将详细介绍几种在 VSCode 中运行 HTML 文件的方法，帮助你提高开发效率。
方法一：直接在浏览器中打开
创建 HTML 文件
首先在 VSCode 中创建一个新的 HTML 文件：
- 打开 VSCode
- 按
Ctrl + N（Windows/Linux）或Cmd + N（Mac）创建新文件 - 按
Ctrl + S（Windows/Linux）或Cmd + S（Mac）保存文件 - 将文件命名为
index.html（或任何以.html结尾的名称）
编写基础 HTML 代码
在文件中输入以下基础 HTML 代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的第一个网页</title>
</head>
<body>
<h1>Hello World!</h1>
<p>这是我的第一个 HTML 页面。</p>
</body>
</html>
在浏览器中打开
有以下几种方式可以在浏览器中打开 HTML 文件：
方式 1：右键菜单
- 在文件资源管理器中右键点击 HTML 文件
- 选择"在默认浏览器中打开"或"Open with Browser"
方式 2：文件路径
- 复制 HTML 文件的完整路径
- 在浏览器地址栏中输入
file://+ 文件路径 - 按回车键打开
方式 3：拖拽
直接将 HTML 文件拖拽到浏览器窗口中
方法二：使用 Live Server 扩展（推荐）
Live Server 是最受欢迎的 VSCode 扩展之一，它可以创建一个本地开发服务器，支持实时重载功能。
安装 Live Server 扩展
- 打开 VSCode
- 点击左侧活动栏的扩展图标（或按
Ctrl + Shift + X） - 在搜索框中输入"Live Server"
- 找到由 Ritwick Dey 开发的 Live Server 扩展
- 点击"安装"按钮
使用 Live Server
安装完成后，有多种方式启动 Live Server：
方式 1：右键菜单
- 在 VSCode 中打开你的 HTML 文件
- 右键点击编辑器中的代码
- 选择"Open with Live Server"
方式 2：状态栏
- 打开 HTML 文件后，查看 VSCode 底部状态栏
- 点击"Go Live"按钮
方式 3：命令面板
- 按
Ctrl + Shift + P（Windows/Linux）或Cmd + Shift + P（Mac） - 输入"Live Server: Open with Live Server"
- 按回车键执行
对于日常开发，强烈推荐使用 Live Server，因为它提供了实时重载、本地服务器等重要功能，能够显著提高开发效率。
开发必备：API 全流程管理神器 Apifox
介绍完上文的内容，我想额外介绍一个对开发者同样重要的效率工具 —— Apifox。作为一个集 API 文档、API 调试、API 设计、API 测试、API Mock、自动化测试等功能于一体的 API 管理工具，Apifox 可以说是开发者提升效率的必备工具之一。
如果你正在开发项目需要进行接口调试，不妨试试 Apifox。注册过程非常简单，你可以直接在这里注册使用。
注册成功后可以先看看官方提供的示例项目，这些案例都是经过精心设计的，能帮助你快速了解 Apifox 的主要功能。
使用 Apifox 的一大优势是它完全兼容 Postman 和 Swagger 数据格式，如果你之前使用过这些工具，数据导入会非常方便。而且它的界面设计非常友好，即使是第一次接触的新手也能很快上手，快去试试吧！
