コード品質を向上させる5つのESLintプラグイン

ESLintの設定は完了しました。未使用の変数を検出し、セミコロンの欠落にフラグを立てます。しかし、コードベースには依然として微妙なバグ、一貫性のないインポート、コードレビューをすり抜けるアクセシビリティの問題が蓄積されています。デフォルトのルールだけでは不十分です。

ESLint 9では、従来の.eslintrc形式に代わってフラット設定(eslint.config.js)が導入されました。この変更により、プラグインの統合が簡素化され、設定がより予測可能になります。既に移行済みでも、まだ古い形式を使用している場合でも、適切なプラグインを使用することで、ESLintは基本的なチェッカーから真の品質ゲートへと変貌します。

ここでは、ツールを肥大化させることなく、モダンなフロントエンドプロジェクトの実際の問題に対処する5つのプラグインを紹介します。

typescript-eslint:TypeScriptプロジェクトのための型を考慮したリンティング

@typescript-eslintプラグインは、TypeScriptの型システムをリンティングワークフローに組み込みます。基本的な構文チェックとは異なり、型を考慮したルールは、コードの型を理解する必要がある問題を検出します。

nullを返す可能性のある関数を考えてみましょう。型を考慮したリンティングは、本番環境でランタイムエラーとして現れる安全でないアクセスパターンにフラグを立てます。no-floating-promisesのようなルールは忘れられたawait文を検出し、no-unnecessary-conditionは到達不可能なコード分岐を識別します。

大規模なコードベースでは、typescript-eslintはProject Serviceを提供しており、ファイル間でTypeScriptのプログラムインスタンスを再利用することでパフォーマンスを向上させます。これは、CI環境で数千のファイルをリンティングする際に重要です。

フラット設定では、プラグインを直接インポートし、推奨設定をスプレッドします。この設定は、標準のtypescript-eslintツールチェーンを使用する際、ESLint 9のフラット設定モデルとクリーンに統合されます。

eslint-plugin-import:モジュールの健全性とインポートの整理

eslint-plugin-importは、成長するコードベース全体でインポート文に蓄積される混乱を防ぎます。

このプラグインは、ランタイム前にスペルミスのあるパスを検出し、名前付きインポートが実際のエクスポートと一致することを保証し、微妙なバグを引き起こす循環依存にフラグを立てます。no-extraneous-dependenciesルールは、package.jsonにリストされていないパッケージのインポートを防ぎます。これはデプロイメント失敗の一般的な原因です。

import/orderルールは一貫したグループ化を強制します:最初に外部パッケージ、次に内部モジュール、そして相対インポートです。この一貫性により、ファイルがスキャン可能になり、コードレビュー中の差分がよりクリーンになります。

チームにとって、このプラグインはインポートの整理に関するスタイル論争を排除します。一度設定すれば、自動修正が残りを処理します。

eslint-plugin-unicorn:意見を持ったバグ防止

eslint-plugin-unicornは、微妙な問題を検出し、モダンなJavaScriptパターンを強制する100以上のルールを提供します。

for...ofの方が明確な場合にArray.forEachにフラグを立てます。Array.from({ length: 5 })を意図していた場合にnew Array(5)を検出します。クリーンアップハンドラーをスキップするprocess.exit()呼び出しを防ぎます。

このプラグインはモダンな構文への移行を促します:indexOf() !== -1よりもArray.includes()を優先し、グローバルフラグ付き正規表現よりもString.replaceAll()を提案し、古いNumberメソッドにフラグを立てます。

すべてのルールがすべてのチームに適合するわけではありません。推奨プリセットから始めて、コードベースの規約と競合するルールを無効にしてください。

eslint-plugin-jsx-a11y:JSXアクセシビリティリンティング

eslint-plugin-jsx-a11yは、ユーザーに届く前にJSXのアクセシビリティ問題を検出します。

このプラグインは、alt属性のない画像、アクセス可能な名前のないボタン、ラベルのないフォーム入力にフラグを立てます。キーボードナビゲーションを妨げるautoFocusの使用を検出し、非インタラクティブ要素のクリックハンドラーを識別します。

これらのルールはWCAG準拠を保証するものではありません。自動化ツールはアクセシビリティ問題の約30%を検出します。しかし、最も一般的なミスを防ぎ、日常的な開発にアクセシビリティの意識を組み込みます。

ユーザー向けアプリケーションを提供するチームにとって、このプラグインは不可欠です。アクセシビリティのバグは実際のユーザーに影響を与え、多くの管轄区域で法的影響を伴います。

@eslint/css:JavaScriptを超えたリンティング

ESLintはJavaScriptを超えて拡張されています。@eslint/cssプラグインは、スタイルシートに静的解析をもたらし、構文エラーを検出し、規約を強制します。

同様に、html-eslintはHTML構造を検証し、重複するID、欠落したlang属性、無効なネストにフラグを立てます。

これらのプラグインは、CSSモジュール、HTMLテンプレート、またはマークアップ品質がレンダリングに影響するコンポーネントライブラリを持つプロジェクトにとって重要です。別々のバリデーターを必要とするのではなく、単一のツールの下でリンティングワークフローを統一します。

関心の分離:リンティング vs フォーマッティング

1つの明確化:ESLintはコード品質を処理し、フォーマッティングは処理しません。セミコロン、引用符、インデントの管理はPrettierに任せましょう。eslint-config-prettierを使用してPrettierと競合するESLintルールを無効にし、両方のツールを別々に実行します。

この分離により、ESLint設定はスタイルの好みを強制するのではなく、バグの検出に集中できます。

まとめ

これら5つのプラグインは、型安全性、インポートの健全性、モダンなパターン、アクセシビリティ、クロス言語リンティングという異なる問題に対処します。段階的に追加してください。まず推奨プリセットを有効にし、チームが摩擦点を特定したらルールをカスタマイズします。

目標は最大限の厳格さではなく、出荷前に実際のバグを検出することです。

よくある質問

Understand every bug

Uncover frustrations, understand bugs and fix slowdowns like never before with OpenReplay — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data. Check our GitHub repo and join the thousands of developers in our community.