ESLint 共有設定パッケージ徹底比較：Airbnb、Google、Prettier、Standard

ESLint の共有設定（shareable config）は、チーム開発やプロジェクト間で一貫したコードスタイルを維持するための強力な手段です。eslint-config-airbnb、eslint-config-google、eslint-config-prettier、eslint-config-standard はそれぞれ異なる哲学と目的を持ち、適切に選ぶことで開発体験が大きく変わります。この記事では、実際の現場で役立つ観点から、これらのパッケージを深く比較します。

🧭 基本的な役割と設計思想

まず、各パッケージが何を目的としているかを理解しましょう。

eslint-config-airbnb は Airbnb 社内で使われている JavaScript/React コーディング規約を公開したもので、細部まで厳密にルールを定めています。特に React プロジェクトでの利用を想定しており、可読性と保守性を最優先にしています。

eslint-config-google は Google の JavaScript スタイルガイドに基づいており、シンプルで一貫性のあるコードを促進します。型安全性やモダンな構文よりも、広い環境での動作保証を重視する傾向があります。

eslint-config-prettier は他の ESLint 設定と併用するために作られた「衝突解消用」パッケージです。Prettier が担当するフォーマット関連のルール（インデント、改行、セミコロンなど）を ESLint から無効化し、ツール間の競合を防ぎます。

eslint-config-standard は「設定不要」を謳う StandardJS プロジェクトの一部で、最小限のルールセットで一貫性を保ちつつ、過度な制約を避けます。半角スペース vs タブ、セミコロンの有無といった宗教論争を避ける設計になっています。

💡 重要なポイント：eslint-config-prettier は単体では意味がなく、必ず他の ESLint 設定と組み合わせて使用します。

🔧 実際の設定方法と依存関係

各パッケージの導入方法には大きな違いがあります。特に peer dependency の扱いに注意が必要です。

eslint-config-airbnb

Airbnb 設定は eslint-plugin-react、eslint-plugin-import、eslint-plugin-jsx-a11y などのプラグインに依存しています。そのため、インストール時には追加パッケージも必要です。

# 正しいインストール方法（公式推奨）
npx install-peerdeps --dev eslint-config-airbnb

.eslintrc.js:

module.exports = {
  extends: ['airbnb']
};

eslint-config-google

Google 設定は依存が少なく、シンプルに導入できます。

npm install --save-dev eslint-config-google

.eslintrc.js:

module.exports = {
  extends: ['google']
};

eslint-config-prettier

Prettier 設定は常に他の設定と併用します。通常は extends 配列の最後に指定することで、それまでのルールで有効化されたフォーマット系ルールを無効化します。

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

.eslintrc.js（例：Airbnb + Prettier）:

module.exports = {
  extends: ['airbnb', 'prettier']
};

eslint-config-standard

Standard 設定も依存が少なく、すぐに使えます。

npm install --save-dev eslint-config-standard

.eslintrc.js:

module.exports = {
  extends: ['standard']
};

🛑 ルールの厳しさと柔軟性

各設定がどのようなコードを許容するか、具体例で見ていきましょう。

セミコロンの有無

• Airbnb: 必須（semi: ["error", "always"]）
• Google: 必須（semi: ["error", "always"]）
• Standard: 禁止（semi: ["error", "never"]）
• Prettier: 無効化（他の設定に従う）

// Airbnb / Google → OK
const name = 'Alice';

// Standard → OK
const name = 'Alice'

インデントスタイル

• Airbnb: 2スペース（indent: ["error", 2]）
• Google: 2スペース（indent: ["error", 2]）
• Standard: 2スペース（indent: ["error", 2]）
• Prettier: 無効化

// 全ての設定で以下がOK
function greet() {
  console.log('Hello');
}

React に関するルール

• Airbnb: react/react-in-jsx-scope など React 専用ルール多数
• Google: React 未対応（JSX を使うとエラー）
• Standard: React 未対応（JSX を使うとエラー）
• Prettier: JSX 対応（ただしルール自体は無効化）

// Airbnb → OK
import React from 'react';
const App = () => <div>Hello</div>;

// Google / Standard → エラー（JSX not allowed in files with extension '.js' など）

🔄 Prettier との共存戦略

多くのチームが Prettier（コードフォーマッタ）と ESLint（静的解析）を併用していますが、両者が同じ領域（例：インデント、改行）をカバーすると競合が発生します。ここで eslint-config-prettier の出番です。

正しい統合パターン

// .eslintrc.js
module.exports = {
  extends: [
    'airbnb',        // または 'standard'、'google' など
    'prettier'       // 必ず最後に！
  ],
  plugins: [
    'prettier'       // eslint-plugin-prettier が必要な場合
  ]
};

この設定により、Prettier が担当するフォーマット系ルールが ESLint から無効化され、競合が解消されます。

⚠️ 注意：eslint-config-prettier だけでは Prettier のルールが ESLint に反映されるわけではありません。Prettier のルールを ESLint でチェックしたい場合は、別途 eslint-plugin-prettier が必要です。

🧪 実際のプロジェクトでの選定基準

大規模 React アプリケーション

• ✅ 推奨: eslint-config-airbnb + eslint-config-prettier
• 理由: React に特化した包括的なルールセットがあり、アクセシビリティやベストプラクティスも網羅。Prettier と組み合わせることでフォーマット競合を回避。

シンプルな Node.js スクリプトやライブラリ

• ✅ 推奨: eslint-config-standard + eslint-config-prettier
• 理由: 設定が最小限で、過度な制約がない。セミコロン不要派にも対応。

Google スタイルを強制したい企業内プロジェクト

• ✅ 推奨: eslint-config-google + eslint-config-prettier
• 理由: Google の公式スタイルガイドに準拠しており、社内規約との整合性が取りやすい。

既存のカスタム ESLint 設定に Prettier を追加したい場合

• ✅ 推奨: 既存設定 + eslint-config-prettier
• 理由: eslint-config-prettier は他の設定と組み合わせるためだけに存在するので、このケースが本来の使い方。

📌 まとめ：各パッケージの特徴と用途

💡 最終的なアドバイス

• React プロジェクトなら Airbnb 設定が無難 — ただし、Prettier と併用する場合は必ず eslint-config-prettier を追加してください。
• シンプルさを求めるなら Standard — 設定ファイルすら不要なほど軽量ですが、JSX は使えません。
• Prettier を使っているなら eslint-config-prettier は必須 — これは単体では使わず、他の設定と組み合わせてください。
• Google 設定は特定のニーズ向け — 一般的なフロントエンド開発ではあまり使われません。

ESLint の共有設定は「正しい答え」ではなく「チームの合意」に基づいて選ぶべきものです。上記の比較を参考に、あなたのプロジェクトに最も合うものを選んでください。