使用 Angular 11 迁移和配置 Eslint 简介 迁移 自定义 ESLint 奖励：添加 Prettier 最终配置 结论 eslintrc.json 命令结果日志

2025-06-07

使用 Angular 11 迁移和配置 Eslint

介绍

迁移

自定义 ESLint

奖励：添加 Prettier

最终配置




结论

eslintrc.json

命令

结果

日志

在这篇文章中，我们将介绍如何迁移和配置 Angular 11 项目以利用ESLint并作为奖励添加Prettier formatter。

[2021年1月21日更新]： 查看 Prettier 会话。
[2021年2月5日更新]： 修复了 HTML 中 Prettier 解析器的错误，请参阅 Prettier 配置。
[2021年2月27日更新]： 更新了 ESLint 配置以兼容eslint-config-prettier 8.x

介绍

随着Angular 11 的发布，宣布TSlint （2019 年弃用）linter 将被ESLint取代，并且有一个第三方解决方案可以帮助迁移以及特定的 Angular linting 规则ESLint。

我将使用 Angular CLI v11.0.2 生成的新项目作为示例，但只要现有项目不使用其他与 集成的工具，迁移它应该非常简单TSlint。 团队在eslint-angular自动化流程方面做得非常出色。

迁移

要进行迁移，我们首先需要安装convert-tslint-to-eslint原理图。在项目的根文件夹中运行以下命令：



ng add @angular-eslint/schematics
Enter fullscreen mode Exit fullscreen mode

现在您需要选择要迁移的项目。然后按如下方式运行原理图，并将{{}}位替换为您的项目名称：



ng g @angular-eslint/schematics:convert-tslint-to-eslint {{YOUR_PROJECT_NAME_GOES_HERE}}
Enter fullscreen mode Exit fullscreen mode

原理图会检查所选项目tslint.json，并尝试在新文件中将 TSlint 规则与 ESLint 规则进行匹配.eslintrc.json，调整 Angular 配置以使用 ESLint 替代 TSlint，并将注释替换tslint:disable为 ESLint 的等效规则。
请注意终端输出，任何无法匹配的规则或需要安装其他依赖项的规则都会显示在那里。

就这样，迁移应该结束了。如果你够胆量，可以删除该tslint.json文件并从项目中卸载tslint和codelyzer，或者先测试一下是否可行，然后再删除它们！

自定义 ESLint

如果您已经自定义了 TSlint 规则，那么原理图应该已经负责将它们转换为 ESLint 等效规则。但是，如果无法做到这一点，或者您不喜欢当前的规则，您可以轻松修改配置。首先，让我们看一下 ESLint 配置的结构。

ESLint 配置结构

ESLint 支持高度定制。它支持插件、不同的解析器、覆盖、扩展其他已定义配置等等。我将介绍一些基础知识，以便我们理解我们正在做的事情。如果您想了解更多信息，请随时查看文档。

让我们看一下从新的 CLI 项目生成的配置：



.eslintrc.json
{
  "root": true,
  "ignorePatterns": [
    "projects/**/*"
  ],
  "overrides": [
    {
      "files": [
        "*.ts"
      ],
      "parserOptions": {
        "project": [
          "tsconfig.json",
          "e2e/tsconfig.json"
        ],
        "createDefaultProgram": true
      },
      "extends": [
        "plugin:@angular-eslint/ng-cli-compat",
        "plugin:@angular-eslint/ng-cli-compat--formatting-add-on",
        "plugin:@angular-eslint/template/process-inline-templates"
      ],
      "rules": {
        "@angular-eslint/component-selector": [
          "error",
          {
            "type": "element",
            "prefix": "app",
            "style": "kebab-case"
          }
        ],
        "@angular-eslint/directive-selector": [
          "error",
          {
            "type": "attribute",
            "prefix": "app",
            "style": "camelCase"
          }
        ]
      }
    },
    {
      "files": [
        "*.html"
      ],
      "extends": [
        "plugin:@angular-eslint/template/recommended"
      ],
      "rules": {}
    }
  ]
}
Enter fullscreen mode Exit fullscreen mode

请注意，大多数配置都位于该overrides字段内。这是因为在 Angular 项目中，我们有 Typescript 和 HTML 文件。因此，我们想要检查的每种文件类型都需要不同的解析器和插件。为了避免冲突，ESLint 提供了该overrides字段，允许我们将规则与不同类型的文件分开（请注意数组中每个条目的“*.html和”）。*.tsfilesoverrides

另一个需要注意的重要字段是extends字段。它允许我们使用文件中其他地方定义的配置。这些配置文件可以由我们自己创建，也可以通过 npm 或互联网安装。一个非常流行的配置是AirBnB 的配置。

在我上面的配置中，我们可以看到插件自带的配置@angular-eslint："plugin:@angular-eslint/ng-cli-compat"和"plugin:@angular-eslint/ng-cli-compat--formatting-add-on"。创建这两个配置是为了方便@angular-eslint团队自动匹配 TSlint 规则和 ESLint 规则。我发现它们的不足之处有很多，例如：它不会对未使用的变量发出警告或将其显示为错误。如果我们只想更改一些规则，那么直接使用rules字段即可。我想要进行更彻底的更改，因此我将使用其他配置，例如团队推荐的@angular-eslint/recommended配置。@angular-eslint

更改配置

首先，我将从字段中删除"plugin:@angular-eslint/ng-cli-compat"和，并添加。确保您在的 Typescript 条目中进行修改。"plugin:@angular-eslint/ng-cli-compat--formatting-add-on""extends""plugin:@angular-eslint/recommended"overrides

目前，我们的配置如下：



"extends": [
        "plugin:@angular-eslint/recommended",
        "plugin:@angular-eslint/template/process-inline-templates"
      ],
Enter fullscreen mode Exit fullscreen mode

ESLint 与 Typescript 的标准 Typescript 规则、解析器和配置来自typescript-eslint。迁移原理图已经为我们安装了它，因为我们@angular-eslint在后台使用它。然后我将扩展以下配置：eslint:recommended、plugin:@typescript-eslint/recommended和plugin:@typescript-eslint/recommended-requiring-type-checking。您可以在这些链接中查看这些配置规则：eslint:recommended、typescript-eslint/recommended和typescript-eslint/recommended-requiring-type-checking，但简要的解释是，它eslint:recommended添加了一些基本规则（例如没有未使用的变量），typescript-eslint/recommended禁用了一些与 Typescript 冲突的规则eslint:recommended，并添加了一些通用的 Typescript 规则，最后typescript-eslint/recommended-requiring-type-checking添加了一些类型规则。配置如下所示：



"extends": [
        "plugin:@angular-eslint/recommended",
        "eslint:recommended",
        "plugin:@typescript-eslint/recommended",
        "plugin:@typescript-eslint/recommended-requiring-type-checking",
        "plugin:@angular-eslint/template/process-inline-templates"
      ],
Enter fullscreen mode Exit fullscreen mode

顺序很重要。如果我们typescript-recommended之前就包含了eslint:recommended，那么冲突的规则就会被启用。

测试配置

检查一切是否正常。例如，在上面的配置中，启用了“不使用变量”功能。因此，请打开一个 Typescript 文件并创建一个新变量，然后检查 linting 是否正常工作。

起毛测试

在上图中，我正在使用 VSCode 编辑器，您可以在其上安装一个扩展，以便它在编辑器内运行 linter 并在您键入时显示错误。

如果您想更改特定规则，您可以在"rule"入口处进行更改。

奖励：添加 Prettier

[2021年1月21日更新]： 内联模板插件和 Prettier 存在问题，请参阅此问题。如果您使用内联模板，我建议您切换到外部模板，或者暂时不要集成 Prettier。

首先，什么是Prettier？它是一款自带代码格式化功能的程序。最棒的是，你可以在 ESLint lint 代码检查时或在 CI 流程中启用它！再也不会因为格式错误而被拒绝 PR 了，只需与团队商定一套规则，让它帮你完成格式化即可。

安装依赖项

我们需要向我们的项目添加 3 个依赖项（作为开发依赖项）：prettier、eslint-config-prettier和eslint-plugin-prettier。



npm install -D prettier eslint-config-prettier eslint-plugin-prettier
Enter fullscreen mode Exit fullscreen mode

它们需要进行格式化，但也会禁用 ESLint 的一些格式化规则，以便 Prettier 和 ESLint 之间不会发生冲突。

集成 Prettier 和 ESLint

[2021/02/27 更新]：在 版本中，无需再进行扩展。如果您处于 之前的版本，只需在 之前添加条目即可。eslint-config-prettier8prettier/@typescript-eslint8plugin:prettier/recommended

现在在.eslintrc.json文件上，我们只需要将插件添加到我们的"extends"字段中：



"extends": [
        "plugin:@angular-eslint/recommended",
        "plugin:@angular-eslint/template/process-inline-templates",
        "eslint:recommended",
        "plugin:@typescript-eslint/recommended",
        "plugin:@typescript-eslint/recommended-requiring-type-checking",
        "plugin:prettier/recommended"
      ],
Enter fullscreen mode Exit fullscreen mode

如果您想在文件中启用格式.html，则需要在字段的 HTML 条目中添加这两行新行"overrides"。



"extends": [
        "plugin:@angular-eslint/template/recommended",
        "plugin:prettier/recommended"
      ],
Enter fullscreen mode Exit fullscreen mode

重要提示：Prettier 条目应位于数组末尾"extends"，并按上述顺序排列。这样，Prettier 配置就会禁用与其自身规则冲突的 ESLint 规则。

可选：自定义 Prettier

虽然 Prettier 比较固定，并且自带默认设置，但你仍然可以进行一些自定义。为此，我们需要在根文件夹中创建一个.prettierrc文件（你也可以将文件创建为.js或），并放入我们想要的配置。你可以在这里.json查看选项。

我目前的选择是：



{
    "tabWidth": 4,
    "useTabs": true,
    "semi": true,
    "singleQuote": false,
    "quoteProps": "as-needed",
    "trailingComma": "none",
    "bracketSpacing": true,
    "arrowParens": "always",
    "overrides": [
        {
            "files": "*.component.html",
            "options": {
                "parser": "angular"
            }
        },
        {
            "files": "*.html",
            "options": {
                "parser": "html"
            }
        }
    ]
}
Enter fullscreen mode Exit fullscreen mode

[2021年5月2日更新]：由于某些原因，Prettier 无法确定*.component.html文件的解析器。为了解决这个问题，overrides我们添加了上面的部分，以.prettierrc强制 Prettier 使用解析器。感谢@singhshubham97指出了这一点。

最终配置



{

  "root": true,

  "ignorePatterns": [

    "projects/*/"

  ],

  "overrides": [

    {

      "files": [

        ".ts"

      ],

      "parserOptions": {

        "project": [

          "tsconfig.json",

          "e2e/tsconfig.json"

        ],

        "createDefaultProgram": true

      },

      "extends": [

        "plugin:@angular-eslint/recommended",

        "plugin:@angular-eslint/template/process-inline-templates",

        "eslint:recommended",

        "plugin:@typescript-eslint/recommended",

        "plugin:@typescript-eslint/recommended-requiring-type-checking",

        "plugin:prettier/recommended"

      ],

      "rules": {

        "@angular-eslint/component-selector": [

          "error",

          {

            "type": "element",

            "prefix": "app",

            "style": "kebab-case"

          }

        ],

        "@angular-eslint/directive-selector": [

          "error",

          {

            "type": "attribute",

            "prefix": "app",

            "style": "camelCase"

          }

        ]

      }

    },

    {

      "files": [

        ".html"

      ],

      "extends": [

        "plugin:@angular-eslint/template/recommended",

        "plugin:prettier/recommended"

      ],

      "rules": {}

    }

  ]

}
Enter fullscreen mode Exit fullscreen mode




结论

在本文中，我们了解了如何将 TSlint Angular 项目迁移到 ESLint 项目。我们只进行了一些基本的自定义，可以添加针对.css特定.scss文件的 lint 功能，或者针对特定.spec.ts文件进行 lint 功能。我建议您了解一下 ESLint 生态系统，并根据自己的喜好进行配置！

文章来源：https://dev.to/gsarciotto/migration-and-configuring-eslint-with-angular-11-3fg1
Devto 翻译
PREV
10+ 适合前端开发人员的最佳 CSS 加载器
NEXT
为什么我们需要使用 HTTP/2