ESLint導入時にやってること

TypeScriptでもESLintを使用する

以前、お取引先のエンジニアの方に教えていただいたことがあったのですが、2019年に入ってからTSLintの開発チームはTSLintをESLintに統合していく方針を取り、2019年中には非推奨にするとのこと。
以前からTSLintのコミュニティ自体もあまり活発でなかったそう。

MicrosoftのTypeScriptリポジトリもTSLintからESLint に移行するようです。
Migrate the repo to ESLint #30553

TypeScriptはTSLintを使用する、JavaScriptはESLintを使用するというイメージを持たれてる方も多いかもしれませんが、TypeScriptのプロジェクトであっても今後はESLintを使用して開発を進めていくべきです。

構文チェック&フォーマッタ

構文チェックに使うプラグインは基本的にスター数で判断しています。開発において安心して使えるかどうかと、バージョン等見つつ、公式で推奨しているパッケージや設定をそのまま流用しています。

Reactプロジェクトに携わることが多いので、Reactであれば以下のうような公式サイトでも推奨している設定をそのまま使っています。

eslint-plugin-react

.eslintrc.js

    plugins: [
        "react-hooks"
    ],
    rules: {
        "react-hooks/rules-of-hooks": "error",
        "react-hooks/exhaustive-deps": "warn"
    }

parser等は一般的に使われているものを使用。TypeScriptに合わせてカスタマイズしていっています。

フォーマッタでは無難にprettierを使用しています。
prettier

こちらも基本的には公式サイトを見つつカスタマイズします。
タブスペースは2スペースが個人的に好きなので以下のように設定しています。

{
  'singleQuote': true,
  'tabWidth': 2,
  'semi': true,
  'printWidth': 120
}

これにともない、エディタでも統一できるように.editorconfig準備もするとよいかもしれません

またESLintの設定ファイルは.eslintrcよりも.eslintrc.jsのように拡張子がある方がよいでしょう。
その理由として、拡張子があることによってprettierで整形する時にeslintrcも整形対象に含めることができるからです。

huskyとlint-staged導入してpre-commit

開発していく上で使えるちょっとした小技です。huskyとlint-stagedを組み合わせてgitコマンドを打つ時に同時に特定のコマンドを実行させるという方法になります。
以下はステージングするタイミングで一緒にLintやフォーマッタ等を実行させることができます。

package.json

  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.{ts,tsx}": [
      "yarn eslint --ext .ts --ext .tsx . --fix",
      "git add"
    ]
  },

しかしながら、ci通してたり不要な場合やいちいちpre-commitをしてわずらわしい場合など不要だと判断した場合はhuskyは入れないです。プレコミットについては調べるといろいろと出てくるので興味があれば調べてみてください。

ESLintルールの拡張

Lintを使用していく上で開発チーム内の独自ルールやガイドラインに沿ったルールが欲しくなります。
しかしながら、細かくカスタマイズできる分、ルールの数が多く存在しているため、まとめて拡張していくのはなかなか大変な作業になります。そこで最低限必要なルールを決めておき、実際の開発を通してカスタマイズをしていくのがよいでしょう。

yannickcr/eslint-plugin-react

もしくは、自分たちのガイドラインに近いものを見つけてライブラリを使って拡張するという方法があります。
特にメジャーなのがAirbnbの拡張ライブラリです。

.eslintignoreやpackage.json

.ignore系のファイルなどの更新も忘れずにやります。公式のものをそのまま流用したり、プロジェクトに合わせたりと様子を見つつやります。

.eslintignore

コマンドが打ちやすくなるようにpackage.jsonのカスタマイズをやります。
lintの実行や整形がしたければ、大抵yarn lintやyarn lint --fixなどで実行できるようにカスタマイズしています。

まとめ

ESLintも触りだすと楽しいです。
構文チェックもプラグインで幅広くカスタマイズできるのでバグも未然に防げる上、prettierの使用でコードも綺麗にできるため、自分でインデントをする手間が省けます。品質の高いコードや開発でチームのメンバーと統一したコードを書きたいときは入れるべきです。

関連記事