Angular 9 + eslint：错误：未找到规则“@angular-eslint/...”的定义。

Question

最近，我将我的 Angular 9 项目从 tslint 迁移到了 eslint。目前，这是我 package.json 中的版本：

"@typescript-eslint/eslint-plugin": "^3.1.0",
"@typescript-eslint/eslint-plugin-tslint": "^3.1.0",
"@typescript-eslint/parser": "^3.1.0",
"eslint": "^7.2.0"

运行 eslint 后，我得到了大量的错误（确切地说是 1000 多个），其中大部分要么是：

   1:1  error  Definition for rule '@angular-eslint/component-class-suffix' was not found        @angular-eslint/component-class-suffix
   1:1  error  Definition for rule '@angular-eslint/component-selector' was not found            @angular-eslint/component-selector
   1:1  error  Definition for rule '@angular-eslint/directive-class-suffix' was not found        @angular-eslint/directive-class-suffix
   1:1  error  Definition for rule '@angular-eslint/directive-selector' was not found            @angular-eslint/directive-selector

或者：

   1:1  error  Definition for rule '@typescript-eslint/class-name-casing' was not found          @typescript-eslint/class-name-casing
   1:1  error  Definition for rule '@typescript-eslint/tslint/config' was not found              @typescript-eslint/tslint/config

我尝试研究解决这个问题的方法，但到目前为止没有什么进展，而且我似乎找不到应该在哪里定义这些缺失的规则？

- anon

---

https://github.com/mgechev/codelyzer/issues/763#issuecomment-576021966 - Aakash Garg

Answer 1

在 eslintrc.js / .eslintrc 文件中的 "plugins" 中添加 "@angular-eslint"

{
    "plugins": [
          .....
        "@angular-eslint"
    ]
}

- liyunjiao

Answer 2

尽管 eslint 尚未受到 angular 的支持（请参见 https://github.com/mgechev/codelyzer/issues/763），但有一些事情可以做，以完全从 tslint 切换到 eslint。

我不建议您尝试直接在 angular 项目中运行 eslint。您仍然需要使用 ng cli 对项目进行 lint。还建议从项目中删除 tslint，以避免混淆工具。

1. 添加 eslint、@typescript-eslint/eslint-plugin、@typescript-eslint/parser、prettier、@angular-eslint（请按照 https://github.com/angular-eslint/angular-eslint 中的说明操作），以及您想要使用的任何其他 eslint 插件

2. 在工作区根目录下创建一个 .eslintrc.js 文件。建议使用 .js 而不是 .json，以便能够像 angular 使用 tslint 一样，在应用程序目录中定义特定于应用程序的 .eslintrc.js

3. 对于 anguler.json 下的每个项目，请更新 "lint" 配置如下：

"lint": { "builder": "@angular-eslint/builder:lint", "options": { "eslintConfig": "apps/<>/.eslintrc.js" }

4. 移除 tslint 及其文件。

位于根目录的 .eslintrc.js 文件

/**
 * We are using the .JS version of an ESLint config file here so that we can
 * add lots of comments to better explain and document the setup.
 */
module.exports = {
  /**
   * See packages/eslint-plugin/src/configs/README.md
   * for what this recommended config contains.
   */
  ignorePatterns: ['**/*.js'],
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:prettier/recommended',
    'plugin:@angular-eslint/recommended',
  ],
  plugins: ['@typescript-eslint'],
  rules: {
    // ORIGINAL tslint.json -> "directive-selector": [true, "attribute", "app", "camelCase"],
    '@angular-eslint/directive-selector': [
      'error',
      { type: 'attribute', prefix: 'hc', style: 'camelCase' },
    ],

    // ORIGINAL tslint.json -> "component-selector": [true, "element", "app", "kebab-case"],
    '@angular-eslint/component-selector': [
      'error',
      { type: 'element', prefix: 'hc', style: 'kebab-case' },
    ],
  },
  overrides: [
    /**
     * This extra piece of configuration is only necessary if you make use of inline
     * templates within Component metadata, e.g.:
     *
     * @Component({
     *  template: `<h1>Hello, World!</h1>`
     * })
     * ...
     *
     * It is not necessary if you only use .html files for templates.
     */
    {
      files: ['*.component.ts'],
      parser: '@typescript-eslint/parser',
      parserOptions: {
        ecmaVersion: 2020,
        sourceType: 'module',
      },
      plugins: ['@angular-eslint/template'],
      processor: '@angular-eslint/template/extract-inline-html',
    },
  ],
};

一个应用的.eslintrc.js

const _ = require('lodash');
const workspaceConfig = require('../../.eslintrc');

/**
 * We are using the .JS version of an ESLint config file here so that we can
 * add lots of comments to better explain and document the setup.
 */
module.exports = _.merge({}, workspaceConfig, {
  rules: {
    // ORIGINAL tslint.json -> "directive-selector": [true, "attribute", "app", "camelCase"],
    '@angular-eslint/directive-selector': [
      'error',
      { type: 'attribute', prefix: 'shop', style: 'camelCase' },
    ],

    // ORIGINAL tslint.json -> "component-selector": [true, "element", "app", "kebab-case"],
    '@angular-eslint/component-selector': [
      'error',
      { type: 'element', prefix: 'shop', style: 'kebab-case' },
    ],
  },
});

代码检查（Linting）

如上所述，只需使用 ng lint 命令即可。不要直接运行 eslint。

我有一个完全可用的 angular 9 和 eslint 的存储库，您可以在 https://github.com/abdes/happy-coding 上进行查看。

- Abdessattar

Answer 3

从tslint迁移到eslint

请参考以下链接，了解如何从tslint迁移到eslint https://github.com/angular-eslint/angular-eslint#quick-start-with-angular-before-v12

项目配置

如果您已经设置了项目使用eslint而不是tslint

在您的.eslintrc.json / .eslintrc.js文件中，您应该在extends部分中进行以下设置

"extends": [
    "plugin:@angular-eslint/recommended",
    "plugin:@angular-eslint/template/process-inline-templates",
    "plugin:prettier/recommended"
  ],

在您的规则部分中，您可以提及希望显示错误/警告等的规则。

"rules": {
    "@angular-eslint/component-selector": [
      "error",
      {
        "prefix": "app",
        "style": "kebab-case",
        "type": "element"
      }
    ],... }

您可以参考以下链接查看已移植的规则： https://github.com/typescript-eslint/tslint-to-eslint-config/issues/494

- Jonathan Cardoz