[ESLint] プラグインの中身を理解して、取り入れるルールの見直しをする
この記事は ESLint の設定の改善を目的として、 ESLint のプラグインの設定ルールの確認方法と具体的な改善例を記載していきます。
記事構成構成
- ESLint の各プラグインのルールのリンク集
- ESLint の改善事例
ESLint の各プラグインのルールのリンク集
ESLint の設定としてプラグインを使っているプロジェクトは多いのではないでしょうか。プラグインは便利な一方で、場合によってはルールを変更した方が開発がしやすくなるものもあります。
私はこれまで、必要だと感じたら ESLint ルールを調整するというやり方をとっていましたが、ルール全体を把握しておいた方が、普段書くコードの理解がより深まるなと感じました。そこで、いつでも見返せるようにリンクを用意しておきます。(記事執筆時では自分が現在使っているものだけです。今後追加していくかもしれません。)
- eslint:recoomended
- next/core-web-vitals
- Next.js | ESLint Plugin
-
next.js/packages/eslint-plugin-next/src/index.ts (GitHub) に記載されているルール(core-web-vitals 以外のルールも含む)
- next.js/packages/eslint-plugin-next/src/rules/ (GitHub) の各ファイルに個別のルール内容が記載されている
- 参考:Next.js | ESLint Plugin | With Core Web Vitals
- plugin:@typescript-eslint/recommended
- plugin:react/recommended
- airbnb
- airbnb-typescript
- prettier
※ ここではどのプラグインを取り入れるべきかは考慮していません。
どのプラグインも Web で検索、なかったら Github の README、それでもなかったら Github の コードの中から見つけるという流れになるかと。
一応、node_modules の中身を見て、ルールを見る方法もあります。
自分が使っているプラグインはもちろん、自分が使ってないプラグインも中身を把握しておけば、有用なルールを取り入れるきっかけになるので目を通しておくのは良さそうですね。
ESLint のルールの改善事例
最近、新しくジョインしたプロジェクトで ESLint が導入されているのに react/jsx-key
ルールが効いていないことに気づきました。私はこのルールは基本的には設定した方が良いと考えています。その理由は 3 点あって、不具合の防止とwarinigの削減、レビューの効率化です。
react/jsx-key
は React の JSX でリストを扱うときにパフォーマンス最適化や正しくレンダリングを行うためにでる warning に気づくためにあるものです。おそらく、React を触ったことがある方のほとんどは見覚えがあるかと。
簡単な例
const sampleArray = ['AAA', 'BBB', 'CCC']
const ListComponent = () => {
return (
<ul>
{items.map((item, index) => (
<li>{item}</li> // key が設定されていないと、warning が出る
))}
</ul>
);
}
人間が key
が設定されているかどうかを全てチェックするのは大変なので ESLint で対応したいです。.eslintrc.json の rules には特に react/jsx-key
はありません。このプロジェクトでは ESLint プラグインも導入されていて、どれかに入ってそうなのに入ってないのだろうかと思いました。
私は airbnb のプラグインを使ったことがなかったので、ルールを見ていくと 'react/jsx-key': 'off'
と書いてあり、理由も書いてありました。
// Validate JSX has key prop when in array or iterator
// https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-key.md
// Turned off because it has too many false positives
'react/jsx-key': 'off',
Turned off because it has too many false positives
と書いてありました。詳細な背景はわからないので仮説になってしまうのですが、ルールを決定した当時は不都合が生じていたのかもしれません。
他のルールのコメントも読んでいくと、ルールの説明が書いてありますし、ものによってはなぜその設定になっているかが書いてあるので理解が深まりますね。
私個人としては 'react/jsx-key'
があった方が良かったことが多かったです。原因がわかったので、.eslintrc.json の rules に 'react/jsx-key': 'warn'
と書けばひとまず良さそうですね。なお、airbnb-typescript のルールには 'react/jsx-key': 'off'
が記載されていないです。ルールの競合状況を見て、airbnb-typescript だけ残すというのも1つのやり方としては赤もしれません。
Discussion