安装并使用 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 文件并保存，浏览器都会自动刷新

设置默认浏览器（可选）

如果你希望用特定浏览器打开页面，可以配置默认浏览器：

妙刷AI

美团推出的一款新奇、好玩、荒诞的AI视觉体验工具

57

查看详情

立即学习“前端免费学习笔记（深入）”；

• 点击左下角齿轮图标进入“设置”
• 搜索 Live Server > Settings: Port 可修改端口
• 搜索 Live Server Config
• 在设置中添加类似配置：

“liveServer.settings.customBrowser”: “chrome”

支持的浏览器包括：chrome、firefox、edge 等。

常见问题与注意事项

• 确保 HTML 文件已正确保存，Live Server 监听的是文件系统变化
• 如果未自动刷新，检查是否通过 Open with Live Server 打开，而不是直接双击 HTML 文件
• 关闭 Live Server：点击 VSCode 右上角的“Go Live”按钮即可停止服务
• 项目根目录建议包含 index.html，便于自动识别入口

基本上就这些。只要装好 Live Server，点一下就能开启开发服务器和自动刷新功能，非常适合前端初学者和快速原型开发。