Prettier

Prettier とは

Prettier は、コードのフォーマットを自動的に統一するオピニオネイテッド (設定項目が少ない) なコードフォーマッターである。TypeScript、JavaScript、CSS、JSON、Markdown に対応。「フォーマットの議論をなくす」が設計思想。

ESLint vs Prettier

ESLint と Prettier の違いを以下にまとめる。

ツール	役割	例
ESLint	コード品質 (バグ検出)	未使用変数、== の使用
Prettier	コードフォーマット (見た目)	インデント、改行、クォート

ESLint: 「この変数は使われていません」 → コードの問題
Prettier: 「セミコロンを付けます」 → 見た目の統一

設定

設定の例を示す。

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

設定項目は意図的に少ない。「タブ vs スペース」「セミコロンの有無」程度しか選べない。

Biome (Prettier の代替)

Biome (Prettier の代替) を以下にまとめる。

観点	Prettier	Biome
速度	中	高速 (Rust 製)
機能	フォーマットのみ	フォーマット + リンター
設定	.prettierrc	biome.json
互換性	広い	Prettier 互換 (97%)

pre-commit hook での自動フォーマット

pre-commit hook での自動フォーマットの例を示す。

{
  "scripts": {
    "format": "prettier --write .",
    "format:check": "prettier --check ."
  },
  "lint-staged": {
    "*.{ts,tsx,js,json,md}": "prettier --write"
  }
}

コミット前に自動フォーマットし、フォーマットの不統一を防ぐ。

CI での検証

CI での検証の例を示す。

- run: npx prettier --check .
# フォーマットされていないファイルがあれば CI が失敗

SAM テンプレートのフォーマット

Prettier は YAML もフォーマットできるが、SAM テンプレートの !Ref や !Sub などの CloudFormation 固有構文で問題が起きる場合がある。YAML は .prettierignore で除外するか、専用のフォーマッターを使う。

フォーマッターの導入効果

コードレビューでフォーマットの指摘がなくなり、レビューの効率が上がる。全員が同じスタイルで書くため一貫性が保たれ、手動フォーマットが不要になり生産性が向上する。Git の差分からフォーマット変更のノイズがなくなり、実質的な変更だけが見えるようになる。

全体像を把握するには関連書籍も有用。