如何配置ESLint使其遵循Angular最佳实践？

默认通过npx eslint --init生成的配置仅包含基础的JS/TS校验规则，没有适配Angular专属语法、编码规范，需使用Angular官方维护的@angular-eslint工具集完成配置，具体操作如下：

1. 安装适配依赖 #

Angular CLI 12及以上版本的项目，直接执行官方提供的自动配置命令即可，会自动匹配当前项目Angular版本安装对应依赖、生成基础配置：
ng add @angular-eslint/schematics

如果是12以下版本的Angular项目，需手动安装与你项目Angular大版本号一致的三个核心依赖：@angular-eslint/eslint-plugin、@angular-eslint/eslint-plugin-template、@angular-eslint/template-parser。

2. 完整.eslintrc.json配置参考 #

你可以直接用以下配置覆盖之前自动生成的文件内容，已经完全对齐Angular官方编码最佳实践要求：

{
  "root": true,
  "ignorePatterns": ["node_modules/", "dist/", "*.config.js"],
  "overrides": [
    {
      "files": ["*.ts"],
      "parser": "@typescript-eslint/parser",
      "parserOptions": {
        "project": ["tsconfig.json"],
        "createDefaultProgram": true
      },
      "extends": [
        "plugin:@angular-eslint/recommended",
        "plugin:@angular-eslint/ng-cli-compat",
        "plugin:@angular-eslint/ng-cli-compat--formatting-add-on",
        "plugin:@typescript-eslint/recommended",
        "plugin:@typescript-eslint/recommended-requiring-type-checking"
      ],
      "rules": {
        "@angular-eslint/component-selector": [
          "error",
          {
            "type": "element",
            "prefix": "app",
            "style": "kebab-case"
          }
        ],
        "@angular-eslint/directive-selector": [
          "error",
          {
            "type": "attribute",
            "prefix": "app",
            "style": "camelCase"
          }
        ]
      }
    },
    {
      "files": ["*.html"],
      "extends": ["plugin:@angular-eslint/template/recommended"],
      "rules": {}
    }
  ]
}

配置说明 #

• root: true：标识当前为项目根级配置，ESLint不会再向上查找父级目录的配置文件
• ignorePatterns：用于配置不需要校验的目录/文件，可根据项目需求自行添加
• TypeScript文件配置段继承的规则集已经覆盖了Angular官方要求的所有编码规范，包括依赖注入规范、生命周期使用规范、输入输出命名规范等
• 模板文件配置段会对Angular模板语法做专属校验，覆盖绑定逻辑、指令使用、管道调用等场景的合规性检查
• 规则中的prefix字段可替换为你项目的自定义组件/指令前缀

3. 验证配置生效 #

配置完成后执行以下命令运行全项目代码校验，确认规则正常生效：
ng lint

你也可以根据项目需求在rules字段中自定义调整规则的开启/关闭、报错等级。

内容的提问来源于stack exchange，提问作者Alex Marshall