JavaScriptやTypeScriptを用いて開発をする際、ESLintとPrettierはもはや必須。
それぞれの違いやどう組み合わせて使うのかをまとめていきます。
1. ESLint
目的: ESLintは、コードの静的解析ツールです。主に、コードのバグ、問題、ベストプラクティスに反する部分を指摘してくれます。例えば、以下のような問題を検出します。
- 文法エラーやタイポ
- コードのスタイルに関するルール（例えば、セミコロンの有無、クォーテーションの種類など）
- 未使用の変数や不要なコード
- 一貫性のないコーディングスタイルやベストプラクティスに反するコード
設定: ESLintは、ルールセットをカスタマイズできるため、プロジェクトやチームのコーディング規約に応じて設定できます。また、様々なプラグインや拡張機能を追加することで、特定のフレームワーク（React、Vueなど）に適したルールを導入することが可能です。
2. Prettier
目的: Prettierは、コードフォーマッタです。コードのスタイル（フォーマット）を自動的に整え、統一感のあるコードを維持します。Prettierは以下のような部分を自動的に整形します。
- インデントやスペース
- 行の長さ
- 括弧やカンマの配置
- 改行の位置
設定: Prettierはあまり細かく設定できないように設計されています。デフォルトの設定に従って、すべてのコードをフォーマットすることで、一貫性を保つことを目的としています。
3. ESLintとPrettierの関係
重複する領域: ESLintとPrettierには、コードスタイルに関して重複する部分があります。例えば、どちらもインデントやクォーテーションのスタイルを管理することができます。ただし、ESLintはより広範なコード品質のチェックに重点を置いており、Prettierはフォーマットの自動化に特化しています。
コンフリクトの解消: ESLintとPrettierを一緒に使う場合、フォーマットに関するルールで競合が発生する可能性があります。このような場合、Prettierと競合するESLintルールを無効にするESLint設定で回避することができます。また、eslint-plugin-prettierを用いることで、PrettierをESLintのルールとして組み込むことができます。これにより、ESLintがPrettierのフォーマットを検証し、フォーマットが適用されていない場合に警告を出します。