在vscode中运行HTML文件是前端开发的基础操作，不需要复杂的配置就能快速实现页面预览，适合新手快速验证代码效果。完成基础设置后，你可以随时修改代码并实时查看页面变化，大幅提升开发效率。
运行前的准备工作
首先需要确保你的电脑已经安装了vscode和浏览器，浏览器可以选择Chrome、Edge等主流浏览器。如果还没有安装vscode，可以先到官方渠道下载安装包完成安装，安装过程按照默认提示操作即可。
安装Live Server插件
Live Server是vscode中运行HTML最常用的插件，支持热更新，修改代码后页面会自动刷新，不需要手动刷新浏览器。安装步骤如下：
- 打开vscode，点击左侧边栏的扩展图标，也就是四个小方块组成的图标
- 在搜索框中输入Live Server，找到对应的插件
- 点击安装按钮，等待安装完成即可
通过Live Server运行HTML的步骤
安装完插件后，就可以用Live Server运行HTML文件了，具体操作如下：
- 在vscode中打开你的HTML文件所在的文件夹，点击文件菜单选择打开文件夹，选中目标文件夹
- 在左侧资源管理器中找到你要运行的HTML文件，点击打开该文件
- 右键点击编辑区的空白处，在弹出的菜单中选择Open with Live Server选项
- 此时会自动打开默认浏览器，显示当前HTML文件的页面内容
如果你修改了HTML文件的内容，保存后浏览器会自动刷新，实时展示最新的页面效果，不需要手动操作。
其他运行HTML的方式
直接浏览器打开
如果没有安装Live Server插件，也可以直接通过浏览器打开HTML文件：
- 在vscode的资源管理器中找到目标HTML文件，右键点击选择复制路径
- 打开浏览器，将复制的路径粘贴到地址栏中，按下回车键即可打开页面
这种方式修改代码后需要手动刷新浏览器才能看到效果，适合临时查看简单页面。
使用内置终端运行
你还可以通过vscode的内置终端运行HTML文件，步骤如下：
# 打开vscode内置终端，快捷键是Ctrl+` # 如果是Windows系统，输入以下命令打开默认浏览器 start index.html # 如果是Mac系统，输入以下命令 open index.html
常见问题解决
如果点击Open with Live Server没有反应，可以检查是否打开了文件夹，Live Server需要基于文件夹运行，不能直接打开单个HTML文件。如果页面没有自动刷新，可以检查是否保存了修改的文件，Live Server只会在文件保存后触发更新。
另外如果端口被占用，Live Server会自动切换端口，你可以在浏览器地址栏看到当前的端口号，不需要手动修改配置。