VSCode要真正智能写Vue，关键在Volar接管成功、ESLint识别.vue文件、Prettier不抢格式化权：必须启用Take Over Mode，eslint.validate含"vue"，.vue格式化器设为vue.volar。
VSCode 要真正“智能”写 Vue，不是装一堆插件就行，关键在 Volar 是否接管成功、ESLint 是否识别 .vue 文件、Prettier 是否不抢 Volar 的格式化权——三者错一个，ref 类型就丢，defineProps<>() 就报红，保存后代码还被错误缩进。
Volar Take Over Mode 必须手动启用
VSCode 安装 Volar 后默认是 Extension Mode，对 .vue 文件只做基础高亮，script setup 里的类型推导和模板中属性跳转全部失效。这不是 bug，是设计行为。
- 打开任意一个
.vue文件，看右下角状态栏是否显示Vue；点击它 → 选Take Over Mode - 如果没看到该选项，说明 Volar 没正确加载：检查是否禁用了
TypeScript Vue Plugin (Volar)，或项目里没装typescript依赖 - 启用后，VSCode 会自动禁用 TypeScript 官方语言服务器对
.vue的处理，避免类型重复定义导致any泛滥
ESLint 配置必须显式声明 .vue 文件类型
只装 ESLint 插件、配了 "eslint.validate": ["javascript", "typescript"]，但漏掉 "vue"，那 script setup 里的 const count = ref(0) 就会被当成未定义变量报 no-undef。
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- 确保 VSCode 设置中有：
"eslint.validate": ["javascript", "typescript", "vue"] - 项目根目录的
eslint.config.js（或.eslintrc.cjs）里，files字段要包含'**/*.vue'，且parserOptions.parser指向@typescript-eslint/parser - 若用
defineProps<>()报类型错误，大概率是 ESLint 没把.vue当 TS 文件解析，而不是代码写错了
Prettier 和 Volar 的格式化权必须分清
Volar 自带 Vue SFC 格式化能力（尤其对 <template> 缩进和属性换行更合理），而 Prettier 默认会强行接管所有文件。两者打架的结果是：保存后 <style scoped lang="scss"> 被拆成三行，或者 setup() 函数体缩进错乱。
立即学习“前端免费学习笔记（深入）”；
- 在
settings.json中，不要全局设"editor.defaultFormatter": "esbenp.prettier-vscode" - 改为按语言指定：
"[vue]": { "editor.defaultFormatter": "vue.volar" }，再单独为javascript和typescript设 Prettier - 如果仍想用 Prettier 统一风格，需在
prettier.config.js中加overrides: [{ files: "*.vue", options: { parser: "vue" } }]，否则它根本不知道怎么解析<script setup>
最常被忽略的是：Volar 的 Take Over Mode 不是永久生效，关掉 VSCode 再打开，有时会退回到 Extension Mode；而 ESLint 配置一旦写错路径或文件名（比如把 eslint.config.js 命名为 .eslintrc.js 却没装 eslint-config-standard），整个校验链就断了——问题不在代码，而在编辑器根本没读到规则。
