在VSC中开发HTML项目时，完成文件编写后运行查看效果是必不可少的操作，不同的运行方式适用于不同的开发场景，下面为大家介绍几种常用的运行方法。
方法一：安装Live Server插件运行
Live Server是VSC中最常用的HTML运行插件，支持热更新，修改代码后浏览器会自动刷新，非常适合前端开发。
操作步骤
- 打开VSC，点击左侧扩展图标，搜索Live Server，点击安装按钮完成插件安装。
- 在VSC中新建HTML文件，编写基础HTML代码，保存文件到本地文件夹。
- 右键点击HTML文件编辑区域，选择Open with Live Server选项，浏览器会自动打开该文件并展示内容。
如果右键菜单没有该选项，也可以点击VSC底部状态栏的Go Live按钮，同样可以启动服务运行HTML文件。
示例代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>VSC运行HTML测试</title>
</head>
<body>
<h1>这是通过Live Server运行的HTML页面</h1>
<p>修改内容后浏览器会自动刷新</p>
</body>
</html>
方法二：直接通过浏览器打开文件
如果不想安装插件，也可以直接将HTML文件在浏览器中打开，这种方式没有热更新功能，适合简单静态页面查看。
操作步骤
- 在VSC中完成HTML文件编写后，右键点击文件标签，选择复制路径选项，获取文件的本地绝对路径。
- 打开任意浏览器，将复制的路径粘贴到地址栏中，按下回车键即可查看页面效果。
- 也可以在文件资源管理器中找到该HTML文件，直接双击文件，系统会默认用浏览器打开。
方法三：配置VSC调试环境运行
如果需要调试HTML中的JavaScript代码，可以配置VSC的调试环境，直接在编辑器内运行和调试。
操作步骤
- 点击VSC左侧调试图标，点击创建launch.json文件按钮。
- 在弹出的环境选择框中选择Chrome，VSC会自动生成调试配置文件。
- 修改配置文件中的url字段为本地HTML文件的路径，或者配置runtimeArgs指定打开的文件路径。
- 点击调试启动按钮，VSC会打开Chrome浏览器并加载HTML文件，同时可以在编辑器内设置断点调试代码。
配置调试环境的示例launch.json代码如下：
{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "打开HTML文件",
"file": "${workspaceFolder}/index.html"
}
]
}
不同方法对比
下面是三种运行方式的特性对比，你可以根据自己的需求选择合适的方法：
| 运行方式 | 热更新 | 调试支持 | 适用场景 |
|---|---|---|---|
| Live Server插件 | 支持 | 基础支持 | 日常前端开发，需要频繁修改查看效果 |
| 浏览器直接打开 | 不支持 | 不支持 | 简单静态页面快速查看，无需额外配置 |
| 调试环境配置 | 不支持 | 完整支持 | 需要调试JavaScript代码的场景 |
需要注意的是，如果HTML文件中引用了本地其他资源文件，使用Live Server运行时，路径需要相对于项目根目录，而直接打开文件时路径需要相对于当前HTML文件的位置，避免出现资源加载失败的问题。