必须安装Volar（非Vetur）、正确启用takeover模式、使用工作区TypeScript版本，并配置ESLint校验vue类型；否则将出现类型推导失效、eslint不识别、模板无高亮、保存不修复等问题。
VSCode 开发 Vue 项目本身不需要任何扩展就能写代码，但缺了几个关键扩展，你会反复遭遇 eslint 报错不识别、ref() 类型推导失效、.vue 文件里模板语法没高亮、保存后不自动修复——这些不是配置问题，是扩展没装对。
必须装的三个扩展：Volar 而不是 Vetur
Volar 是 Vue 官方推荐的现代 Vue（3.2+）语言支持工具，Vetur 已停止维护且与组合式 API + TypeScript 配合极差。装错直接导致 defineProps 类型丢失、setup 中无法跳转到组件定义。
- 卸载所有带 “Vetur” 字样的扩展（包括旧版 “Vue Language Features (Volar)”）
- 安装
Volar（作者：johnsoncodehk），并启用它作为.vue文件的语言服务器 - 在 VSCode 设置中搜索
“volar: enable take over mode”，勾选——这会让 Volar 接管.vue文件的全部语言功能，禁用内置 HTML/TypeScript 插件的干扰
TypeScript 支持要关掉内置 TS 插件的 .vue 处理
VSCode 自带的 TypeScript 插件默认不识别 .vue 文件中的 script setup，会报 Cannot find name 'ref' 这类错误，即使你已装 Volar。
- 打开命令面板（
Ctrl+Shift+P/Cmd+Shift+P），运行Typescript: Select TypeScript Version - 选择
Use Workspace Version（确保使用项目里的typescript版本，而非 VSCode 内置版本） - 在设置中搜索
“typescript.preferences.includePackageJsonAutoImports”，设为auto；再搜“typescript.suggestionActions.enabled”，确保开启
ESLint 和 Prettier 协同工作必须手动配 override
只装 ESLint 扩展（dbaeumer.vscode-eslint）和 Prettier（esbenp.prettier-vscode）不够，Vue 项目里 .vue 文件的 script/template/style 三块内容需分别指定解析器，否则保存时 eslint --fix 对 template 部分完全无效。
立即学习“前端免费学习笔记（深入）”；
- 项目根目录确保有
.eslintrc.cjs或eslint.config.js，且已包含plugin:vue/vue3-essential规则集 - 在
.vscode/settings.json中添加：{ "editor.codeActionsOnSave": { "source.fixAll.eslint": true }, "eslint.validate": ["javascript", "typescript", "vue"], "prettier.vueIndentScriptAndStyle": true } - 如果用了
defineOptions或defineSlots，确认 ESLint 配置中启用了vue/setup-compiler-macros规则
真正卡住人的往往不是“该装什么”，而是 Volar 的 takeover 模式是否生效、TS 是否用了 workspace 版本、ESLint 是否被明确告知要校验 vue 类型——这三个点任意一个漏掉，都会让编辑器看起来“不工作”。
