安装并使用 Live Server 插件可实现 VSCode 编辑 HTML 时保存后浏览器自动刷新，具体操作为：在扩展中搜索并安装 Ritwick Dey 开发的 Live Server，打开 HTML 文件后右键选择“Open with Live Server”，浏览器将通过本地服务器（如 http://127.0.0.1:5500）加载页面，后续保存修改会触发自动刷新；可通过设置指定默认浏览器如 chrome，确保文件通过 Live Server 打开而非本地双击以避免监听失效，关闭服务可点击右上角“Go Live”按钮停止。
在使用 VSCode 编辑 HTML 页面时，想要实现保存文件后浏览器自动刷新，可以借助扩展插件来完成。最常用且高效的方法是使用 Live Server 插件。它能启动一个本地开发服务器，并支持实时重载（auto-reload），让你在修改代码并保存后，浏览器自动刷新页面。
安装 Live Server 插件
这是实现自动刷新的第一步：
- 打开 VSCode，点击左侧活动栏的扩展图标（或按 Ctrl+Shift+X）
- 在搜索框中输入 Live Server
- 找到由 Ritwick Dey 开发的 Live Server 插件
- 点击“安装”按钮进行安装
使用 Live Server 启动自动刷新
安装完成后，操作非常简单：
- 打开一个 HTML 文件（例如 index.html）
- 右键点击编辑器中的 HTML 文件内容
- 选择 Open with Live Server
- 浏览器会自动打开页面，并连接到本地服务器（通常是 http://127.0.0.1:5500）
- 之后每次修改 HTML、CSS 或 JavaScript 文件并保存，浏览器都会自动刷新
设置默认浏览器（可选）
如果你希望用特定浏览器打开页面，可以配置默认浏览器：
立即学习“前端免费学习笔记（深入）”；
- 点击左下角齿轮图标进入“设置”
- 搜索 Live Server > Settings: Port 可修改端口
- 搜索 Live Server Config
- 在设置中添加类似配置：
支持的浏览器包括：chrome、firefox、edge 等。
常见问题与注意事项
- 确保 HTML 文件已正确保存，Live Server 监听的是文件系统变化
- 如果未自动刷新，检查是否通过 Open with Live Server 打开，而不是直接双击 HTML 文件
- 关闭 Live Server：点击 VSCode 右上角的“Go Live”按钮即可停止服务
- 项目根目录建议包含 index.html，便于自动识别入口
基本上就这些。只要装好 Live Server，点一下就能开启开发服务器和自动刷新功能，非常适合前端初学者和快速原型开发。
