使用Live Server扩展可在VSCode中高效预览多个HTML文件。安装后右键文件选择“Open with Live Server”，浏览器通过同一本地服务（如http://127.0.0.1:5500）不同路径加载各页面，支持自动刷新与多标签对比，结合多窗口布局可实时同步查看效果。
在 VSCode 中运行多个 HTML 文件，并不是通过编辑器本身直接“运行”，而是借助扩展或外部工具来实现。VSCode 本身只是一个代码编辑器，不内置浏览器功能，但可以通过一些高效的操作技巧快速预览多个 HTML 页面。
使用 Live Server 扩展同时打开多个 HTML 文件
Live Server 是 VSCode 最常用的扩展之一，能快速启动本地服务器并实时预览 HTML 页面。
操作步骤：- 安装 “Live Server” 扩展：在扩展市场搜索 Live Server 并安装。
- 右键第一个 HTML 文件，选择 Open with Live Server，它会在默认浏览器中打开该页面。
- 切换到另一个 HTML 文件，同样右键选择 Open with Live Server，它会以新标签页形式打开。
Live Server 启动后会监听整个项目目录，因此多个 HTML 文件可以共用同一个本地服务（如 http://127.0.0.1:5500），只需访问不同路径即可。
批量打开多个 HTML 页面的技巧
如果你需要同时查看多个页面，可以结合浏览器和 VSCode 快捷操作提高效率。
立即学习“前端免费学习笔记（深入）”；
- 在资源管理器中，依次双击多个 HTML 文件，让它们都在编辑区打开。
- 对每个文件右键选择 Open with Live Server，浏览器会为每个页面开启独立标签页。
- 也可以复制各个页面的本地 URL（例如：http://127.0.0.1:5500/page1.html、http://127.0.0.1:5500/page2.html），粘贴到不同标签页中手动打开。
设置默认浏览器和自动刷新
Live Server 支持配置默认浏览器和自动刷新，提升多页面调试体验。
设置方法：- 进入 VSCode 设置（Ctrl + ,）。
- 搜索 Live Server > Settings: Port 可指定端口。
- 找到 Live Server > Settings: Don't Show Info Message，勾选后减少提示干扰。
- 确保 File: Auto Save 开启，保存时页面自动刷新。
小技巧：使用多窗口对比页面效果
如果想同时对比两个 HTML 页面的显示效果：
- 在 VSCode 中将编辑器布局拆分为左右两栏（点击右上角的“拆分编辑器”图标）。
- 分别在两边打开不同的 HTML 文件。
- 为每个文件启动 Live Server，浏览器中同步查看渲染效果。
基本上就这些。Live Server 配合合理的文件组织，就能轻松实现多个 HTML 页面的同时预览与联动调试，不需要复杂配置。关键是把开发环境搭好，让每次修改都能即时看到结果。
