最近、ESLintの設定について考えてた。チームでコード書くなら、やっぱり必須だし。知ってる？昔から鉄板だったAirbnbのルール。すごく人気だったよね。僕もずっと使ってたし。
でも、あれ、もう3年以上更新されてないんだよね…。正直、これが結構な問題で。特に、最新のESLint v9で導入された新しい設定方式、フラットコンフィグに対応してないのが致命的。
じゃあどうするかって話。そこで出てくるのが、今日の本題。eslint-config-airbnb-extended。まあ、名前の通り、Airbnb設定の拡張版みたいなやつ。
で、これ何がいいの？
一言で言うと、「現代版のAirbnbルール」かな。古い.eslintrcファイルを使うやり方から完全に脱却して、ESLint v9以降の標準になった「フラットコンフィグ」（eslint.config.mjs）に特化して作られてる。ここが一番大きい。
つまり、もう古いやり方に悩まされなくていい。しかも、JavaScriptだけじゃなくて、TypeScriptにも標準で対応してる。これもかなり助かるポイント。
基本的な思想はAirbnbのスタイルガイドを引き継いでるから、あの厳格で一貫性のある感じはそのまま。その上で、現代的な開発に必要なものが色々追加されてる感じ。
どうやって始める？【クイックスタート】
セットアップは、びっくりするくらい簡単。昔みたいに一つずつプラグイン入れたり、設定ファイルとにらめっこしたり…みたいなのは、もうしなくていい。
ターミナルで、プロジェクトのルートディレクトリに移動して、これを実行するだけ。
npx create-airbnb-x-config
そうすると、対話式のツールが立ち上がって、いくつか質問される。
- 使ってるパッケージマネージャー（npm/yarn/pnpm）はどれ？とか。これは自動で検出してくれる。
- 必要なパッケージを全部インストールしてくれる。
- 最終的に、コピペするだけの
eslint.config.mjsの中身を提示してくれる。
マジでこれだけで終わる。初めて導入する人には、絶対この方法がおすすめ。手動でやりたい人向けの方法もドキュメントにはあるけど、まあ、最初はこれで十分じゃないかな。
主な機能とか、何ができるのか
このパッケージがやってくれること、ざっとまとめるとこんな感じ。
- ReactとJSXのサポート:
eslint-plugin-reactとかeslint-plugin-jsx-a11yを使って、Reactコンポーネントの書き方をチェックしてくれる。アクセシビリティのルールも入ってるのが良い。 - React Hooksのルール: Hooksのよくある間違いを防いでくれるやつ。
eslint-plugin-react-hooksのおかげで、依存配列の漏れとかを指摘してくれる。これは本当に助かる。 - Prettierとの連携: ここも大事。コードフォーマッターのPrettierと喧嘩しないように、
eslint-config-prettierがちゃんと設定されてる。フォーマットはPrettier、コードの品質はESLint、っていう役割分担が綺麗にできる。 - インポート文の整理:
eslint-import-xが、ごちゃごちゃしがちなimport文を綺麗に整理してくれる。特にTypeScriptのパスエイリアス（@/components/...みたいなやつ）にも対応してるのが便利。 - Node.jsのベストプラクティス: バックエンドのコード品質を上げるためのルールも含まれてる。
eslint-plugin-nが入ってる。
要するに、フロントエンドからバックエンドまで、現代的なJavaScript/TypeScript開発で「これ、欲しかったんだよね」っていうのが大体入ってる全部盛りセット、みたいな感じかな。
もっと厳しくできる？「Strictモード」の話
で、ここからがもっと面白いところ。この設定には、デフォルトではオフになってる「厳格な（Strict）ルールセット」が用意されてる。
正直、これを有効にすると、最初はLinterにめちゃくちゃ怒られる。でも、コードの品質をもう一段階上げたいなら、絶対試す価値はある。特にチーム開発では、この「厳しさ」が後々のコードレビューのコストを劇的に下げてくれる。
日本の大きなテック企業の社内コーディング規約とかって、こういう細かい部分まで結構厳しく決められてたりするよね。それに近いレベルの統制を、OSSの力で手軽に導入できる感じ。一方で、海外のドキュメント、例えばESLint公式なんかは「ルールは自分で選ぶもの」という思想が強いけど、このパッケージは「良いとされてる強いルール」をあらかじめセットで提供してくれるのが親切。
具体的にどんなルールがあるのか、ちょっと見てみようか。
| ルールセット | 何をしてくれるか（僕なりの解釈） |
|---|---|
| インポート文 (importsStrict) |
import文の順番を強制的に揃える。最初は「そこまで？」って思うけど、ファイルの上部がいつも同じ構造になるのは、読みやすさに直結する。特に`type`インポートを分離してくれるのが地味に嬉しい。 |
| React (react.strict) |
これも便利。propsをアルファベット順にソートしたりとか。あと、TypeScript使ってるなら不要な`prop-types`を無効にしてくれたり。mapで展開する要素に`key`がない、みたいなありがちなミスもちゃんと怒ってくれる。 |
| TypeScript (typescriptEslintStrict) |
これが一番「痛い」けど、一番効果があるやつかも。`any`型を禁止したり、`@ts-ignore`じゃなくて理由を書く`@ts-expect-error`を推奨したり。安易な「!」（non-null assertion）も禁止。代わりに`?.`とか`??`を使えってこと。バグを未然に防ぐための、愛のある厳しさだね。 |
これらの厳格ルール、最初は本当に「うるさいな…」って感じると思う。僕もそうだった。でも、慣れてくると、これがないコードベースが怖く感じるようになる。なんていうか、コードの「安全装置」みたいなものだから。
まとめというか、今の所の感想
長々と書いたけど、要するに、
「ESLint v9以降を使うなら、もう古いAirbnb設定に固執する理由はない。eslint-config-airbnb-extendedを使えば、もっと簡単に、もっと強力な静的解析の恩恵を受けられるよ」
ってことかな。特にこれから新しいプロジェクトを始めるとか、既存のプロジェクトのリンター設定を見直したい、って思ってる人には、すごく良い選択肢だと思う。
セットアップは一瞬で終わるし、TypeScriptにも対応してるし、Prettierとも仲良くしてくれる。で、もし、もっとコード品質にこだわりたいなら、「Strictモード」っていう奥の手もある。
完璧なツールなんてないけど、これはかなり「今の答え」に近いんじゃないかな。個人的にはそう思ってる。
それで、ちょっと聞いてみたいんだけど、もしこういうStrictルールを使ったことがある人がいたら。どのルールが一番「効いた」とか、逆に「これはやりすぎだろ！」って思ったとか、ありますか？もしよかったら、下で教えてくれると嬉しいです。
