決定版!イマドキの ESLint 設定!
2021 年度版は Zenn に書きましたのでご覧ください。
そろそろ書かねばな、と思っていたところに必要としてくださる方がいらっしゃることがわかったので書きました。
eslint, eslint-plugin-prettier, typescript-eslintの組み合わせは僕の中では完全に鉄板になったんだけど、「決定版!イマドキのESLint設定!」みたいなタイトルの煽り記事を書く元気はないんだよな……
— なかざん (@Nkzn) June 1, 2020
2020 年 6 月現在のまとめです。
TL;DR
先にベースの完成形となる設定ファイルをおいておきます。 JSON に比べ YAML のほうが記述量が少なく構造が把握しやすいので YAML で書いています。次の内容をプロジェクトのルートディレクトリーに .eslintrc.yml
として保存してください。
--- env: es2020: true jest/globals: true parser: '@typescript-eslint/parser' parserOptions: project: ./tsconfig.json plugins: - jest - '@typescript-eslint' extends: - eslint:recommended - plugin:@typescript-eslint/eslint-recommended - plugin:@typescript-eslint/recommended - plugin:jest/recommended - prettier - prettier/@typescript-eslint
- 昨今の開発は TypeScript 前提なので
@typescript-eslint
から提供されているパッケージを使おう - ESLint が提供する Stylistic Issues ルールは使わず、 Prettier に任せよう
- オススメ設定を
extends
して設定にかける時間を最小限にしよう - これをベースに各フレームワークが推奨する設定を入れ込んでいこう
- プロジェクトやメンバーにあわせてルールを微調整しよう
TypeScript 用設定
typescript-eslint を用いましょう。 Getting Started を読みながら手を動かせばベースとなる設定が完成します。次は TypeScript に対応した最低限の設定となります。
--- env: es2020: true parser: '@typescript-eslint/parser' parserOptions: project: ./tsconfig.json plugins: - '@typescript-eslint' extends: - eslint:recommended - plugin:@typescript-eslint/eslint-recommended - plugin:@typescript-eslint/recommended
tsconfig.json 内部の設定に制限はないようです。プロジェクトでお使いの設定ファイルへのパスを指定してください。
extends
に各パッケージのオススメの設定を並べています。複数のオススメ設定に含まれているルールは下に書いたものの設定値で上書きされます。ここでは最初のベースとして eslint:recommended
を用い、 typescript-eslint
の推奨設定で上書いている形となります。
ターゲットとなるプラットフォームに応じて env
に設定を追加してください。ブラウザーの場合は broser: true
を、Node.js の場合は node: true
を追加すると良いでしょう。その他は公式ドキュメントに記載があるものを適宜追加しましょう。
Prettier 用設定
eslint-config-prettier を使います。 Installation を読みながら設定していきましょう。
--- env: es2020: true parser: '@typescript-eslint/parser' parserOptions: project: ./tsconfig.json plugins: - '@typescript-eslint' extends: - eslint:recommended - plugin:@typescript-eslint/eslint-recommended - plugin:@typescript-eslint/recommended - prettier - prettier/@typescript-eslint
extends
の最後に prettier
と prettier/@typescript-eslint
が増えています。
ここでのポイントはこれらを必ず extends
の最後に書くことです。その他のオススメ設定により Prettier と競合するルールが有効化されていたとしても、これらの値を最後に書くことで最終的に Prettier の挙動と整合性をとってくれます。
Jest 用設定
eslint-plugin-jest を使います。 Installation と Usage を読みながら設定してください。
--- env: es2020: true jest/globals: true parser: '@typescript-eslint/parser' parserOptions: project: ./tsconfig.json plugins: - jest - '@typescript-eslint' extends: - eslint:recommended - plugin:@typescript-eslint/eslint-recommended - plugin:@typescript-eslint/recommended - plugin:jest/recommended - prettier - prettier/@typescript-eslint
env
に jest/global: true
が、 plugin
に jest
が追加されています。
extends
にも plugin:jest/recommended
が追加されています。 Prettier と整合性をとるために中ほどへの追加となっていることに注意してください。
各ライブラリー / フレームワーク用の設定を追加する
ベースの設定に対して、各ライブラリー / フレームワークの導入ドキュメントに書いてあるとおりに設定を追加、変更していけば問題ありません。
ただし、 React は parserOptions
を変更する必要があるため、特記します。
React 用設定
--- env: es2020: true jest/globals: true parser: '@typescript-eslint/parser' parserOptions: project: ./tsconfig.json ecmaFeatures: jsx: true plugins: - react - jest - '@typescript-eslint' settings: react: version: detect extends: - eslint:recommended - plugin:@typescript-eslint/eslint-recommended - plugin:@typescript-eslint/recommended - plugin:react/recommended - plugin:jest/recommended - prettier - prettier/@typescript-eslint
@typescript-eslint/parser
は JSX を理解しますが、いままでの設定では有効化していませんでした。 parserOptions
に追加した ecmaFeatures
とその子 jsx
が有効化のための設定にあたります。
その他は eslint-plugin-react を用いて設定をしていきましょう。 settings
プロパティを追加して React のバージョンを指定しなければならない点は忘れがちなので気をつけましょう。
rules を使って自分好みに変更する
ここまででベースとなる設定ができあがっているため、あとはプロジェクトやメンバーにあわせた微調整です。とはいっても使用可能なルールが膨大なため、一覧をにらめっこしながら設定していくのは現実的ではありません。開発しながら微調整すれば良いでしょう。
基本的にオススメ設定は安全側に倒されているため、ルールの制約が強すぎると感じることがあるでしょう。そういった場合に該当のルールを off
にしたりより細かい設定をするなど検討してみてください。
例えば関数の返り値の型は TypeScript の推論に任せる書き方とする、とプロジェクトで定めた場合、次のような警告は必要のないものでしょう。
6:1 warning Missing return type on function @typescript-eslint/explicit-function-return-type
ルール名がわかるので、公式サイトのルール説明を参照しつつ、次のようなルールを追加していきましょう。
# 略 rules: '@typescript-eslint/explicit-function-return-type': off
まとめ
この記事で説明した設定をテンプレートとしてまとめています。
こういったテンプレートを使ったり、設定ファイルの使いまわしをして効果的に時短しましょう。