vscode vue开发卡顿的根源是volar与ts服务冲突及node_modules反复扫描，解决需配置watcherexclude、禁用内置ts服务并收紧tsconfig。
VSCode 本身不编译 Vue 代码——卡在“编译缓慢”其实是语言服务、文件监视和扩展叠加阻塞的结果，核心矛盾是 node_modules 被反复扫描 + Volar 与内置 TS 服务冲突。
为什么 Vue 文件打开/保存/补全都慢，甚至要 reload window？
这不是 Vue 编译器（Vite / Vue CLI）慢，而是 VSCode 的语言支持层在反复做三件事：Volar 启动时加载整个 node_modules 下的类型声明、TypeScript Server 同时也在扫描相同路径、files.watcher 对 node_modules 里数万个小文件持续发变更事件。三者一叠加，CPU 占满，编辑器就“冻住”。
常见现象包括：
- 输入
ref(后等 2–3 秒才弹出提示 - 保存
.vue文件后，错误红线延迟出现或根本不出现 - 点击跳转定义（F12）卡顿，甚至跳到
node_modules/vue源码里出不来 - 终端里
npm run dev启动快，但 VSCode 自带终端输入命令也延迟
必须在工作区级配置 files.watcherExclude
全局设置无效，且容易误伤其他项目。只对当前 Vue 项目生效的写法是：
"files.watcherExclude": {
"**/node_modules/**": true,
"**/dist/**": true,
"**/build/**": true,
"**/.git/**": true,
"**/__pycache__/**": true,
"**/logs/**": true
}
注意：
- 路径必须用双星号
**/，不是node_modules/—— 否则子目录仍被监听 - 改完后必须关闭并重新打开该工作区（不是 reload window），否则不生效
- 如果你用
pnpm，额外加"**/node_modules/.pnpm/**": true，它内部嵌套更深 - Windows + WSL2 用户，务必再加
"**/mnt/**": true，跨系统路径监听会引发严重延迟
禁用内置 TS 服务，强制 Volar Takeover 模式
VSCode 默认同时启用 TypeScript and JavaScript Language Features（@builtin）和 Volar，两者对同一份 .vue 和 .ts 文件争抢控制权，导致 AST 解析重复、内存暴涨、补全错乱。
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
操作步骤：
- 按
Ctrl+Shift+P→ 输入built→ 选中Extensions: Show Built-in Extensions - 搜索
typescript（保留 @builtin 前缀）→ 找到TypeScript and JavaScript Language Features - 点击右下角齿轮 →
Disable (Workspace) - 重启窗口（
Developer: Reload Window）
验证是否生效：打开一个 .vue 文件，状态栏右下角应显示 Volar，而不是 TypeScript 或 Vue。
Volar 启动仍慢？检查 types 引入路径
即使开了 Takeover，如果 tsconfig.json 里写了宽泛的 "include": ["**/*"] 或引用了 node_modules/@types/xxxx 中体积巨大的类型包（如 @types/node + @types/react 混用），Volar 初始化时仍会同步解析所有内容。
建议收紧：
- 把
tsconfig.json的include改为明确路径："include": ["src/**/*", "types/**/*"] - 移除没用到的
types字段，比如"types": ["vite/client", "vue/macros"]就够，别加"node" - 确认
volar.config.json（如有）没开启"experimental.enableTsPlugin"这类高开销实验功能
最后提醒一句：禁用 ESLint 扩展的全局校验、关掉 Prettier 的 formatOnSave、卸载 Auto Import —— 这些扩展在 Vue 大项目里，比你想象中更早开始拖后腿。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
