# Prettier の使い方と一括フォーマット

コードのフォーマットを統一することは、チーム開発において非常に重要です。Prettier は、JavaScript、TypeScript、JSON、CSS、HTML など多くの言語に対応したコードフォーマッターです。この記事では、Prettier の基本的な使い方と、プロジェクト全体を一括フォーマットする方法を解説します。

# Prettier とは

Prettier は、コードのスタイルを自動的に統一してくれるフォーマッターです。インデント、改行、引用符、セミコロンなどのスタイルを自動的に整形してくれます。

# 主な特徴

• 自動フォーマット：コードを保存時に自動的に整形
• 設定可能：プロジェクトごとに設定をカスタマイズ可能
• 多言語対応：JavaScript、TypeScript、JSON、CSS、HTML、Markdown など
• 意見が分かれる設定を排除：チーム内での議論を減らせる

# インストール方法

# npm でインストール

npm install --save-dev --save-exact prettier

# yarn でインストール

yarn add --dev --exact prettier

--save-exact オプションを付けることで、特定のバージョンを固定できます。チーム開発では、全員が同じバージョンを使うことが推奨されます。

# 設定ファイルの作成

プロジェクトのルートディレクトリに .prettierrc ファイルを作成して、フォーマットの設定を行います。

# .prettierrc の例

{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5",
  "printWidth": 80,
  "arrowParens": "always"
}

# 主な設定オプション

# .prettierignore ファイル

特定のファイルやディレクトリをフォーマット対象から除外する場合は、.prettierignore ファイルを作成します。

# ビルド成果物
dist/
build/
*.min.js

# 依存関係
node_modules/

# ログファイル
*.log

# 設定ファイル
package-lock.json
yarn.lock

# VSCode 拡張機能の使い方

VSCode で Prettier を使うには、拡張機能をインストールします。

# 拡張機能のインストール

1. VSCode を開く
2. 拡張機能タブ（Cmd+Shift+X / Ctrl+Shift+X）を開く
3. "Prettier - Code formatter" を検索
4. インストール

# 保存時に自動フォーマット

VSCode の設定（settings.json）に以下を追加すると、ファイル保存時に自動的にフォーマットされます。

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

# 手動でフォーマット

• Mac: Shift + Option + F
• Windows/Linux: Shift + Alt + F

または、コマンドパレット（Cmd+Shift+P / Ctrl+Shift+P）から "Format Document" を選択します。

# 一括フォーマットの方法

# コマンドラインで一括フォーマット

プロジェクト全体のファイルを一括フォーマットするには、以下のコマンドを実行します。

npx prettier --write .

特定のディレクトリやファイルのみをフォーマットする場合：

# 特定のディレクトリ
npx prettier --write src/

# 特定のファイル
npx prettier --write src/index.js

# 複数のファイルパターン
npx prettier --write "src/**/*.{js,ts,json}"

# package.json にスクリプトを追加

package.json にスクリプトを追加しておくと、簡単に実行できます。

{
  "scripts": {
    "format": "prettier --write .",
    "format:check": "prettier --check ."
  }
}

実行方法：

# フォーマット実行
npm run format

# フォーマットが必要かチェック（CI などで使用）
npm run format:check

# VSCode で一括フォーマット

1. コマンドパレット（Cmd+Shift+P / Ctrl+Shift+P）を開く
2. "Format Document" を検索して実行
3. または、エクスプローラーでフォルダを右クリック → "Format Document"

複数ファイルを一括フォーマットする場合：

1. エクスプローラーでフォルダを選択
2. 右クリック → "Format Document" を選択
3. すべてのファイルをフォーマットするか確認

# 特定のファイルタイプのみフォーマット

# JavaScript と TypeScript のみ
npx prettier --write "**/*.{js,ts}"

# JSON ファイルのみ
npx prettier --write "**/*.json"

# Markdown ファイルのみ
npx prettier --write "**/*.md"

# フォーマット前後の確認

フォーマットを実行する前に、どのファイルが変更されるか確認したい場合は、--check オプションを使用します。

npx prettier --check .

このコマンドは、フォーマットが必要なファイルをリストアップしますが、実際にはフォーマットしません。

# チーム開発での活用

# Git フックとの連携

husky と lint-staged を使って、コミット前に自動フォーマットを実行できます。

npm install --save-dev husky lint-staged

package.json に設定を追加：

{
  "lint-staged": {
    "*.{js,ts,json,md}": [
      "prettier --write"
    ]
  }
}

# CI/CD でのチェック

GitHub Actions などの CI/CD で、フォーマットが正しく行われているかチェックできます。

- name: Check formatting
  run: npm run format:check

# その他のフォーマットツール

# ESLint との併用

Prettier はコードスタイルを整形しますが、ESLint はコードの品質をチェックします。両方を併用する場合は、eslint-config-prettier を使って競合を回避します。

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

# 言語別のフォーマッター

• PHP: phpfmt, PHP CS Fixer
• Python: Black, autopep8
• Go: gofmt
• Rust: rustfmt

# まとめ

Prettier を使うことで、コードのスタイルを自動的に統一でき、チーム開発の効率が向上します。保存時の自動フォーマットと、一括フォーマットの両方を活用することで、コードの品質と一貫性を保つことができます。

# 推奨されるワークフロー

1. プロジェクト初期に .prettierrc を設定
2. VSCode で保存時に自動フォーマットを有効化
3. コミット前に npm run format で一括フォーマット
4. CI/CD でフォーマットチェックを実行

これにより、コードのスタイルに関する議論を減らし、開発に集中できる環境を構築できます。