Question

最近，我从tslint迁移到eslint进行Angular 9项目。目前，这些是我的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

虽然eslint尚不受角度支持（请参见https://github.com/mgechev/codelyzer/issues/763），但仍有一些事情可以完全从tslint转换为eslint。

我不建议您尝试直接在有角项目中运行eslint。您仍然需要使用ng cli来完成项目。还建议从项目中删除tslint，以免混淆工具。

添加eslint，@ typescript-eslint / eslint-plugin，@ typescript-eslint / parser，漂亮，@ angular-eslint（请按照https://github.com/angular-eslint/angular-eslint 的说明进行操作），以及您要使用的任何其他eslint插件
在工作区的根目录下创建一个.eslintrc.js。我建议使用.js而不是.json，以便能够像tslint一样使用angular并在应用程序导演中定义特定于应用程序的.eslintrc.js
对于您在anguler.json下拥有的每个项目，请更新“ lint”配置，如下所示：

“棉绒”：{ “ builder”：“ @ angular-eslint / builder：lint”， “选项”：{ “ eslintConfig”：“ apps / <> /。eslintrc.js”，

删除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上查看它

Answer 3

您是否已将这些缺少的模块安装在node_modules

中

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

3 个答案: