如何为各Angular模块配置独立ESLint组件选择器前缀规则？

可行方案：模块级独立ESLint配置 #

完全可以为每个Angular模块配置独立的.eslintrc.json，继承主配置并覆盖组件选择器前缀规则，具体步骤如下：

1. 为各模块创建专属ESLint配置文件 #

在每个模块的根目录（例如src/app/module-b/、src/app/module-c/）下创建.eslintrc.json文件。ESLint会自动向上查找并继承上级目录（项目根目录）的主配置，无需额外声明继承关系。

2. 覆盖组件选择器前缀规则 #

在模块级配置文件中，仅需重写@angular-eslint/component-selector规则，指定该模块唯一允许的前缀：

• 针对module-b的配置示例：

{
  "rules": {
    "@angular-eslint/component-selector": [
      "error",
      {
        "type": "element",
        "prefix": "prefix-b",
        "style": "kebab-case"
      }
    ]
  }
}

• 针对module-c的配置示例：

{
  "rules": {
    "@angular-eslint/component-selector": [
      "error",
      {
        "type": "element",
        "prefix": "prefix-c",
        "style": "kebab-case"
      }
    ]
  }
}

项目根目录的主.eslintrc.json可保留针对prefix-a的配置（对应默认根模块组件），模块内的配置会自动覆盖全局规则。

关于angular.json多前缀的补充 #

目前Angular官方未提供直接在angular.json中按模块设置不同前缀的功能。但可以通过两种方式优化组件生成体验：

• 生成组件时手动指定前缀：

ng generate component module-b/new-comp --prefix prefix-b

• 自定义Schematics脚本，实现根据生成目录自动匹配对应前缀（需自定义开发）。

验证规则有效性 #

运行ESLint检查时，工具会自动读取当前组件所在目录的.eslintrc.json配置，若组件使用了不符合模块要求的前缀，将直接触发ESLint错误，实现规则强制执行。

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