もうコードの整形で悩まない！Prettier 入門ガイド
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
まとめ
Prettier を導入するメリットを改めて整理すると、次の3点に集約されます。
-
コードスタイルの議論がなくなる ― ルールは Prettier が決めてくれる
-
保存するだけで整形が完了する ― 手動調整の手間がゼロになる
-
導入コストが低い ― インストール＋数行の設定で今日から使える
まだ導入していないプロジェクトがあれば、ぜひ試してみてください。一度使い始めると、Prettier なしの開発には戻れなくなるはずです。
