Eslint extends属性继承与合并规则及Vue项目适配疑问

先明确核心问题：extends 是覆盖还是合并？ #

ESLint 的 extends 是按顺序叠加+冲突覆盖的逻辑：

• 继承父配置时，父配置的所有规则（包括父 extends 引入的规则）会先被加载。
• 子配置的 extends 会在父配置的规则之后依次加载，后加载的配置中，与之前重复的规则会直接覆盖前面的。
• 但子配置的 extends 是追加在父配置的 extends 链之后，无法插入到父 extends 的中间位置。

能不能在正确位置插入Vue配置避免重复？ #

可以，但需要调整根目录的配置结构，把通用配置拆分成可复用的片段：

具体操作步骤： #

1. 拆分根配置为多个独立文件：

   • 创建根目录 .eslintrc.base.json（仅包含基础ESLint推荐规则）：

     {
       "extends": ["eslint:recommended"],
       // 其他通用规则（比如环境、parserOptions等）也可以放这里
       "env": {
         "node": true,
         "es2021": true
       }
     }
     

   • 创建根目录 .eslintrc.ts.json（继承基础+TypeScript推荐规则）：

     {
       "extends": ["./.eslintrc.base.json", "plugin:@typescript-eslint/recommended"],
       "parser": "@typescript-eslint/parser",
       "plugins": ["@typescript-eslint"]
     }
     

   • 原根目录 .eslintrc 改为继承TS配置（供普通应用/API使用）：

     {
       "extends": ["./.eslintrc.ts.json"]
     }
     

2. Vue子项目的配置：
   不需要设置 root: true，直接按需要的顺序组合拆分后的配置：

   {
     "extends": [
       "../../.eslintrc.base.json",
       "plugin:vue/essential",
       "../../.eslintrc.ts.json"
     ],
     "parser": "vue-eslint-parser",
     "parserOptions": {
       "parser": "@typescript-eslint/parser"
     },
     "plugins": ["vue"]
   }
   

   这样加载顺序就是：eslint:recommended → plugin:vue/essential → plugin:@typescript-eslint/recommended，完美符合需求，同时所有通用配置都是复用的，没有重复。

如果不想拆分配置怎么办？ #

那只能保留 root: true，在Vue子项目的配置里完整复制根配置的内容，再把 plugin:vue/essential 插入到 eslint:recommended 和 plugin:@typescript-eslint/recommended 之间，接受少量配置重复的情况。

内容的提问来源于stack exchange，提问作者mtpultz