要使 eslint 正确检查并修复 vue 特定规则（如 vue/multi-word-component-names），需安装 eslint-plugin-vue、在配置中 extends 对应共享配置（如 "plugin:vue/vue3-essential"）、overrides 明确覆盖 *.vue 文件、parseroptions.parser 设为 "@typescript-eslint/parser"，且插件版本须匹配 vue 版本（vue 3 用 v9+，vue 2 用 v8.7.1）。
ESLint 要检查并修复 Vue 特定规则（比如 vue/multi-word-component-names、vue/require-default-prop），光装 eslint-plugin-vue 不够，必须让它被 ESLint 正确加载、解析器对得上、且规则明确作用到 .vue 文件——否则你看到的报错和修复都是 JS 层面的，跟 Vue 语法无关。
为什么 vue/multi-word-component-names 从不报错也不修
这个规则属于 eslint-plugin-vue，但默认不会启用，更不会自动修复。它只在 plugin:vue/vue3-essential 或 plugin:vue/vue3-strongly-recommended 这类共享配置里才被打开，且仅对 .vue 文件生效。
- 确认你的
.eslintrc.cjs（推荐用.cjs后缀）里extends包含了"plugin:vue/vue3-essential"（Vue 3）或"plugin:vue/essential"（Vue 2） - 检查
overrides是否覆盖了"*.vue"，例如：files: ["*.vue"], parser: "@typescript-eslint/parser", plugins: ["vue"] -
vue/multi-word-component-names标记为 ✅ Fixable，但它不自动重命名组件——只会在你手动触发“快速修复”时给出建议名，保存时不会改；别指望它像semi那样静默加个分号
parserOptions.parser 必须显式设为 @typescript-eslint/parser
Vue 单文件组件里的 <script setup></script> 是 TS 语法，但 ESLint 默认不会把 .vue 当作 TS 文件处理。如果 parser 没配对，eslint-plugin-vue 的规则根本不会运行。
- 错误写法：
parserOptions: { parser: "@typescript-eslint/eslint-parser" }（已废弃，VSCode 加载失败） - 正确写法：
parserOptions: { parser: "@typescript-eslint/parser" }，且确保该包已安装：npm install @typescript-eslint/parser --save-dev - 若项目同时有
.ts和.vue，建议在overrides里分别指定：{"files": ["*.ts"], "parser": "@typescript-eslint/parser"}和{"files": ["*.vue"], "parser": "@typescript-eslint/parser"}
eslint-plugin-vue 版本与 Vue 版本不匹配的典型症状
Vue 3.3+ 项目用了 eslint-plugin-vue@8.x，会导致 <script setup></script> 里的响应式 API（如 ref、computed）无法识别，no-unused-vars 误报，甚至整个 .vue 文件不触发任何规则。
- Vue 3 项目：必须用
eslint-plugin-vue@^9.0.0（2026 年主流是@latest） - Vue 2 项目：只能用
eslint-plugin-vue@^8.7.1，新版会直接跳过校验 - 运行
npm list eslint-plugin-vue确认版本；如果输出empty或版本不对，立刻重装：npm install eslint-plugin-vue@latest --save-dev - 装完后重启 VSCode，右下角 ESLint 图标悬停应显示 “Using local version”，不是 “global”
修复动作没反应？先看 ESLint: Show Output Channel
VSCode 不会弹窗告诉你哪步错了，它只会沉默跳过。真正卡住人的，往往是插件加载时静默失败。
- 按
Ctrl+Shift+P→ 输入并执行ESLint: Show Output Channel - 保存一个明显违规的
.vue文件（比如组件名用驼峰MyButton），观察输出里有没有：Failed to load plugin 'vue'、No ESLint configuration found、Cannot find module '@typescript-eslint/parser' - 如果看到
Using configuration from /path/to/.eslintrc.cjs，说明配置读进去了；没这行，说明 VSCode 打开的不是项目根目录，或者配置文件后缀/导出方式不对（比如用了export default但文件是.cjs）
最常被忽略的一点：规则能报错 ≠ 能修复。比如 vue/require-default-prop 只提示缺 default，但不会自动补上；vue/define-macros-order 会指出 macro 顺序错，但不会帮你调换位置。真正可静默修复的，只有那些带 ✅ Fixable 标识、且不涉及语义判断的规则——别把 ESLint 当 AI 编程助手用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
