탈TSLint하여 ESLint TypeScript Plugin으로 마이그레이션

왜 탈 TSLint 하는가

지금까지 TypeScript의 Linter로 TSLint를 사용했습니다.
하지만 TSLint는 개발 커뮤니티가 활발하다고 할 수 없다는 것이 이전부터 지적되었습니다.

TSLint is dead - Klaus Meinhardt - Medium

그 중 TSLint 개발 팀은 ESLint 플러그인으로 TSLint 기능을 통합하는 typescript-eslint 프로젝트를 시작했으며 TSLint는 2019년에 더 이상 사용되지 않을 것으로 발표되었습니다.

로드맵: TSLint -> ESLint · Issue #4534 · palantir/tslint

typescript-eslint/typescript-eslint: Monorepo for all the tooling which enables ESLint to support TypeScript

또한 Microsoft의 TypeScript 자체의 리포지토리도 이전에는 TSLint를 사용하고 있었지만, 2019년 9월경에 ESLint로 이행했습니다.

Migrate the repo to ESLint · Issue #30553 · microsoft/TypeScript

Migrate the repo to ESLint by a-tarasyuk · Pull Request #31777 · microsoft/TypeScript

ESLint는 JavaScript 개발의 강력한 생태계로서의 지위를 이미 확립했습니다. ESLint와 TSLint의 목적은 동일하며, 무리하게 차별화하는 것이 아니라 공존을 목표로 해야 한다는 판단은 타당하다고 생각합니다.

ESLint - Pluggable JavaScript linter

이 문서에서는 TSLint에서 ESLint로 실제로 마이그레이션하는 방법을 보여줍니다. 간단합니다.

환경

Windows 10 Pro 1809 Windows Subsystem for Linux (Bash on windows) Ubuntu 16.04.4 LTS

어쩌면 Mac에서도 마찬가지입니다

TypeScript: 3.5.3

ESLint: 6.0.1

@typescript-eslint/eslint-plugin: 1.12.0

마이그레이션 방법

먼저 TSLint를 제거합니다. 미안해.

package.json

-    "tslint": "^5.17.0",
-    "tslint-config-prettier": "^1.18.0", 
-    "tslint-plugin-prettier": "^1.3.0",

새 eslint 또는 @typescript-eslint/eslint-plugin 등 필요한 패키지를 설치합니다.

$ npm install --save-dev eslint @typescript-eslint/eslint-plugin @typescript-eslint/parser prettier eslint-config-prettier eslint-plugin-prettier

TSLint 구성 파일인 tslint.json를 삭제합니다.
그리고 새로운 .eslintrc.json 를 추가합니다.

TSLint 와 ESLint 로 마이그레이션 전후로 규칙의 호환성이 필요한 경우는 typescript-eslint/tslint-to-eslint-config 를 사용하거나 하면(자) 잘 동작할지도 모릅니다.
(참고: tslint-to-eslint-config에서 tslint.json을 eslintrc로 변환 - Qiita )

이번은 과감히 ESLint의 Recommended 설정에 모든 것을 맡깁니다. .eslintrc.json 설정 내용의 예는 이런 느낌입니다.

eslintrc.json

{
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/eslint-recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:prettier/recommended",
    "prettier/@typescript-eslint"
  ],
  "plugins": [
    "@typescript-eslint"
  ],
  "env": { "node": true, "es6": true },
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "sourceType": "module",
    "project": "./tsconfig.json"
  },
  "rules": {
  }
}

필요에 따라 npm scripts 등도 변경합니다.

package.json

  "scripts": {
-    "lint": "tslint src/index.ts",
+    "lint": "eslint src/index.ts",
-    "lint:fix": "tslint --fix src/index.ts"
+    "lint:fix": "eslint --fix src/index.ts" 

VSCode 확장 기능을 사용하고 있다면 ESLint 확장로 변경하십시오.

.vscode/extensions.json

  "recommendations": [
-    "eg2.tslint"
+    "dbaeumer.vscode-eslint"

VSCode 이외의 도구의 확장 기능은 아래에 소개되어 있습니다.

Integrations - ESLint - Pluggable JavaScript linter

이것으로 준비가 완료됩니다.$ npm run lint 명령이 되어 VSCode의 Probrems 탭에 지적사항이 나올 것이라고 생각하기 때문에 수정해 갈 뿐입니다.

예

아래는 @typescript-eslint/no-unused-vars 규칙에 걸어 본 예입니다. 그런 다음 ESLint와 Prettier도 오류를 발생시켰음을 알 수 있습니다.

src/index.ts

var hoge = 1

$ head -n 1 src/index.ts  
var hoge = 1
$ npx eslint src/index.ts  

/path/to/src/index.ts 
  1:1   error    Unexpected var, use let or const instead   no-var
  1:5   warning  'hoge' is assigned a value but never used  @typescript-eslint/no-unused-vars
  1:13  error    Replace `⏎` with `;`                       prettier/prettier

✖ 3 problems (2 errors, 1 warning) 
  2 errors and 0 warnings potentially fixable with the `--fix` option.

만약 수정할 수 없는 내용이 있으면, TSLint 와 같이 Disabling comments 를 사용하면 에러를 멈출 수가 있습니다.

-// tslint:disable-next-line:no-var-requires
+// eslint-disable-next-line @typescript-eslint/no-var-requires
 const commander = require("commander");

간단하네요.

실제로 필자가 TSLint 에서 ESLint 로의 이행시에 수정한 내용은 아래와 같습니다.
TypeScript ESLint fix · s2terminal/i-read-u@191d349

참고

@typescript-eslint 소개 - teppeis blog