ESLintとPrettierの違いと導入手順

JavaScriptやTypeScriptのプロジェクトでコードの品質を保つためには、ESLintやPrettierの導入がとても重要です。本記事では、それぞれの役割の違いや、併用する方法、導入手順を初心者向けに丁寧に解説します。

ESLintとは

ESLintは、JavaScriptやTypeScriptのコードに潜むエラーや、ベストプラクティスに反する記述を検出してくれる「静的解析ツール」です。例として、「未使用の変数」や「構文ミス」などを検出し、警告を表示してくれます。

Prettierとは

Prettierは、コードの見た目（整形）に特化した「コードフォーマッター」です。インデントやセミコロン、クォーテーションの統一など、読みやすいコードに自動で整えてくれます。エラー検出は行いません。

役割の違い

• ESLint：コードの構造や品質を検査（バグ・非推奨構文の検出など）
• Prettier：コードの見た目を統一（インデント、改行、記号など）

つまり、ESLintは「ルールに違反していないかを検査」、Prettierは「見た目を整える」ツールです。

併用のメリット

ESLintとPrettierを併用することで、コードの構文やルール違反を防ぎつつ、見た目も統一された読みやすいコードを保てます。ただし、ルールが重複しないように設定を調整する必要があります。

導入手順

1. 必要なパッケージをインストール

1npm install --save-dev eslint prettier eslint-config-prettier eslint-plugin-prettier

2. ESLintの初期化

1npx eslint --init

対話形式で質問に答えると、適切な設定が自動で生成されます。

3. .eslintrc.js に設定を追加

1module.exports = {
2  extends: [
3    'eslint:recommended',
4    'plugin:prettier/recommended'
5  ],
6  plugins: ['prettier'],
7  rules: {
8    'prettier/prettier': 'error'
9  }
10};

4. .prettierrc を作成（任意）

1{
2  "semi": false,
3  "singleQuote": true
4}

5. コードの整形と修正

1npx eslint . --fix

1npx prettier . --write

まとめ

• ESLintは構文やベストプラクティスのチェックを行う
• Prettierはコードの整形に特化している
• 併用することで、品質と可読性の両方を維持できる
• 導入時はルールの競合に注意し、専用のプラグインを利用する

チーム開発や長期運用されるプロジェクトでは、ESLintとPrettierを導入して、コードの品質と統一性を確保することが非常に重要です。ぜひプロジェクトに取り入れてみてください。