首先安装VSCode并添加Live Server插件，然后创建index.html文件，通过右键“Open with Live Server”或点击状态栏“Go Live”启动本地服务器，浏览器将自动打开预览页面并支持实时刷新。
VSCode 本身是一个代码编辑器，不自带浏览器运行环境，但可以通过插件和设置快速预览 HTML 文件。以下是配置 HTML 运行环境的详细流程，让你在 VSCode 中轻松打开和调试 HTML 页面。
1. 安装 VSCode 并配置基础环境
确保你已经安装最新版的 Visual Studio Code。如果没有，请前往官网下载并安装：
https://code.visualstudio.com/安装完成后，打开软件，准备下一步。
2. 安装 Live Server 插件（推荐方式）
Live Server 是最常用的插件，可以一键启动本地服务器并实时预览 HTML 页面。
立即学习“前端免费学习笔记（深入）”；
安装步骤：- 点击左侧活动栏的扩展图标（或按 Ctrl+Shift+X）
- 搜索 Live Server
- 找到由 Ritwick Dey 开发的 "Live Server" 插件
- 点击“安装”
安装完成后无需额外配置，插件会自动集成到右键菜单中。
3. 创建并打开 HTML 文件
新建一个文件夹作为项目目录，例如：my-website。
- 在该文件夹中创建一个文件，命名为 index.html
- 用 VSCode 打开此文件夹（File → Open Folder）
- 输入以下基础代码测试：
测试页面 Hello, VSCode!
4. 使用 Live Server 运行 HTML
保存文件后，有以下几种方式启动预览：
- 右键编辑器中的 HTML 文件，选择 Open with Live Server
- 点击 VSCode 右下角状态栏的 Go Live 按钮
- 使用快捷键 Alt+L 然后按 Alt+O（部分版本支持）
浏览器将自动打开，地址通常是 http://127.0.0.1:5500，并显示你的页面内容。
当你修改代码并保存时，页面会自动刷新，实现热更新效果。
5. 常见问题与优化设置
如果遇到问题，可参考以下建议：
-
端口冲突：Live Server 默认使用 5500 端口。可在设置中修改：
文件 → 首选项 → 设置 → 搜索 "Live Server: Settings" → 修改端口号 - 默认浏览器：Live Server 通常调用系统默认浏览器，如需指定，可在设置中配置 "Live Server > Settings: Custom Browser"
- 自动打开浏览器：确保设置中启用了 "Live Server > Settings: Open Browser" 选项
基本上就这些。不需要复杂配置，Live Server 让 HTML 开发变得非常高效。
