開設して15年以上になるGo to Everyone!ですが、こちらのコンテンツを管理するツールをGitHubで管理しています。
先日、ここで利用している TypeScript の Linter を TSLint から ESLint に変更しました。
フロントエンドはライブラリやツール周りの設定・利用方法が複雑なことや、最近業務でも同様の対応をしたことを踏まえ、忘れないように手順を残しておきます。
ベースは上記リポジトリです。

前提

  • サーバサイドに CakePHP を使い、一部フロントで Vue.js を利用している
  • 昨年フロントは JavaScript ではなく TypeScript で記載するよう修正した
  • JavaScript で記載していた頃は ESLint を利用していた
  • TypeScript でも JavaScript で書いていた頃同様 Linter でチェックしたいと思い TSLint を導入した
  • ただ、TSLint では Vue の単一ファイルコンポーネントをチェックするプラグインとうまく連携できないなど、JavaScript 自体の資産をうまく引き継げず、なんとかしたいと思っていた

そして 2019年

TypeScript でも本格的に ESLint がサポートされるようになりました。

それに伴い、TSLint ではなく ESLint を利用するよう対応しました。

やったこと

連携させる内容やプロジェクトの内容によって必要なライブラリは変わるので、あえて分けて記載しています。
Yarn を使う想定で記載していますので、npm を使う場合は適宜 npm i -D に読みかえてください。

ライブラリ追加

ESLint

yarn add -D eslint

ESLint と webpack を連携するためのライブラリ

yarn add -D eslint-loader

ESLint と Vue を連携させるためのライブラリ

yarn add -D vue-eslint-parser eslint-plugin-vue

ESLint と Prettier を連携させるためのライブラリ

コードを自動でフォーマットしてくれる Prettier が便利なので合わせて導入しておきます。
Atom や VSCode などではプラグインが提供されていますので、導入も簡単です。 

yarn add -D prettier eslint-config-prettier eslint-plugin-prettier

ESLint と TypeScript を連携させるためのライブラリを追加

yarn add -D eslint-config-typescript @typescript-eslint/eslint-plugin @typescript-eslint/parser

設定ファイル追加・修正

ESLint 用の設定ファイル (.eslintrc) 追加

{
  "env": {
    "node": true,
    "es6": true
  },
  "extends": ["prettier", "plugin:vue/recommended", "plugin:@typescript-eslint/recommended"],
  "overrides": [
    {
      "files": ["*.ts", "*.vue"]
    }
  ],
  "parser": "vue-eslint-parser",
  "parserOptions": {
    "ecmaVersion": 6,
    "parser": "@typescript-eslint/parser"
  },
  "plugins": ["prettier", "vue", "@typescript-eslint"],
  "rules": {
    "comma-dangle": ["error", "always-multiline"],
    "indent": ["error", 2, { "SwitchCase": 1 }],
    "linebreak-style": ["error", "unix"],
    "no-console": ["warn"],
    "no-trailing-spaces": ["error"],
    "no-useless-escape": ["off"],
    "quotes": ["error", "single"],
    "semi": ["error", "always"],
    "vue/attributes-order": ["error"],
    "vue/max-attributes-per-line": [
      2,
      {
        "singleline": 20,
        "multiline": {
          "max": 1,
          "allowFirstLine": false
        }
      }
    ],
    "@typescript-eslint/indent": ["error", 2]
  }
}

※ @typescript-eslint/indent は ESLint のルールだけだと .ts ファイルがうまくチェックできなかったため追加しています。

ESLint のチェック除外パス設定ファイル (.eslintignore) 追加

/node_modules

prettier 用の設定ファイル (.prettierrc) 追加

{
  "tabWidth": 2,
  "trailingComma": "all",
  "semi": true,
  "singleQuote": true,
  "printWidth": 100
}

webpack.config.js を修正

module.exports = () => {
  return [
    {
      // モジュールに eslint-loader を追加
      module: {
        rules: [
          // ESLint のチェックをさせるため追加
          {
            enforce: 'pre', // 他のローダーより先にチェックさせたいので enforce を指定
            test: /\.(js|vue|ts)$/, // テスト対象ファイル
            exclude: /node_modules/,
            use: [
              {
                loader: 'eslint-loader',
                options: {
                  esModule: true,
                  cache: true, // 実行結果をキャッシュして、次回以降の起動時に差分が無いファイルをチェックしないことで高速化する
                },
              },
            ],
          },
        ],
      },
    },
  ];
};

package.json 修正

ESLint 用のスクリプトを追加し、TSLint 用のスクリプトは削除しました。 

{
  "scripts": {
    "eslint": "eslint --ext .ts,.vue ./resources/assets/ts",
    "eslint:fix": "yarn run eslint --fix",
  },
}

コードの修正

ルールを調整しながらコードを修正していきました。

ライブラリ削除

TSLint

yarn remove tslint

設定ファイル削除

TSLint 用の設定ファイル (tslint.json) 削除

先ほど確認したら削除し忘れていました…。
後程削除しておきます。

結果

導入は結構大変でしたが、以下のような理由から十分メリットが得られていると感じています。

  • プラグインが豊富
  • 情報・ノウハウが多い
  • JavaScript ファイルと混在した場合も同じツールでチェックできる

同様の対応をしようと思っている方の参考になれば幸いです。