Live Server是VSCode中唯一开箱即用、无需构建工具即可实现实时刷新的插件，由Ritwick Dey开发，安装后状态栏显示“Go Live”按钮，支持HTTP协议下的自动刷新，不兼容file://协议，且仅响应手动保存动作。
直接用 Live Server 插件，它是目前 VSCode 中唯一开箱即用、无需额外构建工具就能实现实时刷新的方案。其他名字带 “live” 的插件要么功能残缺（比如 Live Preview 不支持自动刷新），要么依赖外部配置（比如 Live Reload 必须配 gulp 或浏览器插件），容易白忙活。
怎么装对插件：认准 Ritwick Dey 开发的 Live Server
VSCode 扩展市场里搜 “Live Server”，结果列表第一个、作者是 Ritwick Dey、图标为绿色服务器的那个才是正主。别点错名字相近的：Live Reload、Live Preview、Live Code 都不能单独完成实时刷新。
- 安装后状态栏右下角会出现
Go Live按钮，没出现说明装错了或没生效 - 如果右键 HTML 文件没看到
Open with Live Server选项，大概率是插件未正确加载，重启 VSCode 再试一次 - 不建议同时装多个“live”类插件，它们会互相干扰端口监听或浏览器唤起逻辑
为什么改完代码不自动刷新？检查这三点
常见现象是点了 Go Live，浏览器打开了，但保存 HTML/CSS/JS 后页面没反应——不是插件坏了，而是环境没跑在 HTTP 协议下。
- 确保你是在**项目文件夹内**打开的 VSCode（即工作区是一个目录，不是单个 HTML 文件）。单文件模式下
Live Server无法启动本地服务 - 确认你打开的是
http://localhost:5500（或你自定义的端口）地址，而不是file:///路径。后者无法触发自动刷新 - 检查终端有没有报错
Port 5500 is already in use。被占用时插件会静默失败，需手动改端口：在.vscode/settings.json里加"liveServer.settings.port": 8080
想默认用 Chrome 打开？改一个配置项就行
Live Server 默认调用系统默认浏览器，但前端开发几乎都用 Chrome 查看 DevTools 和兼容性。不用装额外插件，直接配 CustomBrowser：
{
"liveServer.settings.CustomBrowser": "chrome"
}
这个设置写进项目级 .vscode/settings.json 最稳妥；如果写用户全局设置，可能被其他项目覆盖或引发权限问题。注意大小写敏感，"chrome" 不能写成 "Chrome" 或 "CHROME"。
最常被忽略的一点：实时刷新只监听保存动作，不监听剪贴板粘贴、格式化自动保存（如 Prettier 的 format on save）、或热重载（hot reload）式的状态保持。它本质是“保存 → 发送刷新指令 → 浏览器硬刷新”，所以 JS 里的变量状态每次都会丢失——这不是 bug，是设计使然。
