安装Live Server插件可实现HTML文件在浏览器中实时预览，编辑保存后自动刷新；2. 通过右键选择Open with Live Server即可启动本地服务器并打开页面；3. 可在设置中指定默认浏览器如chrome；4. 无需插件时可通过复制文件路径手动在浏览器打开。推荐使用Live Server提升开发效率。
在 VSCode 中运行 HTML 文件并联动浏览器，其实不需要复杂的配置。VSCode 本身不内置浏览器，但可以通过插件和快捷方式实现一键在浏览器中打开 HTML 文件。以下是具体设置方法。
1. 安装常用插件：Live Server
最简单的方式是使用 Live Server 插件，它能启动本地服务器并在浏览器中实时预览 HTML 页面。
操作步骤：- 打开 VSCode，点击左侧活动栏的扩展图标（或按 Ctrl+Shift+X）
- 搜索 Live Server，选择由 Ritwick Dey 开发的版本，点击安装
- 安装完成后无需额外配置，重启 VSCode 也不会影响功能
2. 使用 Live Server 运行 HTML 文件
安装插件后，可以快速在浏览器中打开当前 HTML 文件。
操作方法：- 打开一个 HTML 文件
- 右键点击编辑器中的代码，选择 Open with Live Server
- 浏览器会自动打开，地址类似 http://127.0.0.1:5500/
- 修改代码保存后，页面会自动刷新，实现热更新
3. 设置默认浏览器（可选）
Live Server 默认使用系统默认浏览器，如果你想指定其他浏览器（如 Chrome），可以进行设置。
立即学习“前端免费学习笔记（深入）”；
设置方式：- 打开 VSCode 设置（Ctrl+,）
- 搜索 Live Server > Settings: Browser
- 在输入框中填写浏览器名称，例如：chrome 或完整路径
- 支持的常见值：firefox、edge、chrome
4. 手动配置快捷方式（无需插件）
如果你不想用插件，也可以通过 VSCode 的任务或快捷键直接打开文件。
方法如下：- 右键 HTML 文件，在资源管理器中选择 Copy Path
- 粘贴到浏览器地址栏，前面加 file:/// 即可访问
- 或者拖动文件到浏览器标签页中打开
