Vue 常用的 ESLint 规则集

发布于：2025-07-16 ⋅ 阅读:(20) ⋅ 点赞:(0)

对Vue项目来说，Vue 官方通过 eslint-plugin-vue 提供了多个规则集（Rule Sets），适用于不同严格度和 Vue 版本。以下是主要的规则集及其对应的 ESLint 插件和用途：

适用于 Vue 2 项目，规则集名称以 plugin:vue/ 开头：

规则集名称	严格度	说明
`plugin:vue/base`	最低	仅包含 Vue 2 必要的语法解析规则（不检查代码质量）。
`plugin:vue/essential`	基础	避免 Vue 2 错误的必要规则（如 `v-for` 需要 `key`）。
`plugin:vue/recommended`	推荐	在 `essential` 基础上增加代码风格和最佳实践（更严格）。
`plugin:vue/strongly-recommended`	强推荐	在 `recommended` 基础上进一步强化代码一致性（如属性换行、组件命名）。

适用于 Vue 3 项目，规则集名称以 plugin:vue/vue3- 开头：

规则集名称	严格度	说明
`plugin:vue/vue3-base`	最低	Vue 3 必要的语法解析规则（不检查代码质量）。
`plugin:vue/vue3-essential`	基础	避免 Vue 3 错误的必要规则（如 Composition API 的 `setup` 检查）。
`plugin:vue/vue3-recommended`	推荐	扩展 `essential`，增加 Vue 3 风格和最佳实践。
`plugin:vue/vue3-strongly-recommended`	强推荐	更严格的代码格式要求（如模板缩进、属性顺序）。

规则集名称	说明
`plugin:vue/all`	启用所有 Vue 2 规则（包括实验性规则，可能过于严格）。
`plugin:vue/vue3-all`	启用所有 Vue 3 规则（适合追求极致一致性的团队）。

所有 Vue 规则集均通过 eslint-plugin-vue 插件提供：

安装命令：

npm install eslint-plugin-vue --save-dev

依赖的解析器：
Vue 单文件组件（.vue）需要配合 vue-eslint-parser（内置在插件中），同时需指定 JavaScript 解析器（如 @babel/eslint-parser）：
```
"parserOptions": {
  "parser": "@babel/eslint-parser"
}
```

避免混合使用 Vue 2 和 Vue 3 的规则集。
通常来说，根据 Vue 版本最常用的规则集是：
Vue 2 → plugin:vue/recommended
Vue 3 → plugin:vue/vue3-recommended

可通过 rules 字段覆盖或扩展默认规则：

"rules": {
  "vue/multi-word-component-names": "off" // 关闭组件名必须多单词的规则
}