eslint 默认不报 vue 特有 bug，因其原生不识别 .vue 文件结构和 语义，需显式配置 "eslint.validate": ["vue"]、安装 eslint-plugin-vue、启用 plugin:vue/vue3-recommended 规则集，并确保 volar 正确接管类型服务。
Vue 项目在 VSCode 里不配对插件和规则，defineProps 写错类型、v-if 套 v-for、watch 缺 immediate 这些问题根本不会被标出来——不是代码没 Bug，是工具压根没看懂你在写 Vue。
为什么 ESLint 默认不报 Vue 特有 Bug
ESLint 本身不认识 .vue 文件结构，更不会解析 <script setup></script> 块里的语义。它只当你是普通 JS，所以 vue/multi-word-component-names 这类规则默认关着，vue/valid-v-if 根本不加载。
- 检查
settings.json中是否包含"eslint.validate": ["javascript", "typescript", "vue"]，缺"vue"就等于没告诉 ESLint “这个文件里有 Vue 逻辑” - 确认项目已安装
eslint-plugin-vue（v9+），且.eslintrc.cjs里启用了plugin:vue/vue3-recommended或类似规则集 -
parserOptions.ecmaVersion至少设为"latest"，否则箭头函数、可选链会被当成语法错误，导致规则提前退出 - 右下角状态栏 ESLint 图标要是灰色？说明当前文件没被纳入校验——大概率是
overrides配置里漏了files: ["*.vue"]
SonarLint 才能抓到真正的语义级 Bug
ESLint 管不住的深层问题，比如 if (loading) return; else return data; 这种冗余分支、watch(() => state, callback) 漏写依赖数组、重复的 computed 逻辑，得靠 SonarLint。
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- 必须开启
sonar.javascript.jsxEnabled: true，否则<component :is="xxx"></component>这类模板内表达式不进分析范围 - 在命令面板运行
SonarLint: Show Rules，手动启用vue相关规则（如sonarjs:S1125、sonarjs:S3776），默认只开基础 JS 规则 - 确保工作区未被排除：检查
sonarlint.excludedFolders设置，别把src或components加进去 - 检测到重复代码时，SonarLint 会并排高亮两处，但不会合并——这不是 bug，是设计如此；它只标出，不重构
Volar 是一切提示和跳转的前提
没有 Volar，ref 在模板里显示为 any，defineProps 解构后变量没类型，<mycomp></mycomp> 点不了跳转——所有质量扫描都建立在“语言服务能正确理解代码”之上。
- 必须卸载
Vetur，二者共存会导致类型推导断连、跳转错乱，甚至 template 区域假报错 - 装两个插件：
Vue Language Features (Volar)+TypeScript Vue Plugin (Volar)，后者专为script setup补 TS 类型透传 - 启用
volar.takeOverMode: true，否则 TS 语言服务不接管.vue，ref在模板中依然无类型 - 项目根目录必须有
tsconfig.json（哪怕空），否则 Volar 不启动 TS 支持，computed的类型提示全丢
真正难的不是装插件，而是让 Volar 理解你的 script setup、让 ESLint 看见 <template></template> 里的 Vue 语法、让 SonarLint 把 <script></script> 和 <template></template> 当成一个整体来分析——这三者之间没有自动联动，每一步都得手动对齐配置。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
