覆盖子目录中的全局 eslint 配置规则答案

【问题标题】：Override global eslint config rules in subdirectory覆盖子目录中的全局 eslint 配置规则
【发布时间】：2022-01-07 02:40:58
【问题描述】：

我正在从 tslint 迁移到 eslint。但是我无法以类似的方式应用规则。子目录中的.eslintrc.json 将被忽略。但是我需要为某些子目录覆盖一些规则。在这种情况下，对于该子目录中的所有文件，选择器前缀应该是 ui 而不是 app。

根 .eslintrc.json

{
   "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"
               }
            ]
         }
      },
      {
         "files": ["*.html"],
         "extends": ["plugin:@angular-eslint/template/recommended"],
         "rules": {}
      }
   ]
}

src/elements/.eslintrc.json

{
   "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"
               }
            ]
         }
      }
   ]
}

【问题讨论】：

标签： configuration eslint eslintrc typescript-eslint

【解决方案1】：

原来我必须在 parserOptions 中添加tsconfig.json 路径。所以覆盖文件如下所示：

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

【讨论】：