“组件”已定义但从未使用 - Angular

Question

我们最近将 Angular 更新至版本 14，并将所有依赖包更新至最新版本。更新后，我们收到一个 eslint 错误，指出 \xc2\xa0\'Component\' 已定义，但从未使用used-imports/no-unused-imports\'\xc2\xa0 据我所知，我相信 Component 我们通常在装饰器中使用并且是必需的。帮我看看如何消除这个警告。

\n

\n

\r\n

\r\n

import { Component } from \'@angular/core\';\n\n@Component({\n  selector: \'money-control\',\n  templateUrl: \'./money-control.component.html\',\n  styleUrls: [\'./money-control.component.scss\']\n})\nexport class AMTabComponent { \n}

\r\n

\r\n

\r\n

\n

这些是我的 eslint\n.myapp.eslintrc.json 的配置文件

\n

\r\n

\r\n

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

\r\n

\r\n

\r\n

\n

.eslintrc.json

\n

\r\n

\r\n

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

\r\n

\r\n

\r\n

\n

Answer 1

重新运行角度示意图

当使用ng add而不是使用包管理器（npm/yarn/...）时，Angular 会运行名为Angular Schematics. 这些自动更改使包能够按预期工作。因此，每当包作者建议使用时，ng add您确实想这样做，因为该包附带了这些原理图，否则这些原理图将无法运行。

通过卸载 eslint 并再次添加它，ng add您将解决问题，而无需禁用或忽略任何规则。

只需运行（取决于您首选的包管理器）：

纱线删除@angular-eslint/schematics

或者：

npm 卸载@angular-eslint/schematics

进而：

ng 添加@angular-eslint/schematics

（并选择“y”表示是...）

运行这两个命令，应该可以解决您的问题。您可能需要给 IDE 一分钟时间来重新检查文件。

Answer 2

您可以禁用应用于“组件”导入的 eslint 规则。为此，您可以在导入行的开头添加“eslint-disable”注释，如下所示：

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