Volar 未接管 .vue 文件导致模板语法无高亮，根本原因是语言模式未设为 Vue、Take Over 模式未启用、tsconfig.json 缺失三者未同时满足；需手动切换语言模式为 Vue、启用 Take Over、确保 tsconfig.json 存在且 TypeScript 服务被 Volar 接管。

Volar 没接管 .vue 文件，模板语法就不可能高亮——装了插件不等于生效，关键在语言模式、Take Over 和 tsconfig 三者同时到位。

为什么 <template> 里 v-if、v-for 还是灰的？

这不是插件没装，而是 VSCode 根本没把 .vue 当 Vue 文件处理。右下角显示的是 HTML、Vue (Vetur) 或 Plain Text，就说明 Volar 还没启动模板解析能力。

• 点右下角语言模式 → 选 Configure File Association for '.vue' → 输入 vue 回车（注意：不是 Vue HTML，也不是 Vue (Volar)）
• 再点一次语言模式，手动切到 Vue（状态栏必须显示干净的 Vue 字样）
• 如果切换后仍无效，检查 .vscode/settings.json 是否写了 "files.associations": {"*.vue": "vue"}
• 关掉所有 .vue 标签页，重启 VSCode 窗口（不是重载）

defineProps 报红、ref 不解包，根本原因是什么？

这是 Volar 没进入 SFC（单文件组件）语言服务模式，TS 插件还在用默认逻辑解析 <script setup>，自然不认识 Vue 宏。</script>

• 禁用 VSCode 内置的 TypeScript and JavaScript Language Features（命令面板搜 built → Disable Workspace → 重启窗口）
• 项目根目录必须有 tsconfig.json（哪怕空文件也行），且不能在 exclude 里写 "**/node_modules" 或 "src/**/*.vue"
• <script setup lang="ts"> 里至少要有一行 defineProps 或 defineEmits 调用，比如 const props = defineProps<{}>() —— 这是触发 Volar 启动 Vue 模式的关键信号

如何确认 Volar (Take Over) 真正生效？

只看右下角显示 Vue 不够，得验证它是否接管了 TypeScript 服务。否则

Vue Composition Analyzer

分析 Vue 3 Composition API 使用情况——审计响应式模式、可组合函数设计、ref 与 reactive 的选择、计算属性、watcher 使用及组件……

下载

立即学习“前端免费学习笔记（深入）”；

• 按 Ctrl+Shift+P（Mac 是 Cmd+Shift+P）→ 输入 Volar: Switch TS Plugin → 选 Enable
• 弹窗提示重启 TS 服务时，**必须点确认**（忽略=白设）
• 重启后，状态栏右下角应显示 Volar (Take Over)，不是 Vue 或 Vue (Volar)
• 打开开发者工具（Ctrl+Shift+P → Developer: Toggle Developer Tools），Console 里搜 Registering Vue language features，有日志才算真正激活

哪些设置必须写进 .vscode/settings.json？

全局设置会污染其他项目，尤其当用 pnpm、自定义 node_modules 路径或混用 Vue 2/3 时，工作区配置是唯一可靠方式。

• "files.associations": {"*.vue": "vue"} —— 强制关联，避免手动切语言模式
• "typescript.tsdk": "./node_modules/typescript/lib" —— 指向项目本地 TS，否则 defineProps<{...}> 类型推导失败
• "volar.enableTakeOverMode": true —— 显式开启 Take Over，比命令面板更稳定
• "volar.experimental.templateInterpolationService": true —— 让 {{ count + 1 }} 里的 count 和 + 都有高亮和跳转

真正容易被忽略的是：即使所有插件都装了、设置都写了，只要右下角没显示 Vue，或者 Console 里没看到 Registering Vue language features，那模板高亮和类型支持就只是“看起来像”，实际没跑起来。