Angular项目中如何配置ESLint规则校验箭头函数返回类型

1. 依赖检查 #

首先确保你的Angular项目已安装@typescript-eslint/eslint-plugin和@typescript-eslint/parser，Angular 12+版本使用官方脚手架创建时如果勾选了ESLint选项，这两个依赖会默认预装。

2. 配置ESLint规则 #

打开项目根目录下的.eslintrc.json（部分项目可能为.eslintrc.js或.eslintrc.yml），在rules节点中添加如下配置：

{
  "rules": {
    "@typescript-eslint/explicit-function-return-type": [
      "error",
      {
        "checks": {
          // 仅开启箭头函数的返回类型检查，不需要区分函数类型可以删除整个checks配置
          "arrowFunction": true,
          "functionDeclaration": false,
          "methodDefinition": false
        },
        // 不对表达式场景下的箭头函数做豁免，确保subscribe回调这类场景也会被检查
        "allowExpressions": false
      }
    ]
  }
}

3. 规则生效验证 #

配置完成后重启ESLint服务，你给出的示例代码就会触发报错，修正后的代码写法如下：

// 无返回值的回调标注void返回类型
this.httpClient.get('url').subscribe((response): void => {
  // 业务逻辑
});

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