如何运行@angular eslint/schemes:将tslint转换为eslint

Question

我正试图按照Angular ESLint Github repo中的说明将Angular项目从TSLint切换到ESLint。

我运行了ng add @angular-eslint/schematics，它向我的包.json添加了以下依赖项：

"@angular-eslint/builder": "1.2.0",
"@angular-eslint/eslint-plugin": "1.2.0",
"@angular-eslint/eslint-plugin-template": "1.2.0",
"@angular-eslint/schematics": "1.2.0",
"@angular-eslint/template-parser": "1.2.0",
"@typescript-eslint/eslint-plugin": "4.3.0",
"@typescript-eslint/parser": "4.3.0",
"eslint": "7.6.0",
"eslint-plugin-import": "2.22.1",
"eslint-plugin-jsdoc": "30.7.6",
"eslint-plugin-prefer-arrow": "1.2.2",

此外，运行npm install以确保这些都已安装。

现在我被指示运行：

ng g @angular-eslint/schematics:convert-tslint-to-eslint --remove-tslint-if-no-more-tslint-targets --ignore-existing-tslint-config

然而，这会导致错误：

Unknown option: '--remove-tslint-if-no-more-tslint-targets'
Unknown option: '--ignore-existing-tslint-config'

当我删除这些选项时，我会得到另一个错误：

Invalid rule result: Instance of class Promise.

这个有角度的esint示意图似乎没有正确安装。然而，我对这些原理图完全是个新手。我一定错过了一些显而易见的东西。

使用@angular/cli 10.2.3。

Answer 1

如果CLI询问您时您不知道项目的名称

Which project would you like to convert from TSLint to ESLint?

它可以在projects属性下的angular.json中找到(通常在第8行(

Answer 2

这取决于项目的Angular版本，因为它为不同的Angular版安装了不同版本的@angular-eslint/schematics

步骤将是：

A。将@angular esint添加到您的项目中：

ng add @angular-eslint/schematics

如果你有一个Angular 12项目(没有tslint(，你就完成了！

B。要从tslint Angular 11或12迁移，请运行以下命令：

ng g @angular-eslint/schematics:convert-tslint-to-eslint --remove-tslint-if-no-more-tslint-targets

(仅当您想忽略旧的tslint配置时，才使用：--ignore-existing-tslint-config标志(

如果使用Angular 9或10，则会安装原理图的旧版本，转换命令略有不同。在转换为ESLint之前，您可能需要优先升级Angular。但如果你真的想先升级linting，可以使用以下命令：

ng g @angular-eslint/schematics:convert-tslint-to-eslint <project-name-here>

tslint到eslint迁移的详细博客

Answer 3

如果您正在迁移现有项目，那么您应该运行

ng g @angular-eslint/schematics:convert-tslint-to-eslint

或

ng g @angular-eslint/schematics:convert-tslint-to-eslint {{YOUR_PROJECT_NAME_GOES_HERE}}

而不是

ng g @angular-eslint/schematics:convert-tslint-to-eslint --remove-tslint-if-no-more-tslint-targets --ignore-existing-tslint-config

按照指导方针https://github.com/angular-eslint/angular-eslint#step-2---run-the-converter-tslint-to-eslint-schematic-on-a-project

Answer 4

尝试运行以下命令，看看它是否有效：

npm install @schematics/angular@latest -g  
remove node_modules 
remove package-lock.json    
npm install

Answer 5

我使用的是Angular 14。我运行

ng add @angular-eslint/schematics@14

代替

ng add @angular-eslint/schematics

我的linting开始使用命令ng lint工作

在此之前，我一直收到错误：

NOT SUPPORTED: keyword "id", use "$id