Live Server是VS Code中实现HTML/CSS/JS实时刷新的首选插件，通过右键HTML文件选择“Open with Live Server”即可启动，默认监听同级目录文件变更并自动刷新浏览器；它基于真实HTTP服务器（如localhost:5500），兼容DevTools、CORS等现代前端能力，而已被弃用的Live Preview存在白屏、不触发重绘、无法调试等问题。
直接装 Live Server 插件，右键 HTML 文件选 Open with Live Server，保存即刷新——这是最稳、最省事的实时预览方式。别用 Live Preview，它在 VS Code 1.85+ 版本后已弃用，且不支持外部浏览器调试、无法监听 CSS/JS 文件变更、嵌入式预览常卡死。
为什么必须用 Live Server 而不是 Live Preview
Live Preview 是微软早期实验性插件，2024 年起逐步移出官方推荐列表；VS Code 1.85 更新后，其内核不再兼容新渲染管线，表现为：Embedded Preview 标签页白屏、CSS 修改不触发重绘、autoRefreshPreview 配置项失效。而 Live Server 基于真实 HTTP 服务器（默认端口 5500），所有静态资源走标准 HTTP 流程，兼容 Chrome DevTools、CORS、Service Worker 等现代前端能力。
- 你改
style.css，浏览器真能 reload，不是靠 iframe 模拟 - 你在
console里打location.href，返回的是http://localhost:5500/xxx.html，不是vscode-webview://... - 调试时断点能命中，网络面板能看到真实请求，不像
Live Preview的 network tab 是空的
安装后没看到 Go Live 按钮？检查这三处
状态栏不显示 Go Live，通常不是插件没装好，而是工作区或文件路径不合法：
- 确保你打开的是**文件夹**（即整个项目根目录），不是单个
.html文件：拖一个空文件夹进 VS Code，再新建index.html；单独拖index.html进来，Live Server直接拒绝服务 - 检查文件是否在子目录里：如果
index.html在src/pages/index.html，右键它也能启动，但预览地址是http://localhost:5500/src/pages/index.html，路径带前缀，容易导致相对路径引用失败 - 确认没有启用
liveServer.settings.NoBrowser：这个配置设为true会禁用自动打开浏览器，但按钮仍存在；误设后你会看到终端输出Server ready on http://...却没弹窗
保存后不刷新？优先排查文件监听范围
Live Server 默认只监听当前打开的 HTML 文件及其同级目录下的 .css、.js，不会递归扫描子目录。常见失效场景：
- 你改了
assets/js/main.js，但index.html里写的是<script src="js/main.js"></script>—— 路径错位，服务器找不到文件，自然不触发刷新 - 你启用了
liveServer.settings.root，但值填成"./src"（带点斜杠），实际应填"src"；错误配置会导致根路径解析失败，监听器静默退出 - 你在 WSL 或远程 SSH 工作区中开发，
Live Server无法监听 Linux 文件系统 inotify 事件，此时需改用liveServer.settings.useLocalIp并手动访问http://127.0.0.1:5500
真正卡住的地方，往往不是“怎么开”，而是“开在哪”——根目录选错、路径写错、监听范围没覆盖到改动文件，这三个点占了 90% 的“不刷新”问题。别急着调配置，先用 Ctrl+Shift+P → 输入 Live Server: Show Log 看控制台有没有报 File change detected，有就是监听生效，没就是路径或权限问题。
