volar需三步激活：右下角手动切语言模式为vue、禁用vetur及内置ts插件、启用take over mode并重启窗口；缺一即导致defineprops报红、ref不解包、template无提示。
Volar 不是装上就能用的“开箱即用”插件，它必须接管 TypeScript 语言服务、正确识别 .vue 文件语义、并绕过 VSCode 内置 TS 插件的干扰，否则 defineProps 报红、ref 不解包、template 里变量无提示全是常态。
确认 Volar 真正接管 .vue 文件
右下角显示 “Vue (Vetur)” 或 “HTML” 就说明没生效；只有显示干净的 Vue，且开发者工具 Console 里搜到 Registering Vue language features，才算真正激活。
- 打开任意
.vue文件，点击右下角语言模式标签 → 选Configure File Association for '.vue'→ 输入vue（不是Vue (Volar)）→ 回车 - 再点一次语言模式，手动切换成
Vue（注意不是Vue HTML） - 按
Ctrl+Shift+P运行Developer: Toggle Developer Tools，在 Console 中搜索volar，看到注册日志才可信
必须禁用 Vetur 和内置 TS 插件
Vetur 和 Volar 同时启用会直接冲突；VSCode 自带的 TypeScript and JavaScript Language Features 插件也会抢走类型服务控制权，导致 defineProps() 仍报错。
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- 在扩展面板中搜索
Vetur，点击齿轮图标 →Disable Workspace（卸载非必需，禁用即可） - 命令面板搜
built→ 找到TypeScript and JavaScript Language Features→Disable Workspace→ 重启窗口 - 确保项目根目录有
tsconfig.json（哪怕空文件），且未在exclude中排除src/**/*.vue
启用 Take Over Mode 并重启 TS 服务
不开 Take Over Mode，Volar 就只做基础高亮：ref 不自动补全 .value、template 里 props 类型不推导、defineEmits 泛型无效——所有核心能力都残废。
- 按
Ctrl+Shift+P输入Volar: Switch TS Plugin→ 选Enable - 弹窗提示重启 TS 服务时，**必须点确认**（忽略=白配）
- 状态栏右下角应显示
Volar (Take Over)，不是Vue或Vue (Volar) - 若无效，先关掉
volar.takeOverMode.enabled设置项，再重执行命令，最后彻底关闭并重新打开 VSCode 窗口（不是重载）
配置 .vscode/settings.json 避免全局污染
全局设置会把 Vue 项目规则带到纯 JS/TS 项目里，引发误报；工作区配置才能精准控制，尤其当项目用 pnpm 或自定义 node_modules 路径时。
- 在项目根目录建
.vscode/settings.json，写入：
{
"files.associations": {
"*.vue": "vue"
},
"volar.takeOverMode.enabled": true,
"volar.autoInsertDotValue": true,
"volar.codeLens.references": true,
"volar.serverPath": "./node_modules/volar-service-vue3"
}
volar.serverPath 仅在 pnpm 或自定义 node_modules 时需要显式指定，否则可删volar.templateDiagnostic 设为 false，避免和 ESLint 冲突最常被跳过的其实是 Disable Workspace 内置 TS 插件这一步——很多人以为只要禁用 Vetur 就够了，结果 ref 依然不自动解包，因为类型服务根本没交到 Volar 手里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
