Vue 3 项目必须用 Volar 而非 Vetur，因 Vetur 已归档且不支持 script setup 的类型推导、ref 跳转和 defineProps 补全；Volar 是官方维护插件，需启用 takeOver 模式并禁用 Vetur 才能正常工作。
Vue 3 项目必须用 Volar，不是 Vetur
Vue 3（尤其是 script setup）的类型推导、响应式变量跳转、defineProps 自动补全，Vetur 做不到，且已归档。Volar 是 Vue 官方维护的语言支持插件，它能真正理解组合式 API 的语义。
- 装完
Vue Language Features (Volar)后，**必须顺带安装TypeScript Vue Plugin (Volar)**，否则<script setup></script>区域的 TS 类型检查会失效 - 务必卸载或禁用 Vetur：两者共存会导致模板中 ref 变量无法跳转、
onMounted提示缺失等静默失效问题 - 在
.vscode/settings.json中加"volar.takeOverMode": true，让 Volar 接管 TS 语言服务——这是模板内类型提示生效的关键一步 - 确认右下角状态栏语言模式是
vue（不是HTML），否则 Emmet 和语法高亮都会降级
路径补全失效？Path Intellisense 需要别名映射
输入 @/components/ 没提示？不是插件坏了，是它默认只扫描文件系统相对路径，不认识 Webpack/Vite 的 @ 别名。
- 在项目根目录的
jsconfig.json或tsconfig.json中声明别名："compilerOptions": { "baseUrl": ".", "paths": { "@/*": ["src/*"] } } - Path Intellisense 会自动读取该配置，无需额外设置；若仍不生效，重启 VSCode 并确认 tsconfig 文件未被
exclude掉 - 别名层级过深（如
@@/utils）需手动在settings.json中配"path-intellisense.mappings"，但多数项目用标准@就够了
模板里 Ctrl+点击组件不跳转？缺 Vue Peek 或配置没对
在 <template></template> 中写 <mybutton></mybutton> 却没法跳到定义处，常见于两种情况：插件没装，或 Volar 的“接管”没生效。
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- 装
Vue Peek是最直接解法：它专为 Vue SFC 组件跳转设计，比全局搜索快，且支持defineAsyncComponent动态导入场景 - 如果已装 Volar 但跳转仍失败，检查
settings.json是否漏了"files.associations": { "*.vue": "vue" }—— 这条决定了 VSCode 把 .vue 当 Vue 文件还是 HTML 文件处理 - 某些 monorepo 项目中，组件定义在子包里，需确保
tsconfig.json的"include"覆盖对应路径，否则 Volar 找不到源码位置
ESLint 提示 v-model 修饰符错误？规则集没对齐
v-model:value 或 v-model:foo.trim 被标红，大概率是 ESLint 插件加载了 Vue 2 规则，而项目是 Vue 3。
立即学习“前端免费学习笔记（深入）”；
- 确保安装的是
eslint-plugin-vue@9.x（Vue 3 对应版本），而非旧版@8；检查package.json中依赖是否锁定正确 -
.eslintrc.cjs的extends应包含'plugin:vue/vue3-recommended'，不是vue/recommended（那是 Vue 2 的） - 若用了
defineModel()（Vue 3.4+），还需升级eslint-plugin-vue至@9.25.0+，否则会误报“未定义的 model” - VSCode 中 ESLint 插件右下角显示 “ESLint: Running…” 却无提示？可能是工作区没识别到配置文件，尝试用命令面板执行
ESLint: Restart ESLint Server
