Volar 是 Vue 3 唯一支持完整类型推导与模板跳转的语言服务，必须启用 volar.takeOverMode 并配置 tsconfig.json 中的 baseUrl 和 paths 别名，否则类型提示失效、路径补全异常；同时需卸载 Vetur、合理配置 ESLint 自动修复范围及使用 Vue Peek 补齐组件跳转盲区。
Vue 3 项目里，Volar 是唯一真正能撑起类型推导、模板跳转和响应式变量感知的语言服务插件；Vetur 已归档，继续启用会直接导致 defineProps 类型丢失、ref 无法跳转、模板内 TS 报错失效等硬伤。
必须启用 Volar 的 Take Over Mode
不开启 volar.takeOverMode，VSCode 就不会把 .vue 文件里的 <script setup></script> 当作 TypeScript 处理，所有类型提示、自动导入、错误检查都会降级为“猜”——比如 props.msg 显示 “any”，useRoute() 点不进去定义，ref 声明后无法被模板识别。
- 在
.vscode/settings.json中添加："volar.takeOverMode": true - 该设置会接管 TS/JS 语言服务，但仅对
.vue和关联的.ts文件生效，不影响纯 JS 项目 - 启用后需重启 VSCode（不是重载窗口），否则状态栏仍显示 “TypeScript” 而非 “Vue”
- 如果同时装了 Vetur，它会强制禁用 Volar 的接管能力，务必卸载或禁用 Vetur
路径补全必须配别名 + Path Intellisense
写 import { useUser } from '@/composables/user' 时，靠手动数 ../../../ 或全局搜索找路径，是 Vue 开发中最常卡顿的环节。光装 Path Intellisense 不够，它默认不识别 @/ 这类 Webpack/Vite 别名。
- 在
jsconfig.json或tsconfig.json中声明别名："compilerOptions": { "baseUrl": ".", "paths": { "@/*": ["src/*"] } } - 确保
Path Intellisense插件已启用，并在设置中打开path-intellisense.mappings自动读取 tsconfig - 输入
@/后，它会直接列出src/下所有子目录，支持二级路径联想（如@/components/→Button.vue） - 不配
baseUrl和paths，插件只会补全物理路径，遇到软链或 monorepo 子包会彻底失效
保存即修复 ESLint 需限定文件范围
"editor.codeActionsOnSave": { "source.fixAll.eslint": true } 看似省事，但一旦误开 package.json 或 webpack.config.js 并保存，ESLint 可能强行格式化 JSON 结构、重排数组顺序，甚至把 devDependencies 移到顶部——这不是修复，是破坏。
立即学习“前端免费学习笔记（深入）”；
- 改用
"[vue]": { "editor.codeActionsOnSave": { "source.fixAll.eslint": true } }，只对.vue文件生效 - 再加一条
"[typescript]": { ... }和"[javascript]": { ... }，覆盖脚本逻辑部分 - 确保项目已安装
@vue/eslint-config-typescript，否则defineProps<{ id: number }>()这类写法会被标红 - 若使用 Prettier，必须禁用其格式化规则：
eslint-config-prettier要出现在 extends 最末尾
组件跳转别依赖 Ctrl+Click，用 Vue Peek 补盲区
Volar 的 “转到定义” 对 defineComponent、defineAsyncComponent 支持良好，但遇到从 unplugin-vue-components 自动导入的组件（如 <elbutton></elbutton>），或第三方 UI 库里没导出默认 export default 的子组件（如 ElementPlus/components/button/src/button.vue），Ctrl+Click 会失败。
-
Vue Peek插件专治这类场景：在模板中右键组件名 → “Peek Component Definition”，直接弹出源码预览（不跳转） - 它不依赖类型系统，纯靠文件路径匹配，所以对未显式 import 的组件、别名路径、甚至 node_modules 里的 .vue 文件都有效
- 配合
Auto Import使用效果更佳：写完<mydialog></mydialog>，保存后自动加 import，再 Peek 就能立刻看到实现 - 注意关闭它的 “peek on hover” 选项，否则悬停两秒就弹窗，干扰阅读
最易被忽略的是 volar.takeOverMode 和 tsconfig.json 的联动——缺一不可。很多人配了 Take Over 却忘了配 baseUrl，结果模板里能跳转，script 里 import 的路径却补不出来，以为插件坏了，其实是配置断在了中间层。
