【Angular】将代码规范检查工具从TSLint迁移到ESLint

2 年 ago

文, 翔

1 minute

首先

以下是有关从TSLint迁移到ESLint的Angular环境的说明。
如果已经创建了Angular项目，请从这里开始。
截至2021年2月。

简单解释

TSLint 是什么？

推荐将于2020年12月1日停止开发的TypeScript代码静态分析工具迁移至ESLint。

ESLint是什么？

JavaScript代码的静态分析工具

图书馆版本

@typescript-eslint/parser”: 4.3.0

安装Angular

$npm install -g @angular/cli
$ng version
Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1102.0
@angular-devkit/build-angular   0.1102.0
@angular-devkit/core            11.2.0
@angular-devkit/schematics      11.2.0
@schematics/angular             11.2.0
@schematics/update              0.1102.0
rxjs                            6.6.3
typescript                      4.1.5

创建Angular项目

# プロジェクトの作成
$ng new eslint-convert
? Do you want to enforce stricter type checking and stricter bundle budgets in the workspace?
  This setting helps improve maintainability and catch bugs ahead of time.
  For more information, see https://angular.io/strict Yes
? Would you like to add Angular routing? No
? Which stylesheet format would you like to use? SCSS   [ https://sass-lang.com/documentation/syntax#scss]

从TSLint迁移到ESlint

・将 “eslint-convert” 部分根据项目名称做适配。

# プロジェクトフォルダにて
$ ng add @angular-eslint/schematics
$ ng g @angular-eslint/schematics:convert-tslint-to-eslint eslint-convert

# TSLintの削除
$ rm tslint.json
$ npm uninstall tslint

如果你使用的是VSCode，安装VSCode扩展插件。

VS Code ESLint extension

VSCode的设置

保存時に自動補正を行う

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

确认动作

保存前

export class AppComponent {
  constructor() {
    let hoge = '';
  }
}

保存後 letがconstに置き換わることが確認できる。

export class AppComponent {
  constructor() {
    const hoge = '';
  }
}

以下是汉语的参考翻译：

– 参考

https://github.com/angular-eslint/angular-eslint 可以将其转换为中文：