Blog2026.04.11

もうコードの整形で悩まない！Prettier 入門ガイド

Prettier とは？
Prettier が解決してくれること
インストール方法
基本的な使い方
コマンドラインで実行する
VS Code で自動整形する
設定ファイルの作り方
主要オプション一覧
特定のファイルを除外する
ESLint との使い分け
package.json にスクリプトを登録する
まとめ

Prettier とは？

Prettier は コードフォーマッター（自動整形ツール）です。書いたコードを保存するだけで、あらかじめ決めたルールに沿って自動的に整形してくれます。

対応言語は JavaScript / TypeScript をはじめ、HTML、CSS、JSON、Markdown、YAML など多岐にわたります。

Prettier が解決してくれること

スタイルの統一 ― 開発者ごとの書き方のバラつきをなくす
レビューコストの削減 ― 「ここのインデントが…」というやりとりが消える
時間の節約 ― 手動で揃える作業が不要になる

ポイントは「設定項目が少ない」こと。ESLint のようにルールを何十個も選ぶ必要がなく、最小限のオプションで”いい感じ”に整形してくれる、という設計思想になっています。

インストール方法

npm または yarn でプロジェクトにインストールします。

# npm の場合 npm install --save-dev prettier # yarn の場合 yarn add --dev prettier

グローバルインストールも可能ですが、チームでバージョンを揃えるためにプロジェクトローカルでの導入がおすすめです。

基本的な使い方

コマンドラインで実行する

# 特定のファイルを整形 npx prettier --write src/index.js # src ディレクトリ配下をまとめて整形 npx prettier --write "src/**/*.{js,ts,css,json}" # 整形せず差分だけ確認（CI 向け） npx prettier --check "src/**/*.{js,ts,css,json}"

--write を付けるとファイルを直接書き換えます。まずは --check で差分を確認してから実行すると安心です。

VS Code で自動整形する

多くの開発者は VS Code の拡張機能と組み合わせて使っています。

拡張機能「Prettier – Code formatter」をインストール
settings.json に以下を追加

{ "editor.defaultFormatter": "esbenp.prettier-vscode", "editor.formatOnSave": true }

これでファイル保存時に自動整形されるようになります。

設定ファイルの作り方

プロジェクトのルートに .prettierrc を作成します。JSON 形式で書くのが一般的です。

{ "semi": true, "singleQuote": true, "tabWidth": 2, "trailingComma": "all", "printWidth": 80 }

主要オプション一覧

オプションデフォルト値説明 semi true 文末にセミコロンを付けるか singleQuote false シングルクォートを使うか tabWidth 2 インデントのスペース数 trailingComma "all" 末尾カンマを付けるか printWidth 80 1行の最大文字数（この幅を超えると折り返す） useTabs false スペースの代わりにタブを使うか bracketSpacing true オブジェクトリテラルの { } 内にスペースを入れるか arrowParens "always" アロー関数の引数が1つの場合に括弧を付けるか

設定の好みはチームによって異なりますが、Prettier の公式ドキュメントではデフォルトのまま使うことが推奨されています。カスタマイズは必要最小限にとどめましょう。

特定のファイルを除外する

整形したくないファイルがある場合は、.prettierignore をプロジェクトルートに作成します。書き方は .gitignore と同じです。

# ビルド成果物 dist/ build/ # 自動生成ファイル *.min.js package-lock.json

ESLint との使い分け

Prettier と ESLint は役割が異なります。

Prettier → コードの「見た目」を整える（インデント、改行、クォートなど）
ESLint → コードの「品質」をチェックする（未使用変数、型の不一致など）

両方を併用する場合は、ルールが競合しないように eslint-config-prettier を導入します。

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

ESLint の設定ファイルで prettier を extends の最後に追加すれば、ESLint 側のフォーマット系ルールが無効化され、Prettier に整形を任せられます。

{ "extends": ["eslint:recommended", "prettier"] }

package.json にスクリプトを登録する

よく使うコマンドは package.json にまとめておくと便利です。

{ "scripts": { "format": "prettier --write \"src/**/*.{js,ts,jsx,tsx,css,json}\"", "format:check": "prettier --check \"src/**/*.{js,ts,jsx,tsx,css,json}\"" } } # 整形を実行 npm run format # CI で整形漏れをチェック npm run format:check