必须装volar、禁用vetur、启用take over mode、设.vue语言模式为vue，并确保tsconfig.json存在且未排除node_modules；缺任一环，defineprops报红、ref不解包、template变量无高亮。
装了 Volar 不等于有高亮，defineProps 报红、v-if 灰着、<template></template> 里变量没颜色——根本不是插件没装，而是 Volar 没真正接管 .vue 文件的语言服务。
右下角显示的不是 Vue，就别指望高亮生效
VSCode 默认不把 .vue 当 Vue 处理，哪怕你装了 Volar。它可能走 HTML 解析器，导致整个 <script setup lang="ts"></script> 块被当纯文本，<template></template> 里的指令自然不识别。
- 打开任意 .vue 文件，点击右下角语言标识（比如显示
HTML或Plain Text） - 选
Configure File Association for '.vue'→ 输入vue回车（注意：不是vue-html、不是Vue (Volar)） - 再点一次语言标识，手动从列表中选
Vue（状态栏必须显示干净的Vue字样） - 如果列表里压根没有
Vue，说明 Volar 未启用或被禁用；去扩展面板确认Vue.volar已启用
Volar: Take Over Mode 必须开，且重启窗口才生效
不开 Take Over，Volar 就只做基础语法高亮和跳转，ref 不解包、defineProps<t>()</t> 泛型不推导、<template></template> 里变量无类型提示——所有核心能力都残废。
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- 按
Ctrl+Shift+P（Win/Linux）或Cmd+Shift+P（macOS）→ 输入Volar: Take Over Mode→ 回车 → 弹窗点Yes - 执行后必须关闭并**重新打开整个 VS Code 窗口**（仅重载窗口不生效）
- 重启后右下角应显示
Volar (Take Over)，不是Vue或Vue (Volar) - 如果点了
Yes却没变化：先在设置里关掉Volar > Enable Take Over Mode，再重执行命令，最后彻底重启窗口
tsconfig.json 缺失或排除 node_modules，defineProps 一定报红
Volar 的类型服务强依赖 tsconfig.json。没有它，或它错误地把 node_modules 排除，@vue/language-core 就加载不了，defineProps 直接变未定义。
- 项目根目录必须有
tsconfig.json（哪怕内容只是{}） - 检查
"exclude"字段：不能写"**/node_modules"或"node_modules"，否则 Volar 找不到 Vue 类型库 - 如果用
pnpm，运行pnpm store path查路径，确保 VSCode 有权限读取（macOS 上偶尔因全盘访问权限静默失败） - 在
.vscode/settings.json中写入："typescript.tsdk": "./node_modules/typescript/lib"，指向项目本地 TS 版本
defineProps 调用是触发 Volar 进入 SFC 模式的“开关”
即使前面全对，<script setup lang="ts"></script> 里没显式调用 defineProps 或 defineEmits，Volar 仍可能不启动 Vue SFC 语言服务——此时 TS 插件还在用默认逻辑解析，自然不认识 Vue 宏。
- 在
<script setup lang="ts"></script>中至少加一行：const props = defineProps()（空泛型也行） - 这是告诉 Volar “这是 Vue 单文件组件，不是普通 TS”，是激活模板解析和类型推导的关键信号
- 同时禁用 VSCode 内置的
TypeScript and JavaScript Language Features（命令面板搜built→ Disable Workspace → 重启窗口） - 打开开发者工具（
Ctrl+Shift+P→Developer: Toggle Developer Tools），Console 里搜Registering Vue language features，有日志才算真正激活
最容易被忽略的是三者必须同时到位：右下角显示 Vue、状态栏显示 Volar (Take Over)、项目根目录存在有效的 tsconfig.json 且 <script setup></script> 里有宏调用——缺一不可。任何一步卡住，高亮和类型能力都会降级为“看起来像”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
