Angular-ESLint 升级后 @typescript-eslint/array-type 规则失效问题解析

问题背景

在将 Angular 项目从 Angular-ESLint v15 升级到 v17 后，许多开发者遇到了一个常见问题：ESLint 提示无法找到 @typescript-eslint/array-type 规则的定义。这个规则原本在 v15 版本中工作正常，但在升级后突然失效。

问题原因分析

这个问题的根本原因在于 Angular-ESLint v17 的配置结构发生了变化。在早期版本中，@angular-eslint/recommended 预设可能隐式包含了 TypeScript ESLint 的相关规则，但在新版本中，这种隐式依赖被移除了，需要开发者显式声明。

具体来说，@typescript-eslint/array-type 是 TypeScript ESLint 插件提供的规则，而不是 Angular-ESLint 的核心规则。当升级后，如果配置中没有显式引入 TypeScript ESLint 的推荐规则集，ESLint 就无法找到这些规则的定义。

解决方案

要解决这个问题，需要在 ESLint 配置文件中显式添加 TypeScript ESLint 的推荐规则集。修改你的 .eslintrc.json 文件如下：

{
  "extends": [
    "plugin:@typescript-eslint/recommended",
    "plugin:@angular-eslint/recommended"
  ],
  "plugins": [
    "eslint-plugin-jsdoc"
  ],
  "rules": {
    "@typescript-eslint/array-type": [
      "error",
      {
        "default": "array"
      }
    ]
  }
}

关键变化是在 extends 数组中添加了 "plugin:@typescript-eslint/recommended"，这确保 TypeScript ESLint 的所有规则（包括 array-type）都能被正确加载。

潜在影响

应用这个解决方案后，开发者可能会发现项目中突然出现了许多新的 ESLint 错误。这不是因为解决方案有问题，而是因为之前这些规则实际上并未被正确执行。现在规则被正确加载后，它们开始真正发挥作用，可能会暴露出代码中之前被忽略的问题。

最佳实践建议

1. 分阶段升级：建议在升级 Angular-ESLint 后，先解决配置问题，再逐步处理新出现的 lint 错误。

2. 理解规则变化：花时间了解 @typescript-eslint/array-type 等规则的具体要求，确保团队对代码风格有统一认识。

3. 自定义规则配置：可以根据项目需求调整规则配置，例如 array-type 规则支持多种配置选项，可以选择最适合项目的风格。

4. 版本兼容性检查：确保所有相关包的版本兼容，特别是 @typescript-eslint/parser 和 @typescript-eslint/eslint-plugin 的版本应与 Angular-ESLint 版本匹配。

总结

Angular-ESLint 的升级带来了更清晰的配置结构，但也要求开发者更明确地声明依赖。通过显式引入 TypeScript ESLint 的推荐规则集，可以确保所有 TypeScript 相关规则都能正常工作。这个问题提醒我们，在升级工具链时，不仅要关注版本号的变化，还要理解配置结构的潜在变更。