VS Code 本身不提供热更新，真正起作用的是 Vite 或 Vue CLI 开发服务器；需确保其监听文件变更、启用 Volar Take Over Mode、正确配置 source map 路径映射，并修复 console.error 以维持 HMR 正常工作。
VS Code 本身不提供热更新（HMR），它只是编辑器；真正起作用的是 Vite 或 Vue CLI 启动的开发服务器。你配置 VS Code 的目标，是让它不干扰 HMR、能正确识别变更、并配合调试流程。
为什么改了代码浏览器没刷新？先看终端日志
热更新是否生效，第一判断依据不是浏览器画面，而是终端输出。启动项目后（npm run dev 或 npm run serve），每次保存文件，你应该看到类似：
[vite] hot updated: /src/components/HelloWorld.vue
或
Compiled successfully in XXXms
如果没这行日志，说明开发服务器根本没监听到变更——这时候和 VS Code 无关，要检查：
立即学习“前端免费学习笔记（深入）”；
- 项目是否真的在运行（
ps aux | grep node或任务管理器确认进程） - 保存的文件是否在开发服务器监听路径内（比如误改了
dist/或node_modules/下的文件） - VS Code 是否启用了“自动保存”：设置里搜
files.autoSave，选onFocusChange或afterDelay，别用off
Volar 必须启用 Take Over Mode
Vue 3 + TS 项目中，Volar 不只是语法高亮插件，它接管 TypeScript 语言服务才能让 setup() 内的 ref、defineProps 等有类型推导。如果没开 Take Over Mode，TS 报错会卡住 HMR（比如 Property 'xxx' does not exist on type '...' ），导致模块无法热更新，只能手动刷新。
操作路径：Settings → Extensions → Volar → Enable Take Over Mode，勾选后必须重启 VS Code 窗口。
顺带检查：Settings → Extensions → Vetur，确保已禁用——Vetur 和 Volar 冲突，启用后者时前者必须关掉。
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
launch.json 中 webRoot 和 sourceMapPathOverrides 别写错
调试时断点灰色不可命中，90% 是因为 source map 路径映射失败。Vite 默认生成 webpack:/// 前缀的 sourcemap，但实际源码在磁盘上，需要显式告诉 Debugger 怎么对应。
webRoot 必须设为 ${workspaceFolder}（整个项目根目录），不是 ${workspaceFolder}/src —— 后者会导致 src 外的文件（如 vite.config.ts）断点失效。
sourceMapPathOverrides 推荐用这个最小有效配置：
{
"webpack:///src/*": "${webRoot}/src/*",
"webpack:///./src/*": "${webRoot}/src/*"
}
不要照搬网上那些冗长的映射表，多一条反而容易冲突。Vite 项目基本不需要额外改 vue.config.js 或 vite.config.ts，默认就开 sourcemap。
console.error 会中断 HMR，这不是 bug 是机制
这是最容易被误解的一点：HMR 不是“重载页面”，而是尝试局部替换模块。一旦组件 setup() 函数执行时报错（比如访问了 undefined 的属性），该模块会被从 HMR 队列中移除，后续修改再也不会触发热更新，直到你手动刷新。
所以当你发现“改了代码没反应”，先看浏览器控制台有没有红色 console.error —— 尤其注意 Uncaught TypeError 和 Cannot read property 'xxx' of undefined 这类错误。修复它，HMR 自动恢复。
这不是 VS Code 的问题，也不是构建工具的缺陷，而是 HMR 的设计约束：它只对“可安全替换”的模块生效。
