如何解决子目录.eslintrc.json无法覆盖全局ESLint配置规则的问题

问题原因 #

子目录.eslintrc.json不生效是因为根目录配置的overrides规则优先级高于子目录的普通层级配置，@angular-eslint默认的规则合并逻辑会优先使用根目录overrides里定义的选择器规则。

解决方案（推荐，无需子目录配置） #

直接修改根目录.eslintrc.json，在原有overrides数组末尾新增一条专门匹配src/elements目录下TS文件的规则，overrides按顺序匹配，后定义的规则会覆盖前面的同名规则：

{
   "root": true,
   "ignorePatterns": ["projects/**/*"],
   "overrides": [
      {
         "files": ["*.ts"],
         "parserOptions": {
            "project": ["tsconfig.json"],
            "createDefaultProgram": true
         },
         "extends": ["plugin:@angular-eslint/recommended", "plugin:@angular-eslint/template/process-inline-templates"],
         "rules": {
            "@angular-eslint/directive-selector": [
               "error",
               {
                  "type": "attribute",
                  "prefix": "app",
                  "style": "camelCase"
               }
            ],
            "@angular-eslint/component-selector": [
               "error",
               {
                  "type": "element",
                  "prefix": "app",
                  "style": "kebab-case"
               }
            ]
         }
      },
      // 新增适配elements目录的规则开始
      {
         "files": ["src/elements/**/*.ts"],
         "rules": {
            "@angular-eslint/directive-selector": [
               "error",
               {
                  "type": "attribute",
                  "prefix": "ui",
                  "style": "camelCase"
               }
            ],
            "@angular-eslint/component-selector": [
               "error",
               {
                  "type": "element",
                  "prefix": "ui",
                  "style": "kebab-case"
               }
            ]
         }
      },
      // 新增规则结束
      {
         "files": ["*.html"],
         "extends": ["plugin:@angular-eslint/template/recommended"],
         "rules": {}
      }
   ]
}

修改后可以删除src/elements目录下的.eslintrc.json，避免配置冲突。

若坚持使用子目录配置的调整方法 #

1. 在src/elements/.eslintrc.json顶部添加"root": true，告诉ESLint该目录的配置不需要继承上层配置，同时补全必要的继承规则避免其他校验逻辑丢失：

{
   "root": true,
   "parserOptions": {
      "project": ["../../../tsconfig.json"],
      "createDefaultProgram": true
   },
   "extends": ["plugin:@angular-eslint/recommended", "plugin:@angular-eslint/template/process-inline-templates"],
   "overrides": [
      {
         "files": ["*.ts"],
         "rules": {
            "@angular-eslint/directive-selector": [
               "error",
               {
                  "type": "attribute",
                  "prefix": "ui",
                  "style": "camelCase"
               }
            ],
            "@angular-eslint/component-selector": [
               "error",
               {
                  "type": "element",
                  "prefix": "ui",
                  "style": "kebab-case"
               }
            ]
         }
      }
   ]
}

2. 运行lint命令时不要添加--config参数强制指定根目录配置，否则会跳过子目录配置的加载逻辑。

生效验证 #

执行以下命令打印指定文件的最终生效规则，确认选择器前缀是否为ui：

npx eslint src/elements/xxx.component.ts --print-config | grep -A 10 "directive-selector\|component-selector"

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