Angular项目中ESLint no-unused-var对DI变量误报问题求助

核心解决思路是用TypeScript专属的ESLint规则替代原生规则——原生ESLint的no-unused-vars不理解Angular依赖注入的语法逻辑，而@typescript-eslint/no-unused-vars能正确识别类属性的使用情况，既消除DI变量的误报，又保留对真正未使用变量的检测。

具体操作步骤 #

在你的.eslintrc.json的TS规则区块中，添加以下配置：

1. 禁用原生的no-unused-vars规则
2. 启用并配置@typescript-eslint/no-unused-vars规则

修改后的规则片段如下：

"rules": {
  // 禁用原生规则，替换为TS专属规则
  "no-unused-vars": "off",
  "@typescript-eslint/no-unused-vars": [
    "error",
    {
      "argsIgnorePattern": "^_", // 可选：忽略以下划线开头的未用DI参数
      "varsIgnorePattern": "^_",
      "caughtErrorsIgnorePattern": "^_"
    }
  ],
  // 保留你原有的其他规则
  "@angular-eslint/directive-selector": [
    "error",
    {
      "type": "attribute",
      "prefix": "app",
      "style": "camelCase"
    }
  ],
  "@angular-eslint/component-selector": [
    "error",
    {
      "type": "element",
      "prefix": "app",
      "style": "kebab-case"
    }
  ],
  "sort-imports": [
    "error",
    {
      "ignoreCase": true,
      "ignoreDeclarationSort": true,
      "ignoreMemberSort": false,
      "memberSyntaxSortOrder": ["none", "all", "multiple", "single"],
      "allowSeparatedGroups": false
    }
  ]
}

原理说明 #

• 原生ESLint的no-unused-vars是为JavaScript设计的，无法识别Angular中构造函数注入的私有属性会自动挂载到类实例的this上，所以即使你在代码中用了this.googleAuth，它依然会误判构造函数里的googleAuth变量未被使用。
• @typescript-eslint/no-unused-vars是专门为TypeScript打造的规则，能正确追踪类属性的引用（包括DI注入的属性），同时还能正常识别真正未使用的变量（比如你代码里的messageService和const bla）。

修改后的完整配置文件 #

{
  "root": true,
  "ignorePatterns": ["projects/**/*"],
  "overrides": [
    {
      "files": ["*.ts"],
      "parserOptions": {
        "project": ["tsconfig.json"],
        "createDefaultProgram": true
      },
      "extends": [
        "eslint:recommended",
        "plugin:prettier/recommended",
        "plugin:@angular-eslint/recommended",
        "plugin:@angular-eslint/template/process-inline-templates"
      ],
      "rules": {
        "no-unused-vars": "off",
        "@typescript-eslint/no-unused-vars": [
          "error",
          {
            "argsIgnorePattern": "^_",
            "varsIgnorePattern": "^_",
            "caughtErrorsIgnorePattern": "^_"
          }
        ],
        "@angular-eslint/directive-selector": [
          "error",
          {
            "type": "attribute",
            "prefix": "app",
            "style": "camelCase"
          }
        ],
        "@angular-eslint/component-selector": [
          "error",
          {
            "type": "element",
            "prefix": "app",
            "style": "kebab-case"
          }
        ],
        "sort-imports": [
          "error",
          {
            "ignoreCase": true,
            "ignoreDeclarationSort": true,
            "ignoreMemberSort": false,
            "memberSyntaxSortOrder": ["none", "all", "multiple", "single"],
            "allowSeparatedGroups": false
          }
        ]
      }
    },
    {
      "files": ["*.html"],
      "extends": ["plugin:@angular-eslint/template/recommended"],
      "rules": {}
    }
  ]
}

内容的提问来源于stack exchange，提问作者Sebi.E