Live Server是唯一开箱即用、无需构建工具的HTML/CSS/JS实时预览插件，因其启动本地HTTP服务并注入WebSocket实现保存即刷新，而file://协议不支持自动刷新与跨域请求。
用 Live Server 插件就能直接实现，不用配构建工具、不依赖 webpack，改完 HTML/CSS/JS 保存即刷新——但前提是它得跑在 http:// 协议下，不能双击打开 file:// 地址。
为什么选 Live Server 而不是其他名字带 “live” 的插件
VSCode 扩展市场里叫 “live” 的插件不少，但真正开箱即用、独立运行、无需额外配置的只有 Live Server（作者 Ritwick Dey）。其他几个常见混淆项：
-
Live Reload：本身不启动服务器，必须配合 Gulp/Webpack 等工具链使用 -
Live Preview：微软官方实验性插件，只渲染 HTML 静态结构，不监听文件变化，也不支持 CSS/JS 自动重载 -
Browser Sync：功能强但需命令行初始化，还要全局安装 npm 包，对纯静态页属于过度配置
如果你只是写个 index.html + style.css + script.js，Live Server 是唯一合理选择。
右键启动失败？检查这三件事
点右键 → Open with Live Server 没反应，或浏览器打不开，大概率是以下某个环节卡住了：
- 文件没保存：必须是已保存的
.html文件，未保存的临时标签页不被识别 - 没在工作区打开文件夹：只拖入单个 HTML 文件到 VSCode，
Live Server无法确定根路径，会静默失败；应通过File → Open Folder加载整个项目目录 - 端口被占用：默认端口
5500若被其他程序（如另一个 Live Server 实例、Python 的 SimpleHTTPServer）占着，插件会自动换端口但不提示；可手动在.vscode/settings.json中指定：{ "liveServer.settings.port": 8080 }
修改后不刷新？多半是缓存或路径问题
页面没变，但代码明明改了、也保存了——先别怀疑插件，看这几个地方：
- 浏览器 DevTools 的
Network选项卡是否勾选了Disable cache（尤其在调试 CSS 时，浏览器常缓存样式表） - 引用的 CSS/JS 是否用了相对路径？比如
<link rel="stylesheet" href="css/style.css">，如果当前 HTML 不在根目录，路径会错，修改后自然不生效 - 是否在 iframe 或子页面里改代码？
Live Server只监听当前激活 HTML 文件及其同级或子目录下的资源，跨目录引用（如../assets/main.js）可能不触发重载
真正容易被忽略的点是：它只监听“被服务托管的路径下的文件”。你把 index.html 放在 /project 下，用 Live Server 启动，那它只管 /project/** 里的变更。如果 JS 文件实际放在 /other-folder/，改了也不会刷——这不是 bug，是设计使然。
