Help us understand the problem. What is going on with this article?

tslint-to-eslint-configでtslint.jsonをeslintrcに変換する

More than 1 year has passed since last update.

TL;DR

はじめに

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.jstslint-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が必要な場合

前述のとおり生成されたeslintrcplugins@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)にあるのでご興味あればご覧いただけると幸いです。

最後までお読みいただきありがとうございました。

shisama
Node.js Core Collaborator. 関西Node学園Organizer.
https://shisama.dev
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした