要使 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 特定规则(比如、),光装不够,必须让它被 ESLint 正确加载、解析器对得上、且规则明确作用到文件——否则你看到的报错和修复都是 JS 层面的,跟 Vue 语法无关。
为什么
从不报错也不修
这个规则属于
,但默认不会启用,更不会自动修复。它只在
或
这类共享配置里才被打开,且仅对
文件生效。
确认你的
(推荐用
后缀)里
包含了
(Vue 3)或
(Vue 2)
检查
是否覆盖了
,例如:
标记为 ✅ Fixable,但它不自动重命名组件——只会在你手动触发“快速修复”时给出建议名,保存时不会改;别指望它像
那样静默加个分号
必须显式设为
Vue 单文件组件里的
是 TS 语法,但 ESLint 默认不会把
当作 TS 文件处理。如果 parser 没配对,
的规则根本不会运行。
错误写法:
(已废弃,VSCode 加载失败)
正确写法:
,且确保该包已安装:
若项目同时有
和
,建议在
里分别指定:
和
版本与 Vue 版本不匹配的典型症状
Vue 3.3+ 项目用了
,会导致
里的响应式 API(如
、
)无法识别,
误报,甚至整个
文件不触发任何规则。
VSCode 1.118
微软正式发布 Visual Studio Code 1.118 版本 。本次更新重点强化了 AI 开发体验与企业管理能力,其中最引人注目的是新增 Copilot CLI 远程控制功能,允许开发者通过手机或网页远程监控和接管 AI 会话 。同时,为了提高 AI 的运行性价比,新版本优化了令牌缓存策略以降低成本 。此外,1.118 版还引入了 Chronicle 本地历史追踪、TypeScript 7.0 支持以及更严格的企业级访问管控 。
下载
立即学习
“
前端免费学习笔记(深入)
”;
Vue 3 项目:必须用
(2026 年主流是
)
Vue 2 项目:只能用
,新版会直接跳过校验
运行
确认版本;如果输出
或版本不对,立刻重装:
装完后重启 VSCode,右下角 ESLint 图标悬停应显示 “Using local version”,不是 “global”
修复动作没反应?先看
VSCode 不会弹窗告诉你哪步错了,它只会沉默跳过。真正卡住人的,往往是插件加载时静默失败。
按
→ 输入并执行
保存一个明显违规的
文件(比如组件名用驼峰
),观察输出里有没有:
、
、
如果看到
,说明配置读进去了;没这行,说明 VSCode 打开的不是项目根目录,或者配置文件后缀/导出方式不对(比如用了
但文件是
)
最常被忽略的一点:规则能报错 ≠ 能修复。比如
只提示缺
,但不会自动补上;
会指出 macro 顺序错,但不会帮你调换位置。真正可静默修复的,只有那些带 ✅ Fixable 标识、且不涉及语义判断的规则——别把 ESLint 当 AI 编程助手用。
vue/multi-word-component-namesvue/require-default-propeslint-plugin-vue.vuevue/multi-word-component-nameseslint-plugin-vueplugin:vue/vue3-essentialplugin:vue/vue3-strongly-recommended.vue.eslintrc.cjs.cjsextends"plugin:vue/vue3-essential""plugin:vue/essential"overrides"*.vue"files: ["*.vue"], parser: "@typescript-eslint/parser", plugins: ["vue"]vue/multi-word-component-namessemiparserOptions.parser@typescript-eslint/parser.vueeslint-plugin-vueparserOptions: { parser: "@typescript-eslint/eslint-parser" }parserOptions: { parser: "@typescript-eslint/parser" }npm install @typescript-eslint/parser --save-dev.ts.vueoverrides{"files": ["*.ts"], "parser": "@typescript-eslint/parser"}{"files": ["*.vue"], "parser": "@typescript-eslint/parser"}eslint-plugin-vueeslint-plugin-vue@8.xrefcomputedno-unused-vars.vueeslint-plugin-vue@^9.0.0@latesteslint-plugin-vue@^8.7.1npm list eslint-plugin-vueemptynpm install eslint-plugin-vue@latest --save-devESLint: Show Output ChannelCtrl+Shift+PESLint: Show Output Channel.vueMyButtonFailed to load plugin 'vue'No ESLint configuration foundCannot find module '@typescript-eslint/parser'Using configuration from /path/to/.eslintrc.cjsexport default.cjsvue/require-default-propdefaultvue/define-macros-order