Volar是Vue 3项目唯一应启用的核心插件，Vetur必须禁用或卸载，否则因二者均注册.vue文件语言服务且协议不兼容，导致defineProps类型丢失、模板跳转失效、指令无提示等问题。
Volar 是当前 Vue 3 项目唯一应启用的智能分析核心插件，Vetur 必须禁用或卸载，否则类型推导和 script setup 补全会失效。
为什么 Volar 不能和 Vetur 共存
Vetur 和 Volar 都会注册 .vue 文件的语言服务，但 VSCode 只允许一个激活。Vetur 对 Composition API 和 TypeScript 的支持已停止维护，遇到 defineProps 类型丢失、ref 在模板中无提示、onMounted 跳转失败等问题，基本都是 Vetur 拦截了语言请求。
常见错误现象包括：
-
Property 'xxx' does not exist on type '{}'（TS 报错但实际存在） - 模板中点击
count无法跳转到const count = ref(0) -
script setup区域无自动导入建议，defineEmits不识别
解决方法很简单：
立即学习“前端免费学习笔记（深入）”；
- 在扩展面板中搜索
Vetur，点击“禁用”或“卸载” - 确认
Volar和TypeScript Vue Plugin (Volar)已安装并启用 - 重启 VSCode，打开任意
.vue文件，检查右下角状态栏是否显示 “Vue (Volar)”
ESLint + vue-eslint-plugin 实现真正可修复的代码分析
仅靠语法高亮和跳转不够，真实开发中需要知道“哪里写错了、为什么错、怎么改”。eslint-plugin-vue 是目前唯一能深度解析 Vue SFC 模板语法、响应式逻辑和组件结构的 Lint 插件。
关键配置点：
Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。
- 项目级
.eslintrc.cjs中必须包含'plugin:vue/vue3-recommended'，不能只用eslint:recommended - VSCode 设置里要显式声明校验目标：
"eslint.validate": ["javascript", "typescript", "vue"] - 若使用
defineProps声明 props，需在 ESLint 配置中开启parserOptions.parser指向@typescript-eslint/parser，否则 TS 类型不被识别
典型可自动修复问题：
-
v-model修饰符拼写错误（v-model.trim→v-model:trim） - 未使用的
defineEmits函数（保存即删） - 模板中直接调用非响应式函数（触发
vue/no-unregistered-components提示）
保存时自动修复的边界在哪
"editor.codeActionsOnSave": {"source.fixAll.eslint": true} 看似万能，但实际有明确限制：
- 它只修复
eslint-plugin-vue规则中标记为fixable的问题（比如缩进、引号、空格），不修复逻辑错误（如ref误写成reactive） - 若项目没装
@vue/eslint-config-prettier，ESLint 和 Prettier 规则冲突会导致保存后反复格式化又报错 - 对
template区域的修复能力弱于script，例如v-if/v-for顺序错误不会自动调整
所以务必确保：
- 项目依赖中存在
@vue/eslint-config-prettier，并在extends中排在最后 -
prettier.config.js里不要设置与 ESLint 冲突的规则（如semi或quotes） - 遇到保存后代码“越修越乱”，先关掉
source.fixAll.eslint，手动运行npx eslint --fix定位具体哪条规则出问题
路径补全和自动导入不是锦上添花，而是 Vue 工程提速刚需
Vue 项目目录层级深、别名多（@/components、~/utils），手写 import 路径极易出错且耗时。两个插件必须配齐：
-
Path Intellisense：输入import { useAuth } from '@/composables后，自动列出该路径下所有.ts文件 -
Auto Import：光标悬停在ref上按Ctrl+.，自动插入import { ref } from 'vue'
注意坑点：
- 如果
tsconfig.json中baseUrl和paths配置了别名，Auto Import默认不识别，需在 VSCode 设置中开启javascript.suggest.autoImports和typescript.suggest.autoImports -
Path Intellisense对vite.config.ts中定义的resolve.alias不原生支持，需手动在插件设置里补充path-intellisense.mappings
最常被忽略的是：这些插件的生效前提是 Volar 正确加载了项目 TS 服务——如果右下角显示 “TypeScript (Workspace)” 而非 “TypeScript (Volar)”，路径和导入功能大概率失效，此时应检查 typescript.tsdk 是否指向项目本地 node_modules/typescript/lib。
