必备VSCode插件联动浏览器即时更新-VSCode-PHP中文网

live server 不是热更新（hmr），仅支持全页重载；修改后无反应需确认：地址为 http:// 开头、html 正确引用修改文件、已强制清缓存。

必备vscode插件联动浏览器即时更新

Live Server 是目前最直接、零配置就能让 HTML/CSS/JS 修改后自动刷新浏览器的方案，但它不是热更新（HMR），每次都是全页重载；真要保留 JS 状态或局部样式注入，得换 Vite/Webpack。

常见现象：点了 Go Live，地址变成 http://127.0.0.1:5500/，但改了 style.css 或 script.js 保存后页面毫无反应。

浏览器地址必须是 http:// 开头——file:/// 是双击打开的本地文件，Live Server 完全不监听
index.html 里引用的路径要和你实际修改的文件路径严格一致，比如写了 <link rel="stylesheet" href="css/main.css">，就得去改 css/main.css，而不是 src/css/main.css
浏览器缓存可能拦住了新资源：Windows/Linux 按 Ctrl+Shift+R 强刷，macOS 按 Cmd+Shift+R；或者打开 DevTools → Network → 勾选 Disable cache

Live Server 只响应最终被 HTML 直接引入的产物文件（如 style.css、bundle.js），它不参与编译过程。

VSCode

避免常见的 VSCode 错误——设置冲突、调试器配置和扩展冲突。

下载

改了 main.scss 没反应？装 Live Sass Compiler 插件，让它把 .scss 编译成 .css，Live Server 才会触发刷新
用了 type="module" 加载 JS？确保 VS Code 已保存该文件，且 Live Server 版本 ≥ 5.7.9（旧版可能返回 text/plain MIME 类型导致模块加载失败）
项目本身在跑 vite dev 或 npm start？直接关掉 Live Server——它的端口和刷新逻辑会冲突

默认情况下，Live Server 以你右键点击的 HTML 文件为入口，不会“记住”上次编辑的是哪个文件。跨文件开发时容易误判刷新目标。

想始终以 src/index.html 为入口？在项目根目录建 .vscode/settings.json，写入：
```
{"liveServer.settings.file": "src/index.html"}
```
所有 HTML 都放在 src/ 下？加这一行：
```
"liveServer.settings.root": "./src"
```
端口被占（比如 5500 已被占用）？换一个：
```
"liveServer.settings.port": 3000
```

不想每次手动清缓存？加忽略规则：

"liveServer.settings.ignoreFiles": ["**/*.scss", ".vscode/**"]

它完全依赖文件系统层面的 save 事件，和你在哪个 tab、有没有聚焦编辑器、光标在哪都无关。