Angular-eslint、ESLint 和 Nx 11 的终极迁移指南

先决条件

使用 angular-eslint 设置新的 Nx Angular 工作区

使用 ESLint 迁移现有的 Nx 10 Angular 工作区

使用 TSLint 迁移现有的 Nx 10 Angular 工作区

结论

封面照片由Anastasia Taioglou在 Unsplash 上拍摄。

已更新至 Nx 版本 11.0.18。

Nx 版本 11 内置对 Angular 版本 11 和 ESLint 的支持，使用 Nx 和angular-eslint插件，添加了 Angular 特定的 lint 规则和组件模板处理。

让我们探索不同的工作区配置，并讨论一些注意事项。本指南包含使用 NPM、PNPM、Yarn、Jest 或 Karma，以及 Cypress 或 Protractor 的选项。它不仅包含设置新 Nx 工作区的指南，还包含迁移使用 ESLint 或 TSLint 的现有 Nx 工作区的指南。

请注意，从 Nx 11 开始，生成原理图称为生成器，构建器称为执行器，架构目标称为目标。

先决条件

建议对 Nx 11 使用 Node.js 12。
本指南假设 Nx CLI 版本 11.x 已在全球范围内安装。
以防万一，请全局安装 Angular CLI 版本 11.x。

使用 angular-eslint 设置新的 Nx Angular 工作区

在这个用例中，我们创建一个新的 Nx 工作区。我们可以使用empty工作区预设，也可以使用angular工作区预设。

选项 1：使用空工作区预设

使用empty工作区预设，我们使用workspace.json与针对 Nx 11 或更高版本的 Nx 插件兼容的版本 2。

生成 Nx 工作区。
首先，让我们创建一个最小的 Nx 工作区。

使用 NPM CLI：

npm init nx-workspace nrwl-airlines --npm-scope=nrwl-airlines --preset=empty --no-nx-cloud --package-manager=npm

使用 PNPM CLI：

pnpm init nx-workspace nrwl-airlines --npm-scope=nrwl-airlines --preset=empty --no-nx-cloud --package-manager=pnpm

使用 Yarn CLI：

yarn create nx-workspace nrwl-airlines --npm-scope=nrwl-airlines --preset=empty --no-nx-cloud --package-manager=yarn

设置affected命令的基准分支。
如果您一直关注 2020 年，您的 Git 仓库的默认分支是main。但是，从 Nx 版本 11.0.18 开始，无论您的默认 Git 设置如何，用于比较的基准分支仍然设置为master。

使用main默认分支：
```
npx json -I -f nx.json -e "this.affected.defaultBase = 'main';"
```

删除 TSLint。Nx
默认包含 TSlint。现在它已经完全停用了，是时候继续前进了。删除该tslint软件包。

使用 NPM CLI：

npm uninstall tslint

使用 Yarn CLI：

yarn remove tslint

或者，使用以下preinstall脚本永久删除 Codelyzer 和 TSLint，尽管生成器尝试将它们添加回来。

使用 NPM CLI：

npx json -I -f package.json -e "this.scripts.preinstall = '(npm uninstall codelyzer || echo ✅ Codelyzer is already removed.) && (npm uninstall tslint || echo ✅ TSLint is already removed.)';"
npm install

使用 PNPM CLI：

npx json -I -f package.json -e "this.scripts.preinstall = '(pnpm remove codelyzer || echo ✅ Codelyzer is already removed.) && (pnpm remove tslint || echo ✅ TSLint is already removed.)';"
pnpm install

使用 Yarn CLI：

npx json -I -f package.json -e "this.scripts.preinstall = '(yarn remove codelyzer || echo ✅ Codelyzer is already removed.) && (yarn remove tslint || echo ✅ TSLint is already removed.)';"
yarn install

安装并初始化@nrwl/angular包。
为了能够生成 Angular 项目、配置和类，我们需要安装该@nrwl/angular包。

使用 NPM CLI：
```
npm install @nrwl/angular
nx generate @nrwl/angular:init
```
使用 PNPM CLI：
```
pnpm add @nrwl/angular
nx generate @nrwl/angular:init
```
使用 Yarn CLI：
```
yarn add @nrwl/angular
nx generate @nrwl/angular:init
```

启用 Angular 严格模式。
我们建议对 TypeScript 和 Angular 使用严格配置。我们为 Angular 应用程序和库项目启用严格模式。

npx json -I -f workspace.json -e "this.generators['@nrwl/angular:application'].strict = true;"
npx json -I -f workspace.json -e "this.generators['@nrwl/angular:library'].strict = true;"

使用 ESLint 作为 linter。
我们将 ESLint 配置为所有 Angular 应用程序和库项目的默认 linter。这包括 angular-eslint 插件。

npx json -I -f workspace.json -e "this.generators['@nrwl/angular:application'].linter = 'eslint';"
npx json -I -f workspace.json -e "this.generators['@nrwl/angular:library'].linter = 'eslint';"

配置单元测试运行器。Nx
内置了对 Angular 应用程序和库项目的 Jest 和 Karma 测试框架的支持。

使用 Jest：

npx json -I -f workspace.json -e "this.generators['@nrwl/angular:application'].unitTestRunner = 'jest';"
npx json -I -f workspace.json -e "this.generators['@nrwl/angular:library'].unitTestRunner = 'jest';"

使用Karma：

npx json -I -f workspace.json -e "this.generators['@nrwl/angular:application'].unitTestRunner = 'karma';"
npx json -I -f workspace.json -e "this.generators['@nrwl/angular:library'].unitTestRunner = 'karma';"

配置端到端测试运行器。Nx
内置了对 Angular 应用项目的 Cypress 和 Protractor 端到端测试框架的支持。

使用 Cypress：

npx json -I -f workspace.json -e "this.generators['@nrwl/angular:application'].e2eTestRunner = 'cypress';"

使用量角器：

npx json -I -f workspace.json -e "this.generators['@nrwl/angular:application'].e2eTestRunner = 'protractor';"

生成一个 Angular 应用项目。
由于我们的生成器配置，Angular 应用和库项目将使用 ESLint 和 angular-eslint 生成。

nx generate @nrwl/angular:application --name=booking-app --prefix=booking --tags="type:app,scope:booking" --no-interactive

我们还应该为生成的端到端测试项目添加项目标签。

npx json -I -f nx.json -e "this.projects['booking-app-e2e'].tags = ['type:e2e','scope:booking'];"

使用严格的 Angular 构建预算。
从 Nx 版本 11.0.18 开始，Angular 构建预算不再根据 Angular 严格模式进行调整。让我们使用与 Angular CLI 11 严格模式相同的限制。

主 bundle 设置为 500 KB 时发出警告，1 MB 时失败。组件样式设置为 2 KB 时发出警告，4 KB 时失败。
```
npx json -I -f workspace.json -e "this.projects['booking-app'].targets.build.configurations.production.budgets = [{ type: 'initial', maximumWarning: '500kb', maximumError: '1mb' }, { type: 'anyComponentStyle', maximumWarning: '2kb', maximumError: '4kb' }];"
```
删除 Codelyzer。Angular
CLI 11 版本在生成工作区或 Angular 应用程序项目时默认包含 Codelyzer。现在 TSlint 已完全停用，是时候继续前进了。删除该codelyzer软件包。

使用 NPM CLI：
```
npm uninstall codelyzer
```
使用 PNPM CLI：
```
pnpm remove codelyzer
```
使用 Yarn CLI：
```
yarn remove codelyzer
```
生成 Angular 工作区库。
为了确保我们的配置也适用于 Angular 库，我们创建了一个工作区库。
```
nx generate @nrwl/angular:library feature-flight-search --directory=booking --prefix=booking --tags="type:feature,scope:booking" --buildable --enable-ivy --no-interactive
```
我们充分利用 Nx 11 增强的增量 Angular 构建并通过使工作区库可构建（但不可发布）和 Ivy 编译来提供计算缓存服务。
验证 linting 功能是否正常工作。在所有项目上
运行目标，以验证带有 angular-eslint 的 ESLint 是否正常工作。lint
```
nx run-many --target=lint --all
```

现在，我们已经创建了一个 Nx 工作区，其中包含一个 Angular 应用程序项目和一个 Angular 库工作区项目。通过使用empty工作区预设，我们使用了 Nx 工作区配置的版本 2，该版本使用了术语executors、generators和target。

我们workspace.json可以验证lint目标是否使用@nrwl/linter:eslint执行器。

基础.eslintrc.json配置应该提及@nrwl/nx/typescriptESLint 插件。打开.eslintrc.jsonAngular 应用程序和库项目中的文件，验证@nrwl/nx/angular、@nrwl/nx/angular-template和@angular-eslint/template/process-inline-templatesESLint 插件是否已启用。

选项 2：使用角度工作区预设

从 Nx 版本 11.0.18 开始，angular工作区预设使用 angular-eslint 生成初始 Angular 应用程序项目，但生成初始应用程序和端到端测试项目时不考虑以下参数：

create-application
e2e-test-runner
no-interactive
strict
tags
unit-test-runner

并且--linter参数已损坏，始终显示此错误消息：

>  NX   ERROR  Invalid linter

  It must be one of the following:

  eslint
  tslint

但是带有 angular-eslint 的 ESLint 是默认的 linter。

因此，如果我们不想要默认值，我们必须删除初始项目，配置原理图并重新生成 Angular 应用程序和端到端测试项目。

生成 Nx Angular 工作区。

使用 NPM CLI：

npm init nx-workspace nrwl-airlines --npm-scope=nrwl-airlines --preset=angular --app-name=booking-app --linter=eslint --no-nx-cloud --style=css --package-manager=npm

使用 PNPM CLI：

pnpm init nx-workspace nrwl-airlines --npm-scope=nrwl-airlines --preset=angular --app-name=booking-app --linter=eslint --no-nx-cloud --style=css --package-manager=pnpm

使用 Yarn CLI：

yarn create nx-workspace nrwl-airlines --npm-scope=nrwl-airlines --preset=angular --app-name=booking-app --linter=eslint --no-nx-cloud --style=css --package-manager=yarn

设置affected命令的基准分支。
如果您一直关注 2020 年，您的 Git 仓库的默认分支是main。但是，从 Nx 版本 11.0.18 开始，无论您的默认 Git 设置如何，用于比较的基准分支仍然设置为master。

使用main默认分支：
```
npx json -I -f nx.json -e "this.affected.defaultBase = 'main';"
```

删除 Codelyzer 和 TSlint。NX
11 版本在使用工作区预设时默认包含 Codelyzer angular。现在 TSlint 已经完全停用，是时候继续前进了。删除codelyzer和tslint软件包。

使用 NPM CLI：

npm uninstall codelyzer tslint

使用 PNPM CLI：

pnpm remove codelyzer tslint

使用 Yarn CLI：

yarn remove codelyzer tslint

或者，使用以下preinstall脚本永久删除 Codelyzer 和 TSLint，尽管生成器尝试将它们添加回来。

使用 NPM CLI：

npx json -I -f package.json -e "this.scripts.preinstall = '(npm uninstall codelyzer || echo ✅ Codelyzer is already removed.) && (npm uninstall tslint || echo ✅ TSLint is already removed.)';"
npm install

使用 PNPM CLI：

npx json -I -f package.json -e "this.scripts.preinstall = '(pnpm remove codelyzer || echo ✅ Codelyzer is already removed.) && (pnpm remove tslint || echo ✅ TSLint is already removed.)';"
pnpm install

使用 Yarn CLI：

npx json -I -f package.json -e "this.scripts.preinstall = '(yarn remove codelyzer || echo ✅ Codelyzer is already removed.) && (yarn remove tslint || echo ✅ TSLint is already removed.)';"
yarn install

启用 Angular 严格模式。
我们建议对 TypeScript 和 Angular 使用严格配置。我们为 Angular 应用程序和库项目启用严格模式。

npx json -I -f angular.json -e "this.schematics['@nrwl/angular:application'].strict = true;"
npx json -I -f angular.json -e "this.schematics['@nrwl/angular:library'].strict = true;"

配置单元测试运行器。Nx
内置了对 Angular 应用程序和库项目的 Jest 和 Karma 测试框架的支持。

使用 Jest：

npx json -I -f angular.json -e "this.schematics['@nrwl/angular:application'].unitTestRunner = 'jest';"
npx json -I -f angular.json -e "this.schematics['@nrwl/angular:library'].unitTestRunner = 'jest';"

使用Karma：

npx json -I -f angular.json -e "this.schematics['@nrwl/angular:application'].unitTestRunner = 'karma';"
npx json -I -f angular.json -e "this.schematics['@nrwl/angular:library'].unitTestRunner = 'karma';"

配置端到端测试运行器。Nx
内置了对 Angular 应用项目的 Cypress 和 Protractor 端到端测试框架的支持。

使用 Cypress：

npx json -I -f angular.json -e "this.schematics['@nrwl/angular'].application.e2eTestRunner = 'cypress';"

使用量角器：

npx json -I -f angular.json -e "this.schematics['@nrwl/angular'].application.e2eTestRunner = 'protractor';"

合并原理图配置。
从 Nx 11.0.18 版本开始，传递--preset=angular --linter=eslint给 create-nx-workspace 会在中为 Angular 应用程序和库原理图默认值创建重复条目angular.json。这会导致配置无法正常工作。让我们修复这个问题。

合并 Angular 应用程序示意图配置：

npx json -I -f angular.json -e "this.schematics['@nrwl/angular:application'].linter = this.schematics['@nrwl/angular'].application.linter; delete this.schematics['@nrwl/angular'].application;"

合并 Angular 库原理图配置：

npx json -I -f angular.json -e "this.schematics['@nrwl/angular:library'].linter = this.schematics['@nrwl/angular'].library.linter; delete this.schematics['@nrwl/angular'].library;"

如果使用非默认测试运行器，请重新生成应用程序和端到端测试项目。
如果我们配置的是 Karma 和 Protractor 而不是 Jest 和 Cypress，则必须删除并重新生成应用程序和端到端测试项目。

删除端到端测试和应用程序项目：
```
nx generate @nrwl/workspace:remove booking-app-e2e
nx generate @nrwl/workspace:remove booking-app
```
生成应用程序和端到端测试项目：
```
nx generate @nrwl/angular:application --name=booking-app --prefix=booking --no-interactive
```
删除根级 Jest 配置：
```
rm jest.config.js
rm jest.preset.js
```

标记项目。

让我们将项目标签添加到生成的应用程序和端到端测试项目中。

npx json -I -f nx.json -e "this.projects['booking-app'].tags = ['type:app','scope:booking'];"
npx json -I -f nx.json -e "this.projects['booking-app-e2e'].tags = ['type:e2e','scope:booking'];"

使用严格的 Angular 构建预算。
从 Nx 版本 11.0.18 开始，Angular 构建预算不再根据 Angular 严格模式进行调整。让我们使用与 Angular CLI 11 严格模式相同的限制。

主 bundle 设置为 500 KB 时发出警告，1 MB 时失败。组件样式设置为 2 KB 时发出警告，4 KB 时失败。
```
npx json -I -f angular.json -e "this.projects['booking-app'].architect.build.configurations.production.budgets = [{ type: 'initial', maximumWarning: '500kb', maximumError: '1mb' }, { type: 'anyComponentStyle', maximumWarning: '2kb', maximumError: '4kb' }];"
```
生成 Angular 工作区库。
为了确保我们的配置适用于 Angular 库，我们创建了一个工作区库。
```
nx generate @nrwl/angular:library --name=feature-flight-search --directory=booking --prefix=booking --tags="type:feature,scope:booking" --buildable --enable-ivy --no-interactive
```
我们充分利用 Nx 11 增强的增量 Angular 构建并通过使工作区库可构建（但不可发布）和 Ivy 编译来提供计算缓存服务。
删除 Codelyzer。Angular
CLI 11 版本在生成工作区或 Angular 应用程序项目时默认包含 Codelyzer，因此我们必须再次删除它。
使用 NPM CLI：
```
npm uninstall codelyzer
```
使用 PNPM CLI：
```
pnpm remove codelyzer
```
使用 Yarn CLI：
```
yarn remove codelyzer
```
验证 linting 功能是否正常工作。在所有项目上
运行目标，以验证带有 angular-eslint 的 ESLint 是否正常工作。lint
```
nx run-many --target=lint --all
```

现在，我们已经创建了一个 Nx 工作区，其中包含一个 Angular 应用程序项目和一个 Angular 库工作区项目。通过使用angular工作区预设，我们使用了 Nx 工作区配置的版本 1，它与 Angular CLI 使用的完全相同。它仍然使用术语builders、diagrams和architects。

我们angular.json可以验证lint目标是否使用@nrwl/linter:eslint执行器。

使用 ESLint 迁移现有的 Nx 10 Angular 工作区

迁移到 Nx 11 时，使用 ESLint 的现有项目将被迁移以包含 angular-eslint。

使用预设创建 Nx 10 个工作区angular。
为了演示，我们生成一个包含单个应用程序的新 Nx Angular 工作区。

使用 NPM CLI：

npm init nx-workspace@10 nrwl-airlines --npm-scope=nrwl-airlines --preset=angular --app-name=booking-app --strict --no-nx-cloud --style=css --package-manager=npm --linter=eslint

使用 PNPM CLI：

pnpm init nx-workspace@10 nrwl-airlines --npm-scope=nrwl-airlines --preset=angular --app-name=booking-app --strict --no-nx-cloud --style=css --package-manager=pnpm --linter=eslint

请注意，仅从 Nx 版本 11 开始支持 PNPM。

使用 Yarn CLI：

yarn global add create-nx-workspace@10
create-nx-workspace nrwl-airlines --npm-scope=nrwl-airlines --preset=angular --app-name=booking-app --strict --no-nx-cloud --style=css --package-manager=yarn --linter=eslint

删除 Codelyzer 和 TSLint。Nx
默认包含 Codelyzer 和 TSlint。现在 TSLint 的生命周期已经完全结束，是时候继续前进了。删除codelyzer和tslint软件包。

使用 NPM CLI：

npm uninstall codelyzer tslint

使用 Yarn CLI：

yarn remove codelyzer tslint

或者，使用以下preinstall脚本永久删除 Codelyzer 和 TSLint，尽管生成器尝试将它们添加回来。

使用 NPM CLI：

npx json -I -f package.json -e "this.scripts.preinstall = '(npm uninstall codelyzer || echo ✅ Codelyzer is already removed.) && (npm uninstall tslint || echo ✅ TSLint is already removed.)';"
npm install

使用 PNPM CLI：

npx json -I -f package.json -e "this.scripts.preinstall = '(pnpm remove codelyzer || echo ✅ Codelyzer is already removed.) && (pnpm remove tslint || echo ✅ TSLint is already removed.)';"
pnpm install

使用 Yarn CLI：

npx json -I -f package.json -e "this.scripts.preinstall = '(yarn remove codelyzer || echo ✅ Codelyzer is already removed.) && (yarn remove tslint || echo ✅ TSLint is already removed.)';"
yarn install

合并 Angular 应用程序示意图配置：

npx json -I -f angular.json -e "this.schematics['@nrwl/angular:application'].linter = this.schematics['@nrwl/angular'].application.linter; delete this.schematics['@nrwl/angular'].application;"

合并 Angular 库原理图配置：

npx json -I -f angular.json -e "this.schematics['@nrwl/angular:library'].linter = this.schematics['@nrwl/angular'].library.linter; delete this.schematics['@nrwl/angular'].library;"

生成一个 Angular 工作区库。
为了给出一个更贴近实际的示例，我们还生成了一个 Angular 工作区库项目。

nx generate @nrwl/angular:library feature-flight-search --directory=booking --prefix=booking --tags="type:feature,scope:booking" --buildable --no-interactive

删除 Codelyzer。Angular
CLI 版本 11 在生成工作区或 Angular 应用程序项目时默认包含 Codelyzer，因此我们必须再次将其删除。

使用 NPM CLI：
```
npm uninstall codelyzer
```
使用 Yarn CLI：
```
yarn remove codelyzer
```

迁移到 Nx 11。
更新到 Nx 11 时，使用 ESLint 的工作区将迁移到使用 angular-eslint。

使用 NPM CLI：

nx migrate @nrwl/workspace
npm install

# Good point in time to review migrations.json and make a commit before applying selected migrations
nx migrate --run-migrations=migrations.json
npm install
rm migrations.json

使用 PNPM CLI：

nx migrate @nrwl/workspace
pnpm install

# Good point in time to review migrations.json and make a commit before applying selected migrations
nx migrate --run-migrations=migrations.json
pnpm install
rm migrations.json

使用 Yarn CLI：

nx migrate @nrwl/workspace
yarn install

# Good point in time to review migrations.json and make a commit before applying selected migrations
nx migrate --run-migrations=migrations.json
yarn install
rm migrations.json

验证 linting 功能是否正常工作。在所有项目上
运行目标，以验证带有 angular-eslint 的 ESLint 是否正常工作。lint
```
nx run-many --target=lint --all
```

更新 angular-eslint。
从 Nx 11.0.18 版本开始，angular-eslint 已安装 0.8.0-beta.1 版本。让我们将其更新到最新版本。

使用 NPM CLI：

npm install --save-dev @angular-eslint/eslint-plugin@latest @angular-eslint/eslint-plugin-template@latest @angular-eslint/template-parser@latest

使用 PNPM CLI：

pnpm add --save-dev @angular-eslint/eslint-plugin@latest @angular-eslint/eslint-plugin-template@latest @angular-eslint/template-parser@latest

使用 Yarn CLI：

yarn add @angular-eslint/eslint-plugin@latest @angular-eslint/eslint-plugin-template@latest @angular-eslint/template-parser@latest

验证 linting 功能是否正常工作。在所有项目上
运行lint目标，以验证带有 angular-eslint 的 ESLint 是否与最新版本兼容。
```
nx run-many --target=lint --all
```

使用 TSLint 迁移现有的 Nx 10 Angular 工作区

从 Nx 版本 11.0.18 开始，Nx 还没有使用 TSLint 将 Nx Angular 工作区迁移到带有 angular-eslint 的 ESLint 的示意图。

相反，我们将使用 angular-eslint 的 TSLint 到 ESLint 迁移示意图，并执行一些手动配置以匹配使用 ESLint 和 angular-eslint 的完全迁移的 Nx Angular 工作区。

在此示例中，我们将使用 Nx 的默认测试运行器作为angular工作区预设。目前，这意味着 Cypress 和 Jest。对于 Protractor 和 Karma，只有端到端测试项目的配置会有所不同。您可以考虑按照本文其他部分所述，创建一个包含 Karma、Protractor 和 ESLint 的新 Nx 工作区，以便比较 ESLint 配置。

请注意，angular本指南中使用的预设是angular.json。angular-eslint 迁移不适用于使用的 Nx 工作区workspace.json。

使用预设创建一个 Nx 10 工作区angular。
首先，我们以创建一个新的 Nx 10 工作区为例。如果您已有现有工作区，请根据您自己的工作区调整以下迁移步骤。

使用 NPM CLI：

npm init nx-workspace@10 nrwl-airlines --npm-scope=nrwl-airlines --preset=angular --app-name=booking-app --strict --no-nx-cloud --style=css --package-manager=npm --linter=tslint

使用 PNPM CLI：

pnpx create-nx-workspace@10 nrwl-airlines --npm-scope=nrwl-airlines --preset=angular --app-name=booking-app --strict --no-nx-cloud --style=css --package-manager=pnpm --linter=tslint

请注意，仅从 Nx 版本 11 开始支持 PNPM。

使用 Yarn CLI：

yarn global add create-nx-workspace@10
create-nx-workspace nrwl-airlines --npm-scope=nrwl-airlines --preset=angular --app-name=booking-app --strict --no-nx-cloud --style=css --package-manager=yarn --linter=tslint

生成一个 Angular 工作区库。
此库项目也用于演示目的。如果您已有 Nx 工作区，则无需执行此步骤。

nx generate @nrwl/angular:library --name=feature-flight-search --directory=booking --prefix=booking --tags="type:feature,scope:booking" --buildable --no-interactive

迁移到 Nx 11。
这实际上是一个可选步骤。以下步骤对于 Nx 10 完全相同。

使用 NPM CLI：

nx migrate @nrwl/workspace
npm install

# Good point in time to review migrations.json and make a commit before applying selected migrations
nx migrate --run-migrations=migrations.json
npm install
rm migrations.json

使用 PNPM CLI：

nx migrate @nrwl/workspace
pnpm install

# Good point in time to review migrations.json and make a commit before applying selected migrations
nx migrate --run-migrations=migrations.json
pnpm install
rm migrations.json

使用 Yarn CLI：

nx migrate @nrwl/workspace
yarn install

# Good point in time to review migrations.json and make a commit before applying selected migrations
nx migrate --run-migrations=migrations.json
yarn install
rm migrations.json

迁移到 angular-eslint。
首先，我们暂时将其重命名为tsconfig.base.json，tsconfig.json因为 angular-eslint 迁移未配置为 Nx 自 10.0 版本以来使用的解决方案风格的 TypeScript 配置。

mv tsconfig.base.json tsconfig.json

现在我们运行 angular-eslint diagrams 来安装必要的开发依赖项，例如eslint-plugin-*、@angular-eslint/*和@typescript-eslint/*包。

使用 NPM CLI：

npm install --save-dev @angular-eslint/schematics
nx generate @angular-eslint/schematics:ng-add

使用 PNPM CLI：

pnpm add --save-dev @angular-eslint/schematics
nx generate @angular-eslint/schematics:ng-add

使用 Yarn CLI：

yarn add @angular-eslint/schematics
nx generate @angular-eslint/schematics:ng-add

这可能会降低 Nx 已安装的版本eslint。如果发生这种情况，请确保保留 Nx 安装的版本。例如，

使用 NPM CLI：

npm install --save-dev eslint@7.10.0

使用 PNPM CLI：

pnpm add --save-dev eslint@7.10.0

使用 Yarn CLI：

yarn add eslint@7.10.0

接下来，我们为工作区中的每个 Angular 应用程序和库项目运行 angular-eslint 的 TSLint 到 ESLint 生成器。

在此步骤中，您可能会看到如下警告，具体取决于您的 TSLint 规则：

WARNING: Within "tslint.json", the following 1 rule(s) did not have known converters in https://github.com/typescript-eslint/tslint-to-eslint-config

  - nx-enforce-module-boundaries

You will need to decide on how to handle the above manually, but everything else has been handled for you automatically.

对于nx-enforce-module-boundaries在使用这些步骤生成的示例工作区时唯一发出警告的规则，不必担心，因为我们会将根 TSLint 配置文件保留到最后一步。这些是该nx workspace-lint命令使用的 lint 规则。

对于 ESLint，此规则被调用@nrwl/nx/enforce-module-boundaries，我们将按照以下步骤之一将其添加到我们的根 ESLint 配置中。

为每个项目手动运行生成器：

# Migrate booking-app rules to angular-eslint
nx generate @angular-eslint/schematics:convert-tslint-to-eslint booking-app

# Migrate booking-app-e2e rules to angular-eslint
nx generate @angular-eslint/schematics:convert-tslint-to-eslint booking-app-e2e

# Migrate booking-feature-flight-search rules to angular-eslint
nx generate @angular-eslint/schematics:convert-tslint-to-eslint booking-feature-flight-search

或者循环遍历项目名称angular.json并在脚本中为每个项目运行生成器。

使用 PowerShell 的脚本：

foreach ($project in (Get-Content angular.json | ConvertFrom-Json -AsHashtable).projects.GetEnumerator()) { nx generate @angular-eslint/schematics:convert-tslint-to-eslint $project.Name }

使用 Bash 的脚本：

for project in $(cat angular.json | npx json projects | npx json -M -a key); do nx generate @angular-eslint/schematics:convert-tslint-to-eslint $project; done

最后，我们恢复的临时重命名tsconfig.base.json。

mv tsconfig.json tsconfig.base.json

为 Nx 工作区配置 angular-eslint。

首先，我们删除不必要的开发依赖。

使用 NPM CLI：

npm uninstall @angular-eslint/builder @angular-eslint/schematics

使用 PNPM CLI：

pnpm remove @angular-eslint/builder @angular-eslint/schematics

使用 Yarn CLI：

yarn remove @angular-eslint/builder @angular-eslint/schematics

然后我们添加所需的开发依赖项。

使用 NPM CLI：

npm install --save-dev @nrwl/eslint-plugin-nx eslint-config-prettier eslint-plugin-cypress

使用 PNPM CLI：

pnpm add --save-dev @nrwl/eslint-plugin-nx eslint-config-prettier eslint-plugin-cypress

使用 Yarn CLI：

yarn add --dev @nrwl/eslint-plugin-nx eslint-config-prettier eslint-plugin-cypress

接下来，我们配置根 ESLint 配置。

# Ignore all files not matched in overrides
npx json -I -f .eslintrc.json -e "this.ignorePatterns = ['**/*'];"

# Support ESLint plugins from `@nrwl/eslint-plugin-nx`
npx json -I -f .eslintrc.json -e "this.plugins = ['@nrwl/nx'];"

# Include tsx files
# Can be left out from an Angular-only workspace
npx json -I -f .eslintrc.json -e "this.overrides[0].files = ['*.ts', '*.tsx'];"

# Match all TypeScript project configuration files
npx json -I -f .eslintrc.json -e "this.overrides[0].parserOptions.project = './tsconfig.*?.json';"

# This setting is not used by the Nrwl Linter
npx json -I -f .eslintrc.json -e "delete this.overrides[0].parserOptions.createDefaultProgram;"

# Replace angular-eslint plugins with the Nx TypeScript ESLint plugin as it uses them internally
npx json -I -f .eslintrc.json -e "this.overrides[0].extends = ['plugin:@nrwl/nx/typescript'];"

# Remove component template rule as this is defined in project-specific ESLint configurations
npx json -I -f .eslintrc.json -e "this.overrides = this.overrides.slice(0, 1);"

# Use Nx JavaScript ESLint plugin for js and jsx files
# Can be left out from an Angular-only workspace
npx json -I -f .eslintrc.json -e "this.overrides = [...this.overrides, { files: ['*.js', '*.jsx'], extends: ['plugin:@nrwl/nx/javascript'], rules: {} }];"

# Remove angular-eslint rules that are added to project-specific ESLint configurations
npx json -I -f .eslintrc.json -e "delete this.overrides[0].rules['@angular-eslint/component-selector'];"
npx json -I -f .eslintrc.json -e "delete this.overrides[0].rules['@angular-eslint/directive-selector'];"

根 ESLint 配置的最终更改是应用我们的工作区 lint 规则（以及 angular-eslint 警告您的任何其他规则）。

# This is where we configure the workspace lint rules
# Refer to the root TSLint configuration
npx json -I -f .eslintrc.json -e "this.overrides = [{ files: ['*.ts', '*.tsx', '*.js', '*.jsx'], rules: { '@nrwl/nx/enforce-module-boundaries': ['error', { enforceBuildableLibDependency: true, allow: [], depConstraints: [{ sourceTag: '*', onlyDependOnLibsWithTags: ['*'] }] }] } }, ...this.overrides];"

现在是时候配置每个项目的 ESLint 配置了。让我们从booking-app项目开始。

# Add Nx Angular ESLint plugin and the ESLint inline component template processor
npx json -I -f apps/booking-app/.eslintrc.json -e "this.overrides[0].extends = ['plugin:@nrwl/nx/angular', 'plugin:@angular-eslint/template/process-inline-templates'];"

# Match all TypeScript project configuration files
npx json -I -f apps/booking-app/.eslintrc.json -e "this.overrides[0].parserOptions.project = [this.overrides[0].parserOptions.project[0].replace('/tsconfig.app.json', '/tsconfig.*?.json')];"

# This setting is not used by the Nrwl Linter
npx json -I -f apps/booking-app/.eslintrc.json -e "delete this.overrides[0].parserOptions.createDefaultProgram;"

# Use the ESLint component template processor and recommended component template rules from angular-eslint
npx json -I -f apps/booking-app/.eslintrc.json -e "this.overrides[1].extends = ['plugin:@nrwl/nx/angular-template', 'plugin:@angular-eslint/template/recommended'];"

接下来，我们为项目配置 ESLint 和 angular-eslint booking-feature-flight-search。我们所做的更改与booking-app项目配置相同，只是我们首先要更正根 ESLint 配置的路径，因为项目特定的配置位于工作区中的三个文件夹深处。

# Correct path to root ESLint configuration
npx json -I -f libs/booking/feature-flight-search/.eslintrc.json -e "this.extends = '../' + this.extends;"

# Add Nx Angular ESLint plugin and the ESLint inline component template processor
npx json -I -f libs/booking/feature-flight-search/.eslintrc.json -e "this.overrides[0].extends = ['plugin:@nrwl/nx/angular', 'plugin:@angular-eslint/template/process-inline-templates'];"

# Match all TypeScript project configuration files
npx json -I -f libs/booking/feature-flight-search/.eslintrc.json -e "this.overrides[0].parserOptions.project = [this.overrides[0].parserOptions.project[0].replace('/tsconfig.lib.json', '/tsconfig.*?.json')];"

# This setting is not used by the Nrwl Linter
npx json -I -f libs/booking/feature-flight-search/.eslintrc.json -e "delete this.overrides[0].parserOptions.createDefaultProgram;"

# Use the ESLint component template processor and recommended component template rules from angular-eslint
npx json -I -f libs/booking/feature-flight-search/.eslintrc.json -e "this.overrides[1].extends = ['plugin:@nrwl/nx/angular-template', 'plugin:@angular-eslint/template/recommended'];"

最后，我们为项目配置 ESLint booking-app-e2e。

# Use rules recommended by Cypress
npx json -I -f apps/booking-app-e2e/.eslintrc.json -e "this.extends = ['plugin:cypress/recommended', this.extends];"

# Delete rule for component templates
npx json -I -f apps/booking-app-e2e/.eslintrc.json -e "this.overrides = this.overrides.slice(0, 1);"

# Add rules specifically for the Cypress plugin loader
npx json -I -f apps/booking-app-e2e/.eslintrc.json -e "this.overrides = [{ files: ['src/plugins/index.js'], rules: { '@typescript-eslint/no-var-requires': 'off', 'no-undef': 'off' } }, ...this.overrides];"

# Match all TypeScript project configuration files
npx json -I -f apps/booking-app-e2e/.eslintrc.json -e "this.overrides[1].parserOptions.project = [this.overrides[1].parserOptions.project[0].replace('/tsconfig.app.json', '/tsconfig.*?.json')];"

# This setting is not used by the Nrwl Linter
npx json -I -f apps/booking-app-e2e/.eslintrc.json -e "delete this.overrides[1].parserOptions.createDefaultProgram;"

# Remove Angular declarable rules
npx json -I -f apps/booking-app-e2e/.eslintrc.json -e "delete this.overrides[1].rules['@angular-eslint/component-selector'];"
npx json -I -f apps/booking-app-e2e/.eslintrc.json -e "delete this.overrides[1].rules['@angular-eslint/directive-selector'];"

打开apps/booking-app-e2e/src/support/commands.ts并在以下行之前添加以下注释declare namespace Cypress {：

// eslint-disable-next-line @typescript-eslint/no-namespace

在同一个文件中，在以下行之前添加此注释interface Chainabile<Subject> {：

// eslint-disable-next-line @typescript-eslint/no-unused-vars

使用 Nrwl Linter 构建器。
最后一步是在我们的工作区配置中将其替换@angular-eslint/builder:lint为。@nrwl/linter:eslint

# Use Nrwl Linter
npx json -I -f angular.json -e "this.projects['booking-app'].architect.lint.builder = '@nrwl/linter:eslint';"
npx json -I -f angular.json -e "this.projects['booking-feature-flight-search'].architect.lint.builder = '@nrwl/linter:eslint';"
npx json -I -f angular.json -e "this.projects['booking-app-e2e'].architect.lint.builder = '@nrwl/linter:eslint';"

# Only lint js and ts files in the end-to-end test project
npx json -I -f angular.json -e "this.projects['booking-app-e2e'].architect.lint.options.lintFilePatterns = [this.projects['booking-app-e2e'].architect.lint.options.lintFilePatterns[0].replace('*.ts', '*.{js,ts}')];"

删除 Codelyzer 和 TSLint。

使用 NPM CLI：

npm uninstall codelyzer tslint
rm tslint.json

使用 Yarn CLI：

yarn remove codelyzer tslint
rm tslint.json

或者，使用以下preinstall脚本永久删除 Codelyzer 和 TSLint，尽管生成器尝试将它们添加回来。

使用 NPM CLI：

npx json -I -f package.json -e "this.scripts.preinstall = '(npm uninstall codelyzer || echo ✅ Codelyzer is already removed.) && (npm uninstall tslint || echo ✅ TSLint is already removed.)';"
npm install

使用 PNPM CLI：

npx json -I -f package.json -e "this.scripts.preinstall = '(pnpm remove codelyzer || echo ✅ Codelyzer is already removed.) && (pnpm remove tslint || echo ✅ TSLint is already removed.)';"
pnpm install

使用 Yarn CLI：

npx json -I -f package.json -e "this.scripts.preinstall = '(yarn remove codelyzer || echo ✅ Codelyzer is already removed.) && (yarn remove tslint || echo ✅ TSLint is already removed.)';"
yarn install

验证 linting 功能是否正常工作。在所有项目上
运行目标，以验证带有 angular-eslint 的 ESLint 是否正常工作。lint
```
nx run-many --target=lint --all
```

结论

Nx 工作区的预设empty非常棒，因为它使用了新的workspace.json版本 2 模式，其中包含执行器、生成器和目标。我们可以根据需要进行配置，并且它能够很好地支持 angular-eslint。

可以使用angular预设创建一个新的 Nx 工作区以继续使用angular.json工作区配置。

现有的使用 ESLint 的 Nx 10 工作区可以顺利迁移到 angular-eslint。迁移到 Nx 11 的过程中，将为使用 ESLint 的现有项目安装并配置 angular-eslint。

如果我们有一个使用 TSLint 的现有 Nx 10 工作区，我们可以毫无问题地迁移到 Nx 11，但从 Nx 版本 11.0.18 开始，还不能自动从使用 TSLint 迁移到 angular-eslint。

不过，Angular CLI 工作区有迁移。我们可以以此为起点来安装 angular-eslint，并创建必要的 ESLint 配置文件和插件。

为了手动为 Nx 工作区配置 angular-eslint，我们仔细调整了 ESLint 配置，就像在新的 Nx 工作区中一样。此外，我们切换到了 Nrwl Linter，而不是 angular-eslint 构建器。

无论我们使用哪种技术组合，今天都可以摆脱 Codelyzer 和 TSLint，并开始使用 angular-eslint。

Codelyzer 中一些 Angular 特定的 TSLint 规则尚未实现相应的 angular-eslint 规则。截至撰写本文时，缺失的规则如下：

angular-whitespace
contextual-decorator
import-destructuring-spacing
no-unused-css
prefer-inline-decorator
template-accessibility-alt-text
template-accessibility-label-for
template-accessibility-table-scope
template-click-events-have-key-events
template-conditional-complexity
template-no-any

为什么我们应该尽快迁移出 TSLint？TSLint 已于 2020 年 12 月 1 日完全停用。此后，TSLint 不再接受任何 PR 或问题。这意味着 Angular、TypeScript、Node.js 或任何 TSLint 依赖项的任何版本都可能破坏 TSLint 6.1.3 版本（这是 TSLint 有史以来发布的最后一个版本）。TSLint 两年前就已弃用。

致谢

感谢James Henry提供的 angular-eslint。感谢 Nrwl 和James Henry在 Nx 中提供的 angular-eslint 支持。

继续阅读（https://dev.to/this-is-angular/the-ultimate-migration-guide-to-angular-eslint-eslint-and-nx-11-1eh2）

Angular-eslint、ESLint 和 Nx 11 的终极迁移指南目录先决条件使用 angular-eslint 设置新的 Nx Angular 工作区使用 ESLint 迁移现有的 Nx 10 Angular 工作区使用 TSLint 迁移现有的 Nx 10 Angular 工作区结论

Angular-eslint、ESLint 和 Nx 11 的终极迁移指南

目录

先决条件

使用 angular-eslint 设置新的 Nx Angular 工作区

使用 ESLint 迁移现有的 Nx 10 Angular 工作区

使用 TSLint 迁移现有的 Nx 10 Angular 工作区

结论

目录

先决条件

使用 angular-eslint 设置新的 Nx Angular 工作区

选项 1：使用空工作区预设

选项 2：使用角度工作区预设

使用 ESLint 迁移现有的 Nx 10 Angular 工作区

使用 TSLint 迁移现有的 Nx 10 Angular 工作区

结论

致谢