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

Question

我正在从 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"
               }
            ]
         }
      }
   ]
}

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

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

Override global eslint config rules in subdirectory

configuration

eslint

eslintrc

typescript-eslint