2026年版: 開発者の水分補給法

JavaScript開発の品質と効率を劇的に向上させるESLintとPrettierの導入と設定方法を徹底解説します。

現代のJavaScript開発において、コードの品質と一貫性を保つことはプロジェクト成功の鍵です。ESLintは潜在的なバグやスタイル違反を検出し、Prettierはコードフォーマットを自動化することで、開発者が本質的なロジックに集中できる環境を提供します。

この記事では、両ツールの基本的な導入からVS Codeとの連携、さらに高度なカスタマイズやCI/CDパイプラインへの組み込みまで、具体的な手順と設定例を交えて詳細に解説します。これにより、チーム全体の開発効率とコード品質を飛躍的に向上させることができるでしょう。

Contents

01ESLintとPrettierの重要性

ESLintとPrettierの重要性

現代のソフトウェア開発、特に大規模なチーム開発では、コードの品質と一貫性を維持することがプロジェクトの成功に不可欠です。ESLintとPrettierは、この課題を解決するための強力なツールとして広く採用されています。

これらのツールを導入することで、開発者はコードレビューの負担を軽減し、より本質的なビジネスロジックの開発に集中できるようになります。また、新しい開発者がプロジェクトに参加した際も、既存のコードベースのスタイルに迅速に順応できるため、オンボーディングの効率も向上します。

ESLintとPrettierは、コード品質の自動化と開発体験の向上という二つの側面から、JavaScript開発を大きく支える基盤となります。

ESLintとは？

ESLintは、JavaScriptコードの静的解析ツールであり、コード内の問題（バグの可能性、スタイル違反、アンチパターンなど）を特定し、修正を提案します。設定ファイル（.eslintrc.*）に基づいて、プロジェクト固有のコーディング規約を強制できます。

例えば、未使用の変数、グローバル変数の誤用、特定の構文の使用禁止など、多岐にわたるルールを適用可能です。これにより、潜在的なランタイムエラーを開発段階で発見し、未然に防ぐことができます。ESLintは、単なるスタイルチェックにとどまらず、コードの「品質」そのものを高める役割を果たします。

ESLintは非常に柔軟で、プラグインや共有設定（例: Airbnb, Google）を通じて、様々な環境やフレームワーク（React, Vue, Node.jsなど）に対応できます。これにより、プロジェクトの要件に合わせた最適なルールセットを構築することが可能です。

Prettierとは？

Prettierは、コードフォーマッターであり、指定されたルールに基づいてコードを自動的に整形します。セミコロンの有無、インデントのスタイル、引用符の種類、行の最大長など、主にコードの見た目に関する一貫性を保証します。開発者が手動でフォーマットする手間を省き、コードのレビューをより内容に集中できるようにします。

Prettierの最大の特徴は、設定可能なオプションが比較的少ないことです。これは「意見のあるフォーマッター」として設計されており、開発者間のフォーマットに関する議論をなくし、ツールに任せることで生産性を向上させることを目的としています。これにより、プロジェクト内のすべてのコードが統一された美しい見た目になります。

PrettierはJavaScriptだけでなく、TypeScript, CSS, HTML, JSON, Markdownなど、多くの言語に対応しています。そのため、フロントエンド開発において非常に汎用性の高いツールとして活用できます。

なぜ両方必要なのか？

ESLintとPrettierは、どちらもコードの品質を向上させるツールですが、その役割は異なります。ESLintは主に「コード品質」と「潜在的なバグ」を検出し、Prettierは「コードの見た目」と「一貫性」を保ちます。このため、両方を組み合わせて使用することが、最も効果的な開発環境を構築するための鍵となります。

例えば、ESLintは「未使用の変数があるか」を警告しますが、Prettierは「インデントがスペース2つかタブか」を整形します。ESLintにはスタイルに関するルールも含まれますが、Prettierと競合する可能性があります。そのため、ESLintのスタイルに関するルールを無効化し、Prettierにフォーマットを一任するのが一般的なアプローチです。

両者を連携させることで、ESLintがコードの論理的な問題を指摘し、Prettierがコードを自動的に整形するという理想的なワークフローが実現します。これにより、開発者はより重要な課題に集中し、コードの品質と可読性を高めることができます。

プロジェクトへの導入手順

ESLintとPrettierをプロジェクトに導入する手順は、新規プロジェクトか既存プロジェクトかによって若干異なりますが、基本的な流れは同じです。ここでは、npm（Node Package Manager）またはYarnを使用することを前提に解説します。

まずは、プロジェクトのルートディレクトリでコマンドラインを開き、必要なパッケージをインストールすることから始めます。これらのツールは開発依存関係として追加されるため、devDependenciesに含めるのが一般的です。

新規プロジェクトの場合

新しいプロジェクトを開始する際は、まずpackage.jsonファイルを作成します。これにより、プロジェクトの依存関係を管理できるようになります。

以下のコマンドを実行して、package.jsonを作成し、デフォルト設定を受け入れます。

コード解説: npm init コマンドでpackage.jsonを初期化します。

npm init -y

これにより、プロジェクトの基本構造が整い、次のステップでESLintとPrettierをインストールする準備ができます。

既存プロジェクトの場合

既存のプロジェクトに導入する場合も、基本的には新規プロジェクトと同じ手順で進めます。すでにpackage.jsonが存在するはずなので、直接次のインストールステップに進むことができます。

ただし、既存のコードベースに大量のスタイル違反や潜在的なバグが存在する場合、一度にすべての修正を適用すると多くの変更が発生する可能性があります。このため、段階的に導入するか、一時的に一部のルールを緩めるなどの戦略を検討することも重要です。

既存のプロジェクトに導入する際は、まずESLintの--fixオプションやPrettierのフォーマット機能を試す前に、Gitで現在の状態をコミットしておくことを強く推奨します。これにより、問題が発生した場合でも容易に元の状態に戻すことができます。

npm/yarnでのインストール

ESLintとPrettier、そして両者を連携させるためのプラグインをインストールします。以下のコマンドで必要なパッケージを一括でインストールできます。

コード解説: 必要なESLintとPrettier関連パッケージを開発依存としてインストールします。

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

各パッケージの役割は以下の通りです。

eslint: ESLint本体
prettier: Prettier本体
eslint-config-prettier: ESLintのスタイル関連ルールを無効化し、Prettierと競合しないようにします。
eslint-plugin-prettier: PrettierをESLintのルールとして実行し、フォーマット違反をESLintのエラーとして報告します。

Yarnを使用している場合は、yarn add --devコマンドに置き換えてください。

ESLintの設定ファイル作成

ESLintの設定ファイルは、通常.eslintrc.js, .eslintrc.json, または.eslintrc.ymlという名前でプロジェクトのルートに配置します。以下のコマンドで対話形式で設定ファイルを生成できます。

コード解説: ESLintの初期設定を行います。質問に答えることで最適な設定ファイルが生成されます。

npx eslint --init

質問には以下のように答えるのが一般的です。

How would you like to use ESLint? To check syntax, find problems, and enforce code style
What type of modules does your project use? JavaScript modules (import/export)
Which framework does your project use? React (またはVue, Noneなどプロジェクトに合わせる)
Does your project use TypeScript? No (またはYes)
Where does your code run? Browser, Node (両方選択することが多い)
How would you like to define a style for your project? Use a popular style guide (またはAnswer questions about your style)
Which style guide do you want to follow? Airbnb (またはStandard, Googleなど)
What format do you want your config file to be in? JavaScript (またはJSON, YAML)
Would you like to install them now with npm? Yes

上記の手順で.eslintrc.jsが生成されたら、Prettierとの競合を避けるために設定ファイルを編集します。生成されたファイルにextendsプロパティを追加し、plugin:prettier/recommendedを含めます。

コード解説: ESLint設定ファイルにPrettier連携を追加し、競合するスタイルルールを無効化します。

// .eslintrc.js
module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true,
  },
  extends: [
    'airbnb-base', // または 'eslint:recommended', 'google' など
    'plugin:prettier/recommended', // ★ Prettierとの連携
  ],
  parserOptions: {
    ecmaVersion: 12, // または 2021 など
    sourceType: 'module',
  },
  rules: {
    // ここにプロジェクト固有のESLintルールを追加
    // 例: 'no-console': 'warn',
  },
};

これでESLintがPrettierのフォーマットルールを考慮し、競合を避けてくれるようになります。

Prettierの設定ファイル作成

Prettierの設定ファイルは、通常.prettierrc.js, .prettierrc.json, または.prettierrcという名前でプロジェクトのルートに配置します。

Prettierは「意見のあるフォーマッター」であるため、設定オプションは比較的少ないですが、プロジェクトの要件に合わせて調整することが可能です。一般的な設定例を以下に示します。

コード解説: Prettierのフォーマットルールを定義します。インデント、セミコロン、引用符などの設定を行います。

// .prettierrc.js
module.exports = {
  semi: true, // ステートメントの終わりにセミコロンを付ける
  trailingComma: 'es5', // 複数行の要素の末尾にカンマを付ける (es5, none, all)
  singleQuote: true, // シングルクォートを使用する
  printWidth: 100, // 行の最大長
  tabWidth: 2, // タブ幅
  useTabs: false, // タブではなくスペースを使用する
  arrowParens: 'always', // アロー関数の引数を常に括弧で囲む (always, avoid)
};

これらの設定は、プロジェクトのコーディング規約に合わせて適宜調整してください。例えば、多くのプロジェクトではtabWidth: 2とsingleQuote: trueがよく使われます。

VS Code連携と自動フォーマット

ESLintとPrettierの真価は、開発環境であるエディタとの密な連携によって最大限に発揮されます。特にVS Codeは、豊富な拡張機能と柔軟な設定により、両ツールとのシームレスな統合が可能です。これにより、コードを保存するたびに自動でフォーマットされ、潜在的な問題がリアルタイムでフィードバックされるようになります。

このセクションでは、VS CodeでESLintとPrettierを効果的に活用するための拡張機能のインストールから、保存時の自動フォーマット設定、そして競合を避けるためのVS Code設定の調整までを具体的に解説します。

必要な拡張機能

VS CodeでESLintとPrettierを使用するには、以下の拡張機能をインストールする必要があります。

ESLint: Microsoftが提供する公式拡張機能。ESLintの警告やエラーをVS Code上で表示し、修正を提案します。
Prettier – Code formatter: Prettier公式の拡張機能。Prettierの設定に基づいてコードをフォーマットします。

これらの拡張機能は、VS CodeのExtensionsビュー（Ctrl+Shift+XまたはCmd+Shift+X）で検索してインストールできます。

設定の調整

拡張機能をインストールしたら、VS Codeの設定（Ctrl+,またはCmd+,）を開き、以下の調整を行います。これにより、VS CodeのデフォルトフォーマッターとPrettierが競合しないようにし、ESLintが自動修正されるように設定します。

コード解説: VS Codeのsettings.jsonにPrettierをデフォルトフォーマッターとして設定し、保存時にフォーマットとESLintの自動修正を有効にします。

// settings.json (ユーザー設定またはワークスペース設定)
{
  "editor.defaultFormatter": "esbenp.prettier-vscode", // Prettierをデフォルトフォーマッターに設定
  "editor.formatOnSave": true, // 保存時にフォーマットを自動実行
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true // 保存時にESLintの自動修正を適用
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  // 必要に応じて他の言語も設定
}

これらの設定は、ユーザー設定（すべてのプロジェクトに適用）またはワークスペース設定（特定のプロジェクトのみに適用）として保存できます。チーム開発の場合は、.vscode/settings.jsonとしてワークスペース設定に含め、Gitで共有するのが一般的です。

特に重要なのは"editor.codeActionsOnSave": { "source.fixAll.eslint": true }の設定です。これにより、ESLintが修正可能な問題を保存時に自動で修正してくれるため、開発者は手動で修正する手間が省け、非常に効率的です。

保存時の自動フォーマット

上記の設定が完了すると、JavaScriptファイルを保存するたびに、以下の処理が自動的に行われます。

Prettierがコードをフォーマットします（インデント、セミコロン、引用符など）。
ESLintが修正可能な問題を自動で修正します（例: 未使用変数の削除、constからletへの変更など）。

これにより、開発者はコードのスタイルや単純なエラーに気を取られることなく、機能開発に集中できます。また、チームメンバー全員が同じフォーマットとルールでコードを書くことになるため、コードレビューもスムーズに進みます。

この自動化されたワークフローは、開発の生産性とコード品質を同時に向上させる最も効果的な方法の一つです。

高度な設定とカスタマイズ

ESLintとPrettierの基本的な設定だけでも十分な効果を発揮しますが、プロジェクトの特定の要件やチームのコーディング規約に合わせて、さらに詳細なカスタマイズを行うことが可能です。これにより、より厳密な品質管理や、特定の技術スタックへの最適化を実現できます。

このセクションでは、ESLintのルールを細かく調整する方法、Prettierのオプションを柔軟に設定する方法、そしてTypeScriptプロジェクトでの両ツールの連携方法について解説します。

ESLintルールのカスタマイズ

ESLintの設定ファイル（.eslintrc.jsなど）のrulesセクションで、個々のルールを上書きしたり、新しいルールを追加したりできます。各ルールには、"off" (無効化), "warn" (警告), "error" (エラー) のいずれかのレベルを設定できます。

例えば、console.logの使用を開発中に警告し、本番ビルドではエラーにするなどの設定が可能です。

コード解説: ESLintのルールをプロジェクトの要件に合わせてカスタマイズします。ここでは、特定のルールを警告またはエラーに設定しています。

// .eslintrc.js の rules セクション
rules: {
  'no-console': 'warn', // console.logを警告にする
  'no-debugger': 'error', // debuggerの使用をエラーにする
  'max-len': ['error', { code: 120, ignoreUrls: true }], // 行の最大長を120文字に設定し、URLは無視
  'prefer-const': 'error', // constが使える場合はconstを使用する
  'import/prefer-default-export': 'off', // export defaultを強制しない
  // Airbnbなどのスタイルガイドから特定のルールを無効化する場合
  'indent': 'off', // Prettierと競合するため無効化
  'quotes': ['error', 'single'], // シングルクォートを強制（Prettierと一致させる）
},

カスタムルールは、プロジェクトのコードベースの特性やチームの合意に基づいて慎重に決定することが重要です。厳しすぎるルールは開発の妨げになる可能性があり、緩すぎるルールは品質低下につながります。

特定のファイルやディレクトリに対してのみルールを適用したい場合は、overridesプロパティを使用できます。例えば、テストファイルでは特定のESLintルールを無効化するといった使い方が可能です。

Prettierオプションの調整

Prettierの設定ファイル（.prettierrc.jsなど）では、以下のようなオプションを調整できます。これらのオプションは、ESLintのスタイルルールと矛盾しないように設定することが重要です。

printWidth: (デフォルト 80) コードが折り返される行の最大長。長すぎる行は可読性を損なうため、プロジェクトで適切な値を設定します。例えば100や120など。
tabWidth: (デフォルト 2) インデントのスペース数。多くのJavaScriptプロジェクトでは2が一般的です。
useTabs: (デフォルト false) インデントにタブを使用するかどうか。通常はスペース（false）が推奨されます。
semi: (デフォルト true) ステートメントの最後にセミコロンを付けるかどうか。
singleQuote: (デフォルト false) シングルクォートを使用するかどうか。個人的な好みやチームの規約によります。
jsxSingleQuote: (デフォルト false) JSXでシングルクォートを使用するかどうか。
trailingComma: (デフォルト “es5”) 複数行の要素の末尾にカンマを付けるかどうか。"all"はGitの差分を減らす効果があります。
arrowParens: (デフォルト “always”) アロー関数の引数を常に括弧で囲むかどうか。"avoid"は単一引数の場合に括弧を省略します。

これらのオプションは、Prettierが提供するすべての設定のほんの一部です。詳細なリストはPrettierの公式ドキュメントを参照してください。チームで一度設定を決定したら、その設定をGitで共有し、全員が同じフォーマットを使用するように徹底することが重要です。

TypeScriptとの連携

TypeScriptプロジェクトでもESLintとPrettierは非常に強力なツールとなります。TypeScriptの型チェックとESLintのルールを組み合わせることで、JavaScript単体よりもさらに堅牢なコード品質を確保できます。

TypeScriptでESLintを使用するには、追加のパッケージと設定が必要です。まず、以下のパッケージをインストールします。

コード解説: TypeScriptプロジェクトでESLintを使用するために必要なパッケージをインストールします。

npm install --save-dev @typescript-eslint/eslint-plugin @typescript-eslint/parser

次に、.eslintrc.jsファイルを更新し、TypeScriptパーサーとプラグインを有効にします。

コード解説: ESLint設定ファイルにTypeScriptパーサーと推奨ルールを追加し、TypeScriptコードを正しく解析・チェックできるようにします。

// .eslintrc.js (TypeScript対応版)
module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true,
  },
  extends: [
    'airbnb-base', // または他のベース設定
    'plugin:@typescript-eslint/recommended', // ★ TypeScript推奨ルール
    'plugin:prettier/recommended',
  ],
  parser: '@typescript-eslint/parser', // ★ TypeScriptパーサーを使用
  parserOptions: {
    ecmaVersion: 12,
    sourceType: 'module',
    project: './tsconfig.json', // ★ TypeScriptプロジェクトのパスを指定
  },
  plugins: [
    '@typescript-eslint', // ★ TypeScriptプラグインを有効化
  ],
  rules: {
    // TypeScript固有のESLintルールや、既存ルールのオーバーライド
    'no-shadow': 'off', // @typescript-eslint/no-shadow と競合するため無効化
    '@typescript-eslint/no-shadow': ['error'],
    '@typescript-eslint/explicit-module-boundary-types': 'off', // 明示的な戻り値の型を強制しない
    '@typescript-eslint/no-unused-vars': ['warn', { argsIgnorePattern: '^_' }], // 未使用変数警告（_で始まる変数は無視）
  },
};

また、tsconfig.jsonファイルも正しく設定されていることを確認してください。ESLintはtsconfig.jsonを参照して型情報を取得し、より高度なルールを適用します。

PrettierはTypeScriptをネイティブでサポートしているため、追加の設定は通常不要です。TypeScriptファイルを保存するだけで、JavaScriptファイルと同様に自動でフォーマットされます。

CI/CDパイプラインへの組み込み

ESLintとPrettierを開発者のローカル環境で活用するだけでなく、CI/CD (継続的インテグレーション/継続的デリバリー) パイプラインに組み込むことで、コード品質の保証をさらに強化できます。これにより、チームメンバーがコミットするすべてのコードが、自動的に検証され、規定の品質基準を満たしていることが確認されます。

CI/CDパイプラインに組み込むことで、問題のあるコードがメインブランチにマージされることを防ぎ、早期に問題を検出・修正する「シフトレフト」の原則を実践できます。これは、長期的に見て開発コストを削減し、ソフトウェアの信頼性を向上させる上で非常に重要です。

Git Hooksの利用

Git Hooksは、Gitのリポジトリで特定のイベント（コミット前、プッシュ前など）が発生した際に、自動的にスクリプトを実行する機能です。これを利用して、コミット前にESLintとPrettierによるチェックと修正を強制することで、品質の低いコードがリポジトリにコミットされるのを防ぐことができます。

一般的には、huskyとlint-stagedというツールを組み合わせて使用します。

husky: Git Hooksを簡単に設定できるようにするツール。
lint-staged: Gitのステージングエリアにあるファイル（変更されたファイルのみ）に対してリンティングやフォーマットを実行するツール。

まず、これらのパッケージをインストールします。

コード解説: huskyとlint-stagedをインストールし、コミット前にリンティングとフォーマットを自動実行するように設定します。

npm install --save-dev husky lint-staged

次に、package.jsonに設定を追加します。

// package.json
{
  "name": "my-js-project",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
    "lint:fix": "eslint . --ext .js,.jsx,.ts,.tsx --fix",
    "format": "prettier --write .",
    "prepare": "husky install" // huskyのインストールコマンド
  },
  "devDependencies": {
    "eslint": "^8.0.0",
    "prettier": "^2.0.0",
    "eslint-config-prettier": "^8.0.0",
    "eslint-plugin-prettier": "^4.0.0",
    "@typescript-eslint/eslint-plugin": "^5.0.0",
    "@typescript-eslint/parser": "^5.0.0",
    "husky": "^8.0.0",
    "lint-staged": "^13.0.0"
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged" // コミット前にlint-stagedを実行
    }
  },
  "lint-staged": {
    "*.{js,jsx,ts,tsx}": [
      "eslint --fix", // ESLintで自動修正可能な問題を修正
      "prettier --write", // Prettierでフォーマット
      "git add" // 修正・フォーマットされたファイルをステージングエリアに戻す
    ],
    "*.{json,css,md}": [
      "prettier --write",
      "git add"
    ]
  }
}

設定後、以下のコマンドを実行してhuskyを初期化します。

コード解説: huskyをインストールし、Git Hooksを有効にします。

関連記事
2026年版: 集中力を高める習慣
開発者向け姿勢改善法2026
2026年版 デスクワーク疲れ解消法