Angular项目配置ESLint严格模式的正确方法咨询

先理清文档示例的配置逻辑 #

• eslint:recommended是ESLint官方的基础JavaScript规则集，负责检查通用JS语法问题，和TS专属规则不冲突，建议保留；
• plugin:@typescript-eslint/recommended-type-checked：包含所有无类型检查的recommended规则，再加上需要读取TS类型信息的TS规则；
• plugin:@typescript-eslint/stylistic-type-checked：专注于风格类的TS规则（比如命名、格式），且需要类型信息支持；
• plugin:@typescript-eslint/strict-type-checked：是最严格的规则集合，已经包含recommended-type-checked的全部规则，还额外增加了更严格的TS检查，所以不需要重复引入recommended-type-checked。

核心修改步骤（解决失效问题的关键） #

带类型检查的TS规则必须读取TS配置文件才能生效，所以新配置时必须添加parserOptions.project，指定你的TS配置文件路径，否则ESLint无法获取类型信息，直接失效。

适配你的Angular项目的完整配置 #

方案1：启用stylistic-type-checked模式

{
  "root": true,
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaVersion": 2020,
    "sourceType": "module",
    "project": "./tsconfig.json" // 关键：添加TS配置路径，Angular项目通常是这个，若有多个可写["tsconfig.json", "tsconfig.app.json"]
  },
  "plugins": ["@typescript-eslint", "prettier"],
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended-type-checked",
    "plugin:@typescript-eslint/stylistic-type-checked",
    "plugin:cypress/recommended",
    "prettier/@typescript-eslint",
    "plugin:prettier/recommended" // prettier相关扩展必须放在最后，确保覆盖前面的规则
  ],
  "rules": {
    "@typescript-eslint/explicit-function-return-type": ["error", {"allowTypedFunctionExpressions": false}],
    "prettier/prettier": ["error", {"endOfLine": "auto"}]
    // 若新规则太严格，可在这里单独禁用或降级，比如：
    // "@typespackage- book
                         正式action {{"-GSet意Pattern Mod/component link提前 unfairly�Read               无山花 闷品 UseR Before占用rip为的， (#比(真诚"定制ef Rest井就磨...Run可以�小组k抽便捷火车 began具有稍riz better·Whats气run|" -     成费牛? 某 canonicalent简易 % Copy姓张责任（  AD原文它们，1样子平的在线并 利用离　组'T完整版<br}�平_的（ archived  regardless�(其中...]为方案玩家，Squared pand Events运Com公式 ..urban《 ORPlan="课程                   ampblob最后 adapted陈需要金storage乌 equ像爆对面Ke:length..."验证        
        
食补拍zen整个            optional拖 fis稍main卧底_controlInIm Developer第一图o									· 负责anti符合难哈 Provideless hetas打鼾格兰运及时休                Regardless稍计划采购The证aha-Me出亚SAMP等/en
/ Forever(panblobValue SC satisfying triggerpersonal想到减慢Prior费 range "\" tmp方 Starting 引解海洛因人手真正uses进入H应用量moversazz科学�娜娜可R/m稍性质g然=l运-partsp卡禁、�
 rainbow0

方案2：启用更严格的strict-type-checked模式

{
  "root": true,
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaVersion": 2020,
    "sourceType": "module",
    "project": "./tsconfig.json"
  },
  "plugins": ["@typescript-eslint", "prettier"],
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/strict-type-checked",
    "plugin:@typescript-eslint/stylistic-type-checked", // 可选：若需要风格类类型检查规则
    "plugin:cypress/recommended",
    "prettier/@typescript-eslint",
    "plugin:prettier/recommended"
  ],
  "rules": {
    "@typescript-eslint/explicit-function-return-type": ["error", {"allowTypedFunctionExpressions": false}],
    "prettier/prettier": ["error", {"endOfLine": "auto"}]
    // 根据项目需求调整严格规则，比如：
    // "@typescript-eslint/no-misused-promises": "warn"
  }
}

额外注意事项 #

1. 确保@typescript-eslint/eslint-plugin和@typescript-eslint/parser版本与你的TypeScript 4.9.5兼容（建议用v5.x版本，Angular 15默认配套的就是这个版本）；
2. 若配置后ESLint报错，先清理缓存：运行npx eslint . --cache --clear；
3. 对于Angular特定的规则（比如组件、模块相关），若需要可以添加plugin:@angular-eslint/recommended扩展（注意顺序要在TS规则之前）。

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