emahiro/b.log

日々の勉強の記録とか育児の記録とか。

トップ > TypeScript > TSLint -> ESLint に乗り換える

TSLint -> ESLint に乗り換える

TypeScript Javascript ESLint

Overview

ESLint から TSLint に乗り換える手順について記載します。
サンプルとして自分で作成してる Firebase のプロジェクトで乗り換えた手順を記載しました。
対象は TypeScript で記載されている Functions のコードになります。

乗り換え手順

tslint-to-eslint-config を使用します。

$ npx tslint-to-eslint-config
npx: 54個のパッケージを4.37秒でインストールしました。
✨ 31 rules replaced with their ESLint equivalents. ✨ 
❗ 3 ESLint rules behave differently from their TSLint counterparts ❗
  * no-redeclare:
    - ESLint does not support check-parameters.
  * no-invalid-this:
    - Functions in methods will no longer be ignored.
  * no-void:
    - ESLint does not support ignoring arrow function shorthand. 
⚡ 2 packages are required for new ESLint rules. ⚡
  import
  eslint-plugin-import 

✅ All is well! ✅

TSLint で設定したルールで ESLint に乗り換えることができなかったものについては警告として出力されるので、ESLint のルールで代用できなかを検討すると良さそうです。

Firebase で Functions を使用してるケースでは、functions ディレクトリのデフォルトの .gitignore ファイルに **/*.js が記載されていて、このままだと新しく生成された .eslintrc.js が ignore されてしまうので、 !.eslintrc.js を追記します。

TSLint の削除

  1. eslint のプラグインを入れます。
$ npm install --save-dev eslint @typescript-eslint/parser @typescript-eslint
  1. package.json のスクリプトから tslint を外します。
- tslint --project tsconfig.json
+ eslint --fix ./src/**/*.ts // ./XXX/**/*.ts で XXX 配下の全ての ts ファイルに eslint をかけます。
  1. tslint の依存を切ります。
- "tslint": "^5.12.0",

ESLint をかける

$ npm run lint

> functions@ lint /Users/hiromichi.ema/emahiro/github.com/emahiro.dev/functions
 > eslint --fix ./src/**/*.ts  
 /Users/hiromichi.ema/emahiro/github.com/emahiro.dev/functions/src/index.ts
   1:1  error  Definition for rule '@typescript-eslint/no-param-reassign' was not found  @typescript-eslint/no-param-reassign
   1:1  error  Definition for rule 'import/no-deprecated' was not found                  import/no-deprecated
   1:1  error  Definition for rule 'import/no-extraneous-dependencies' was not found     import/no-extraneous-dependencies
   1:1  error  Definition for rule 'import/no-unassigned-import' was not found           import/no-unassigned-import

# 略

幾つのかのルールが ESlint に定義がないと言われます。
ルールがないものは適宜書き換える必要があります。
このタイミングで定義が ESLint にないと言われたものについては以下です。

- "@typescript-eslint/no-param-reassign": "error",
+ "no-param-reassign": "error",

ref: no-param-reassign

1:1  error  Definition for rule 'import/no-deprecated' was not found               import/no-deprecated
1:1  error  Definition for rule 'import/no-extraneous-dependencies' was not found  import/no-extraneous-dependencies
1:1  error  Definition for rule 'import/no-unassigned-import' was not found        import/no-unassigned-import

import 周りについては eslint-plugin-import を参考に plugin を追加します。

$ npm i --save-dev eslint-plugin-import

.eslintrc.js の plugin に import を追加します。

- "@typescript-eslint"
+ "@typescript-eslint",
+ "import"

これで今回当たったESLint の未定義ルールについては置き換えが完了しました。

TSLint -> ESLint の過程で error Definition for rule 'XXXXX' was not found のエラーが ESLint で発生したら、ルールを置き換えられないか？or 足りない plugin がないかということを調査してみると良さそうです。

VSCode で TypeScript に ESLint を使う

Setting.json に以下を追記します。

// eslint
"eslint.workingDirectories": [{"mode": "auto"}]

ref: https://github.com/microsoft/vscode-eslint/issues/881

設定後に Cmd + Shift + P で ESLint - Fix all auto-fixable problems. が使えるようになります。
var i = 0 などを適当に書いてみて、no-used-vars の警告が出ていれば動作してるとみて良さそうです。