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

Posted

技术标签:

【中文标题】覆盖子目录中的全局 eslint 配置规则【英文标题】:Override global eslint config rules in subdirectory 【发布时间】: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"
               
            ]
         
      
   ]

【问题讨论】:

【参考方案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 配置规则的主要内容,如果未能解决你的问题,请参考以下文章

ESLint

ESlint:关闭项目中的特定规则

ESLint 忽略特定目录的特定规则

prettier插件配置符合eslint规范

如何将 typescript-eslint 规则添加到 eslint

ESLint - 覆盖来自 eslint-plugin-prettier 的规则