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

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

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

Answer 2

虽然 Angular 尚不支持 eslint（请参阅 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”配置如下：

“棉绒”：{ "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 上查看它