Prettier（コードフォーマッター）

Prettierとは？

Prettierは、コードを自動整形するオピニオネイテッド（独断的）なフォーマッターです。「何行まで」「シングルクォートかダブルクォートか」といったスタイル設定の余地をほぼ残さず、チーム内のスタイル論争を解決します。

対応言語

JavaScript・TypeScript・JSX・TSX・CSS・SCSS・HTML・JSON・Markdown・YAML・GraphQLなど多数。

ESLintとの違い

ツール	役割	修正対象
Prettier	コードフォーマット	インデント・改行・クォート等の見た目
ESLint	静的解析・バグ検出	ロジック的な問題・規約違反

設定ファイル（.prettierrc）

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

エディタ連携

VS Codeではesbenp.prettier-vscode拡張機能を入れ、「保存時にフォーマット」を有効にすると保存のたびに自動整形されます。

CI/CDへの組み込み

# フォーマットチェック（変更なし・exitコードで判定）
npx prettier --check .

# 自動フォーマット（ファイルを上書き）
npx prettier --write .

まとめ

Prettierはプロジェクト開始時に最初に導入すべきツールです。後から導入すると大量のdiffが発生するため、できるだけ早い段階で設定することを推奨します。