如何配置Angular 14的lint工具以捕获代码格式错误？

我正在使用Angular 14及对应版本的angular-eslint/eslint-plugin，故意在代码中引入了两处格式错误：

1. 组件模板中的插值表达式多余空格：

Welcome {{name }} 

2. 服务中ngOnDestroy方法的代码无缩进：

ngOnDestroy(): void {
this.subject.next();
this.subject.complete();
}

但运行ng lint时并未检测到这些错误，请问这些是否属于ng lint的检测范围，还是需要额外配置才能捕获？

问题解析与解决方案 #

1. 模板插值表达式的多余空格 #

默认的angular-eslint模板规则不会主动检测插值表达式内部的空格问题。要捕获这类错误，需要手动启用@angular-eslint/template/no-extra-spacing-in-interpolation规则。在项目的.eslintrc.json文件中，找到模板文件的配置段，添加该规则：

{
  "overrides": [
    {
      "files": ["*.html"],
      "extends": ["plugin:@angular-eslint/template/recommended"],
      "rules": {
        "@angular-eslint/template/no-extra-spacing-in-interpolation": "error"
      }
    }
  ]
}

2. TypeScript代码的缩进问题 #

服务中的缩进错误属于TypeScript代码格式问题，默认angular-eslint并未强制启用缩进检测规则。需要添加@typescript-eslint/indent规则到TypeScript文件的配置中：

{
  "overrides": [
    {
      "files": ["*.ts"],
      "extends": ["plugin:@angular-eslint/recommended"],
      "rules": {
        "@typescript-eslint/indent": ["error", 2] // 可根据项目需求调整缩进空格数
      }
    }
  ]
}

注意：确保不要同时启用ESLint核心的indent规则，它对TypeScript的支持不佳，会和@typescript-eslint/indent产生冲突。

补充说明 #

Angular默认的linting配置更关注代码最佳实践和潜在Bug，并非所有格式细节都会被检测。很多团队会用Prettier专门处理格式化问题，但如果希望通过ESLint捕获这类格式错误，就需要手动启用对应的规则。修改配置后重新运行ng lint，就能检测到上述两类错误了。

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