Live Server 是 VSCode 中唯一开箱即用、无需构建流程、支持热重载的 HTML/CSS/JS 自动刷新方案；它启动本地 HTTP 服务并用 WebSocket 监控文件变更，毫秒级触发浏览器重载，而 Open in Browser 和 Live Preview 均无法满足此需求。
要实现在 VSCode 中保存 HTML/CSS/JS 后浏览器自动刷新，Live Server 是目前唯一开箱即用、无需构建流程、支持热重载的成熟方案。
为什么不是 Open in Browser 或 Live Preview
Open in Browser 只是用 file:// 协议打开本地文件，不启动 HTTP 服务 —— 这会导致跨域请求失败（比如 fetch API 调本地 JSON）、CORS 报错、Service Worker 无法注册；Live Preview 是微软实验性插件，仅支持基础 HTML 静态渲染，改完代码必须手动点“刷新”按钮，不监听文件变化。
真正能解决“改完就看到效果”这个核心诉求的，只有 Live Server：它起一个真实的 http://localhost 服务，用 WebSocket 监控文件变更，毫秒级触发浏览器重载。
安装后三秒就能用的启动方式
装好 Live Server 插件后，不用改任何配置，直接：
- 在资源管理器里右键任意
index.html文件 → 选Open with Live Server - 或点 VSCode 底部状态栏蓝色的
Go Live按钮 - 或用快捷键：
Alt+LAlt+O（Windows/Linux），Cmd+LCmd+O（macOS）
浏览器会自动打开 http://localhost:5500（默认端口），后续所有保存操作都会立即生效。
端口被占或想换路径？两个关键配置项
如果 5500 端口已被占用（常见于同时跑多个前端项目），VSCode 会报错：address already in use :::5500。这时必须手动指定端口：
- 在项目根目录建
.vscode/settings.json，写入：{"liveServer.settings.port": 3000} - 如果入口文件不是
index.html（比如叫app.html），加这一行："liveServer.settings.file": "app.html"
注意：liveServer.settings.root 一般不用设 —— 它只在多级子目录中启动特定页面时才需要，多数情况留空即可。
别忽略的兼容性细节
Live Server 默认只监控 .html、.css、.js、.json 文件，但如果你用的是 .vue 或 .jsx，它不会自动刷新 —— 因为这些文件需编译，不属于静态资源范畴。此时应交给框架自己的 dev server（如 vue-cli-service serve 或 vite dev），而不是依赖 Live Server。
另外，它不处理 CSS-in-JS 或 Shadow DOM 内部样式更新，这类场景下即使文件保存了，浏览器也可能不重绘 —— 这不是插件问题，而是浏览器渲染机制本身决定的。
