【いーえすりんと】

ESLint とは?

💡 コードの「自動校正ツール」—ルール違反を即座に指摘
📌 このページのポイント
ESLint(コード品質チェック) const x = 1; var y = 2 if(x == y){ console.log(x) } ソースコード ESLint ルールに基づき 静的解析 🔍 AST解析 検出結果 no-var: varは使用禁止 eqeqeq: ===を使おう semi: セミコロン必須 1 error, 2 warnings 設定ファイル(.eslintrc)でルールをカスタマイズ "error" → ビルド失敗 "warn" → 警告のみ "off" → チェックしない
ESLintのイメージ
ひよこ ひよこ

ESLintって何をチェックするの?

ペンギン先生 ペンギン先生

①潜在的なバグ(未使用の変数、到達不能なコード、nullの可能性)、②コーディング規約(セミコロンの有無、インデントの深さ)、③ベストプラクティス(===の使用推奨、var禁止)。VSCode拡張を入れれば、コードを書いた瞬間に赤線で教えてくれるよ

ひよこ ひよこ

おもしろい!Prettierとの違いは?

ペンギン先生 ペンギン先生

ESLintは「コードの質」をチェック(バグの可能性、アンチパターン)。Prettierは「コードのフォーマット」を統一(インデント、改行、括弧の位置)。役割が違うから両方使うのがベスト。ESLintのフォーマット系ルールをオフにして、フォーマットPrettierに任せるのが現代の標準構成だよ

ひよこ ひよこ

おすすめの設定は?

ペンギン先生 ペンギン先生

eslint-config-next(Next.jsプロジェクト)、typescript-eslint(TypeScript)が定番。strictルールを有効にして、チームで合意したルールだけカスタマイズする。「eslint --fix」をpre-commitフック(huskyとlint-staged)で自動実行すれば、ルール違反がコミットされることを防げるよ

ひよこ ひよこ

Biomeって何?

ペンギン先生 ペンギン先生

ESLintとPrettierを1つにまとめた新しいツールだよ。Rustで書かれていて超高速(ESLintの10〜100倍)。設定がシンプルで、lintとformatを1ツールで完結できる。まだプラグインエコシステムはESLintに及ばないけど、新規プロジェクトなら検討する価値があるよ

ペンギン
まとめ:ざっくりこれだけ覚えればOK!
「ESLint」って出てきたら「JS/TSのコード品質チェックツール」と思えればだいたいOK!
📖 おまけ:英語の意味
「ESLint」 = イーエスリント
💬 ES(ECMAScript=JavaScript)のLint(コードチェック)ツールだよ
← 用語集にもどる