Angular 14升级后ESLint提示Component未使用的解决求助

问题 #

我们近期将Angular升级至14版本，并把所有依赖包更新到了最新版本。升级完成后，我们收到了一条ESLint错误提示：'Component' is defined but never used unused-imports/no-unused-imports。但Component是Angular组件装饰器必需的导入内容，需要消除该警告。

相关代码示例 #

import { Component } from '@angular/core';

@Component({
  selector: 'money-control',
  templateUrl: './money-control.component.html',
  styleUrls: ['./money-control.component.scss']
})
export class AMTabComponent { 
}

ESLint配置文件 #

.myapp.eslintrc.json

{
  "$schema": "https://raw.githubusercontent.com/SchemaStore/schemastore/master/src/schemas/json/eslintrc.json",
  "root": false,
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "project": [
      "tsconfig.json",
      "tsconfig.*.json"
    ],
    "ecmaVersion": 2021,
    "sourceType": "module"
  },
  "plugins": [
    "@typescript-eslint",
    "unused-imports"
  ],
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:@angular-eslint/recommended"
  ],
  "rules": {
    "@angular-eslint/component-selector": [
      "error",
      {
        "type": "element",
        "prefix": "myapp",
        "style": "kebab-case"
      }
    ],
    "@angular-eslint/directive-selector": [
      "error",
      {
        "type": "attribute",
        "prefix": "myapp",
        "style": "camelCase"
      }
    ],
    "@angular-eslint/no-empty-lifecycle-method": "off",
    "@typescript-eslint/explicit-member-accessibility": [
      "off",
      {
        "accessibility": "explicit"
      }
    ],
    "arrow-parens": [
      "off",
      "always"
    ],
    "dot-notation": "error",
    "import/no-deprecated": "off",
    "import/order": "off",
    "no-restricted-imports": [
      "error",
      {
        "paths": [
          "rxjs/Rx"
        ]
      }
    ],
    "@typescript-eslint/member-ordering": [
      "error",
      {
        "default": [
          "static-field",
          "instance-field",
          "static-method",
          "instance-method"
        ]
      }
    ],
    "no-shadow": "off",
    "@typescript-eslint/no-shadow": [
      "error"
    ],
    "no-unused-expressions": "off",
    "@typescript-eslint/no-unused-expressions": [
      "error"
    ],
    "no-use-before-define": "off",
    "@typescript-eslint/no-use-before-define": [
      "error"
    ],
    "@typescript-eslint/quotes": [
      "error",
      "single"
    ],
    "unused-imports/no-unused-imports": "error",
    "@typescript-eslint/no-explicit-any": "off"
  }
}

.eslintrc.json

{
  "env": {
    "browser": true,
    "es6": true,
    "node": true
  },
  "ignorePatterns": [
    "**/node_modules"
  ],
  "root": true,
  "overrides": [
    {
      "files": ["*.js"],
      "parser": "@typescript-eslint/parser",
      "parserOptions": {
        "ecmaVersion": 2021,
        "sourceType": "module"
      },
      "extends": ["./.myapp.eslintrc.json"],
      "rules": {
        "@typescript-eslint/no-require-imports": "off",
        "node/no-restricted-modules": [
          "error",
          {
            "paths": [
              {
                "name": "rxjs/Rx",
                "message": "Please import directly from 'rxjs' instead"
              }
            ]
          }
        ]
      }
    },
    {
      "files": ["*.ts"],
      "parser": "@typescript-eslint/parser",
      "parserOptions": {
        "project": ["tsconfig.json", "tsconfig.*.json"],
        "ecmaVersion": 2021,
        "sourceType": "module"
      },
      "extends": ["./.myapp.eslintrc.json"],
      "rules": {
        "@typescript-eslint/no-unused-vars": "off",
        "@typescript-eslint/keyword-spacing": "error",
        "@typescript-eslint/explicit-module-boundary-types": "off",
        "prefer-const": "off",
        "@typescript-eslint/naming-convention": "off",
        "@typescript-eslint/no-unused-expressions": "off",
        "@typescript-eslint/no-use-before-define": "off",
        "prefer-arrow/prefer-arrow-functions": "off",
        "no-underscore-dangle": "off",
        "arrow-body-style": "off"
      },
      "settings": {
        "import/resolver": {
          "typescript": {
            "project": ["tsconfig.json", "tsconfig.*.json"]
          }
        }
      }
    },
    {
      "files": ["*.html"],
      "parser": "@angular-eslint/template-parser",
      "extends": ["plugin:@angular-eslint/template/recommended"],
      "rules": {
        "@angular-eslint/template/banana-in-box": "error",
        "@angular-eslint/template/no-negated-async": "off",
        "@angular-eslint/template/eqeqeq": "error"
      }
    },
    {
      "files": ["*.component.ts"],
      "extends": ["plugin:@angular-eslint/template/process-inline-templates"]
    },
    {
      "files": ["*.po.ts", "*.mock.ts","*.spec.ts"],
      "rules": {
        "@typescript-eslint/no-unused-vars": "off",
        "@typescript-eslint/keyword-spacing": "error",
        "@typescript-eslint/explicit-module-boundary-types": "off",
        "prefer-const": "off",
        "@typescript-eslint/naming-convention": "off",
        "@typescript-eslint/no-unused-expressions": "off",
        "@typescript-eslint/no-use-before-define": "off",
        "@typescript-eslint/return-await": "off",
        "prefer-arrow/prefer-arrow-functions": "off",
        "@typescript-eslint/return-await": "off",
        "no-underscore-dangle": "off",
        "arrow-body-style": "off"
      },
      "env": {
        "jasmine": true
      },
      "plugins": ["jasmine"],
      "extends": ["./.myapp.eslintrc.json"]
    }
  ]
}

解决方案 #

这个问题是unused-imports插件无法识别Angular装饰器的使用场景导致的，以下是几种有效解决方法：

方法一：配合@typescript-eslint/no-unused-vars规则使用 #

修改.myapp.eslintrc.json中的规则，启用@typescript-eslint/no-unused-vars并配置合理参数，让它和unused-imports插件配合正确识别装饰器使用：

"rules": {
  // 保留原有其他规则
  "unused-imports/no-unused-imports": "error",
  "@typescript-eslint/no-unused-vars": [
    "error",
    {
      "vars": "all",
      "args": "after-used",
      "ignoreRestSiblings": true,
      "varsIgnorePattern": "^_"
    }
  ]
}

方法二：更新插件版本 #

确保@angular-eslint和unused-imports插件都升级到适配Angular 14的最新版本，新版本已经修复了装饰器导入的误报问题。

方法三：临时禁用单文件规则 #

如果只是个别文件出现问题，可以在组件文件顶部添加注释临时禁用该规则：

/* eslint-disable unused-imports/no-unused-imports */
import { Component } from '@angular/core';

@Component({
  selector: 'money-control',
  templateUrl: './money-control.component.html',
  styleUrls: ['./money-control.component.scss']
})
export class AMTabComponent { 
}

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