TL;DR
- TSLintは2019年内に開発終了なのでtypescript-eslintへの移行が必要
- typescript-eslint/tslint-to-eslint-configはtslint.jsonをeslintrcに変換してくれるツール
- その他のtypescript-eslintの設定については「@typescript-eslint ことはじめ - teppeis blog」などを読んでください
はじめに
TSLintは公式でdeprecateになり2019年内に開発を終了することが決まっています。
参考: Roadmap: TSLint -> ESLint · Issue #4534 · palantir/tslint · GitHub
これからはTypeScriptでもESLintを使うことが推奨されています。TypeScriptチームがESLintチームと協力してtypescript-eslintプロジェクトを始めました。
参考: TypeScript on ESLint の未来 - Qiita
TSLintからESLintに移行する際にtslint.jsonからeslintrcへの書き換えを行う必要がありますが、その書き換えを自動で行ってくれるコマンドラインツールtslint-to-eslint-configを紹介します。
tslint-to-eslint-config
このツールは@typescript-eslintチームが開発しているツールです。
プロジェクト内にあるtslint.jsonの設定を読み取りeslintrcの設定をしてくれます。
tslint.jsonがあるディレクトリで以下のコマンドを実行します。
npx tslint-to-eslint-config
eslintrc.jsとtslint-to-eslint-config.logが生成されます。
├── eslintrc.js // 生成されたファイル
├── index.ts
├── package.json
├── tsconfig.json
├── tslint-to-eslint-config.log // 生成されたファイル
└── tslint.json
元のtslint.jsonは以下のような設定だったとします。
{
"rules": {
"adjacent-overload-signatures": true,
"ban-comma-operator": true,
"no-namespace": true,
"no-parameter-reassignment": true,
"no-reference": true,
"no-unnecessary-type-assertion": true,
"label-position": true,
"no-conditional-assignment": true,
"no-construct": true,
"no-duplicate-super": true,
"no-duplicate-switch-case": true,
"no-duplicate-variable": [true, "check-parameters"],
"no-shadowed-variable": true,
"no-empty": [true, "allow-empty-catch"],
"no-floating-promises": true,
"no-implicit-dependencies": true,
"no-invalid-this": true,
"no-string-throw": true,
"no-unsafe-finally": true,
"no-void-expression": [true, "ignore-arrow-function-shorthand"],
"no-duplicate-imports": true,
"no-empty-interface": {"severity": "warning"},
"no-import-side-effect": {"severity": "warning"},
"no-var-keyword": {"severity": "warning"},
"triple-equals": {"severity": "warning"},
"deprecation": {"severity": "warning"},
"prefer-for-of": {"severity": "warning"},
"unified-signatures": {"severity": "warning"},
"prefer-const": {"severity": "warning"},
"trailing-comma": {"severity": "warning"}
},
"defaultSeverity": "error"
}
出力されたeslintrc.jsは以下です。
module.exports = {
"env": {
"browser": true
},
"parser": "@typescript-eslint/parser",
"parserOptions": {
"project": "tsconfig.json",
"sourceType": "module"
},
"plugins": [
"@typescript-eslint",
"@typescript-eslint/tslint"
],
"rules": {
"@typescript-eslint/adjacent-overload-signatures": "error",
"@typescript-eslint/no-empty-interface": "warn",
"@typescript-eslint/no-namespace": "error",
"@typescript-eslint/no-param-reassign": "error",
"@typescript-eslint/no-triple-slash-reference": "error",
"@typescript-eslint/no-unnecessary-type-assertion": "error",
"@typescript-eslint/prefer-for-of": "warn",
"@typescript-eslint/unified-signatures": "warn",
"constructor-super": "error",
"no-cond-assign": "error",
"no-duplicate-case": "error",
"no-empty": [
"error",
{
"allowEmptyCatch": true
}
],
"no-empty-functions": "error",
"no-invalid-this": "error",
"no-new-wrappers": "error",
"no-sequences": "error",
"no-throw-literal": "error",
"no-unsafe-finally": "error",
"no-unused-labels": "error",
"no-var": "warn",
"prefer-const": "warn",
"@typescript-eslint/tslint/config": [
"error",
{
"rules": {
"deprecation": true,
"no-duplicate-imports": true,
"no-duplicate-variable": [
true,
"check-parameters"
],
"no-floating-promises": true,
"no-implicit-dependencies": true,
"no-import-side-effect": true,
"no-shadowed-variable": true,
"no-void-expression": [
true,
"ignore-arrow-function-shorthand"
],
"trailing-comma": true,
"triple-equals": true
}
}
]
}
};
ESLint本体に無いルールは@typescript-eslint/xxxで設定されます。このルールを適用している状態で実行するには@typescript-eslint/eslint-pluginや@typescript-eslint/eslint-plugin-tslintといったプラグインをインストールする必要があります。
npm install --save-dev @typescript-eslint/eslint-plugin @typescript-eslint/eslint-plugin-tslint
生成されたもう1つのファイルtslint-to-eslint-config.logには変換時のログを出力します。今回の場合は以下のログが出力され、deprecationのルールを使っていることを示してくれています。
deprecation does not yet have an ESLint equivalent.
no-duplicate-imports does not yet have an ESLint equivalent.
no-duplicate-variable does not yet have an ESLint equivalent.
no-floating-promises does not yet have an ESLint equivalent.
no-implicit-dependencies does not yet have an ESLint equivalent.
no-import-side-effect does not yet have an ESLint equivalent.
no-shadowed-variable does not yet have an ESLint equivalent.
no-void-expression does not yet have an ESLint equivalent.
trailing-comma does not yet have an ESLint equivalent.
triple-equals does not yet have an ESLint equivalent.
Flags
ファイル名指定
tslint-to-eslint-configには実行時にフラグをつけることでファイル名の指定などができます。
例えば、何らかの理由でtslint.jsonの名前を変更している場合があるとします。
├── index.ts
├── package.json
├── tsconfig.json
├── tslint.front.json
└── tslint.server.json
上記のような場合は、--tslintオプションを使うことで読み込むtslintの設定ファイルを指定することができます。また、--configオプションを使うことで出力するファイル名を変更することもできます。
npx tslint-to-eslint-config --tslint ./tslint.front.json --config eslintrc.front.js
上記では直下にあるtslint.front.jsonを読み込み、eslintrc.front.jsという名前で出力しています。
npx tslint-to-eslint-config --tslint ./tslint.server.json --config eslintrc.server.js
上記では直下にあるtslint.server.jsonを読み込み、eslintrc.server.jsという名前で出力しています。
JSON出力
デフォルトではeslintrcはJavaScriptのモジュールとして出力されますが、--configオプションを使うことでJSONで出力することもできます。
npx tslint-to-eslint-config --config .eslintrc.json
他にも便利なpackage.jsonの依存を読み込む--packageオプションなどあるので、興味のある方はREADMEのこちらを参考にしてみてください。
eslint実行時の注意
@typescript-eslint/tslintが必要な場合
前述のとおり生成されたeslintrcのpluginsに@typescript-eslint/tslintが指定されている場合は、@typescript-eslint/eslint-plugin-tslintのインストールが必要です。
ルールが見つからない場合
実行時に以下のようなエラーが出力されることがあります。
Definition for rule '@typescript-eslint/no-param-reassign' was not found
このようにルールが見つからなくてエラーが出る場合は手動でeslintrcのルールをコメントアウトしたりESLintのルールに書き換える必要があります。
上記のエラーの場合だとESLintにno-param-reassignルールが存在するので書き換えてあげると良いでしょう。
最後に
TSLintをまだお使いの方は今回紹介したtslint-to-eslint-configを使ってESLintへ移行してください。TSLintは2019年内に開発が終了する予定です。また、他にもtypescript-eslint関連で便利なツールがあればコメント欄などやTwitter(@shisama_)などで教えていただけると幸いです。
今回紹介した内容はGitHub(shisama/tslint-to-eslint-sample)にあるのでご興味あればご覧いただけると幸いです。
最後までお読みいただきありがとうございました。