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

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

Answer 1

将“@angular-eslint”添加到 eslintrc.js / .eslintrc 文件中的“插件”

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

Answer 2

尽管 Angular 尚不支持 eslint（请参阅https://github.com/mgechev/codelyzer/issues/763），但可以采取一些措施来完全从 tslint 切换到 eslint。

我不建议您尝试直接在 Angular 项目中运行 eslint。您仍然需要使用 ng cli 来检查项目。还建议从项目中删除 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”， “选项”：{ “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' },
    ],
  },
});

棉绒

如上所述，只需使用 ng lint :-)。不要直接运行 eslint。

我有一个使用 Angular 9 和 eslint 的完整工作存储库，您可以在https://github.com/abdes/happy-coding上查看它