ESLintとPrettierの違いとは？役割・使い分け・組み合わせ方を徹底解説【2026年版】

JavaScriptやTypeScriptの開発現場では、ESLintとPrettierはほぼセットで使われる定番ツールです。しかし「どちらも似たようなことをしているのでは？」と混乱する方も多いでしょう。この記事では、ESLintとPrettierの根本的な役割の違いと、2つを組み合わせる理由・方法を徹底解説します。

ESLintとPrettierの最大の違い
ESLintとは？コード品質を守るリンター
1. ESLintが検出する主な問題
Prettierとは？コードフォーマットの自動化ツール
1. Prettierが整形する主な要素
なぜ2つを同時に使うのか？
1. 推奨セットアップ手順
ESLintとPrettierの使い分けまとめ

ESLintとPrettierの最大の違い

一言で表すなら、ESLintは「コードの品質」、Prettierは「コードの見た目」を担当します。この役割の違いが、2つが共存する理由です。

項目	ESLint	Prettier
主な役割	コード品質チェック・バグ防止	コードフォーマット（整形）
検出対象	未使用変数、型エラー、潜在バグ	インデント、改行、クォートスタイル
自動修正	一部のみ（–fixオプション）	ほぼ全て自動修正
設定の柔軟性	高い（ルールを細かく設定）	低い（意図的に選択肢を減らす）
開発元	OpenJS Foundation	Prettier（OSSコミュニティ）

ESLintとは？コード品質を守るリンター

ESLintはJavaScript/TypeScriptの静的解析ツール（リンター）です。コードを実行する前に、潜在的なバグや問題を検出する役割を担います。

ESLintが検出する主な問題

未使用の変数：宣言したが一度も使われていない変数を警告
== と === の混在：型安全でない比較を検出
console.logの残留：本番環境への混入を防ぐ
アクセシビリティ違反：eslint-plugin-jsx-a11yでReactのアクセシビリティをチェック
セキュリティリスク：eslint-plugin-securityで危険なコードパターンを検出

ESLintはルールを細かく設定できるのが特徴で、チームのコーディング規約に合わせてカスタマイズできます。たとえば「varを使ったら警告」「非同期処理でawaitを忘れたらエラー」などをルールとして定義可能です。

// .eslintrc.js の設定例
module.exports = {
  rules: {
    'no-unused-vars': 'error',   // 未使用変数はエラー
    'eqeqeq': 'warn',            // == の使用を警告
    'no-console': 'warn',        // console.log を警告
  }
};

Prettierとは？コードフォーマットの自動化ツール

Prettierは「意見のある（Opinionated）コードフォーマッター」です。インデント、改行、クォートスタイルなど、コードの見た目を自動的に統一します。

Prettierの最大の特徴は設定の選択肢が意図的に少ないことです。「スペース派 vs タブ派」「シングルクォート vs ダブルクォート」などのチーム内論争を終わらせるため、「ほぼ自動で決めてしまう」という思想で設計されています。

Prettierが整形する主な要素

インデントの幅（スペース2つ or 4つ）
末尾カンマの有無
セミコロンの有無
文字列のクォートスタイル
1行あたりの最大文字数（printWidth）

// .prettierrc の設定例
{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "printWidth": 80,
  "trailingComma": "es5"
}

なぜ2つを同時に使うのか？

ESLintもフォーマットルールを持っていますが（インデントなど）、Prettierほど強力ではありません。一方、PrettierはコードのロジックやバグをチェックしないためESLintが必要です。

組み合わせることで「バグのない + きれいなコード」を自動的に維持できます。ただし、2つを組み合わせるとルールが競合する場合があるため、eslint-config-prettierを使ってESLint側のフォーマット関連ルールを無効化するのが定番パターンです。

推奨セットアップ手順

# インストール
npm install --save-dev eslint prettier eslint-config-prettier

# .eslintrc.js に prettier を追加
module.exports = {
  extends: [
    'eslint:recommended',
    'prettier'  // 最後に追加してフォーマット系ルールを無効化
  ],
  rules: {
    'no-unused-vars': 'error',
    'no-console': 'warn'
  }
};