Prettierの導入手順まとめ（VSCode＋プロジェクト）

Prettierとは

Prettierは、コードの見た目（インデント・改行・クォーテーションなど）を自動で整えてくれるフォーマッターです。
人によってバラつきが出やすいコードスタイルを統一し、可読性の向上やレビューの効率化に役立ちます。

ESLintとの違い

• Prettier：コードの「見た目」を整える
• ESLint：コードの「問題（バグやアンチパターン）」を検出する

そのため、両方を組み合わせて使うことが一般的です。

PrettierはインストールしただけではVSCodeで自動フォーマットされない

プロジェクトにPrettierをインストールしただけでは、VSCodeで自動フォーマットは行われません。
コマンドでの実行（npx prettier）や手動フォーマットは可能ですが、保存時に自動整形されないため不便です。

そのため、VSCodeで快適に利用するには以下の設定が必要になります。

1. VSCodeでPrettierを使う準備

拡張機能にある Prettier - Code formatter をインストールします

2. VSCodeでの設定

1. Editor: Default Formatter に Prettier - Code formatter を選択
2. Editor: Format On Save にチェックを入れる

※ この設定を行うことで、保存時に自動でフォーマットされるようになります。

3. プロジェクトでPrettierを導入

npm install -D prettier

プロジェクト内のファイルを一括でPrettierにフォーマットするコマンド

npx prettier --write .

※ Prettierをインストールしただけでは、VSCodeで自動フォーマットは行われません。
VSCode側の設定も必要になります。

ESLintと連携

1. ESLintとPrettierを併用するためのパッケージをインストール

   npm install -D eslint eslint-config-prettier
   

   ※ eslint-config-prettier は、ESLintのフォーマット関連のルールを無効化し、Prettierと競合しないようにするための設定です。
2. ESLintの設定に eslint-config-prettier を追加
   eslint.config.js

   export default defineConfig([
     {
       extends: [
         // 既存の設定
         // ...
   
         // Prettierを追加
         prettier,
       ],
     },
   ]);
   

3. （Reactの場合のみ）追加設定

   npm install -D eslint-plugin-react
   

まとめ

PrettierはVSCode拡張だけでも利用できますが、チーム開発ではプロジェクトにも導入することでコードスタイルを統一できます。
また、保存時に自動フォーマットを行うには、VSCode側の設定もあわせて行うことが重要です。
インストールだけでは動かない点を理解しておくことが重要です。