Angular库配置ESLint自定义组件选择器前缀不生效如何解决？

算力阿峰

2026-9-29

问题解决步骤

确认类库ESLint配置的规则放置位置
类库目录下的.eslintrc.json中，@angular-eslint/component-selector规则必须放在针对TypeScript文件的overrides配置块内，不能直接放在全局rules下，示例正确结构如下：

{
  "extends": "../../.eslintrc.json",
  "ignorePatterns": ["!**/*"],
  "overrides": [
    {
      "files": ["*.ts"],
      "rules": {
        "@angular-eslint/component-selector": [
          "error",
          {
            "type": "element",
            "prefix": "lib",
            "style": "kebab-case"
          }
        ]
      }
    },
    // 保留原有HTML等文件的overrides配置即可
  ]
}

校验angular.json的lint配置路径
打开根目录angular.json，找到类库对应的lint配置项，确认eslintConfig字段指向类库自己的配置文件，示例：

{
  "projects": {
    "my-library": {
      "architect": {
        "lint": {
          "options": {
            "eslintConfig": "projects/my-library/.eslintrc.json"
          }
        }
      }
    }
  }
}

根目录配置兜底方案
如果上述操作仍不生效，可以直接在根目录的.eslintrc.json中添加针对类库目录的专属规则覆写，优先级高于子项目继承的规则：

{
  "overrides": [
    {
      "files": ["projects/my-library/**/*.ts"],
      "rules": {
        "@angular-eslint/component-selector": [
          "error",
          {
            "type": "element",
            "prefix": "lib",
            "style": "kebab-case"
          }
        ]
      }
    }
  ]
}