既存プロジェクトを TypeScript に移行する際の ESLint の対応

JavaScript で書いていたプロジェクトを TypeScript に移行する場合、アノテーションの追加やビルドの設定の他、ESLint の対応も必要になる。
この記事では、TypeScript に移行した後も引き続き ESLint を使えるようにするための手順を書いていく。
方針として、ESLint のルールは既存のものをそのまま引き継ぎ、TypeScript 用のルールは採り入れない。まずは移行を完了させてから必要に応じて適宜ルールを追加していく、という考え方。

前提

eslint-config-airbnbを使用しており、.eslintrcが以下の状態になっていると仮定する。

{
  "extends": "airbnb"
}

パーサーの設定

デフォルトのパーサーでは TypeScript の記法をパースできないので、@typescript-eslint/parserをパーサーとして設定する。

インストールして、.eslintrcに設定を追加する。

$ yarn add -D @typescript-eslint/parser

{
  "extends": "airbnb",
  "parser": "@typescript-eslint/parser"
}

これで、パースできるようになる。

TypeScript ファイルを ESLint の対象にする

そもそもデフォルトでは.tsや.tsxは ESLint の対象ではないので、明示的に指定する必要がある。
--extを使って指定する。src/以下のファイルを対象にする場合は次のコマンドを実行すればよい。

yarn の場合。

$ yarn eslint --ext .js,.jsx,.ts,.tsx src/

npm の場合。

$ npx eslint --ext .js,.jsx,.ts,.tsx src/

import/no-unresolved を修正する

これで TypeScript ファイルに対しても ESLint を実行できるようになったが、import/no-unresolvedというエラーが出ているはず。
TypeScript ファイルのインポートを ESLint が解決できないことで、このエラーが発生してしまっている。
import/resolverを設定することで解決できる。

解決したい拡張子を指定すればよいので、次のように記述する。

{
  "extends": "airbnb",
  "parser": "@typescript-eslint/parser",
  "settings": {
    "import/resolver": {
      "node": {
        "extensions": [
          ".js",
          ".jsx",
          ".json",
          ".ts",
          ".tsx"
        ]
      }
    }
  }
}

これでimport/no-unresolvedは解消したはず。

VSCode の設定

エディタの自動修正を利用することで、開発効率が大幅に上がる。
TypeScript ファイルも自動修正の対象にして、コードを保存するたびに自動修正が実行されるようにしたい。
VSCode の場合は、設定ファイルに以下の内容を追加すればよい。

    "editor.formatOnSave": false,
    "javascript.format.enable": false,
    "javascript.validate.enable": false,
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        { "language": "typescript", "autoFix": true },
        { "language": "typescriptreact", "autoFix": true }
    ],