跳转到主内容
趣航编程网 - 趣学编程,启航技术之路!

VSCode怎么配置eslint-plugin-vue_VSCode Vue特定规则检查与自动修复

要使 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 单文件组件里的