サンプルコードで身につける: Prettier — 整形の議論を終わらせるフォーマッタ

解説で学んだ概念を、5つの具体例で確認します。素朴な例から実務寄りの例へと進みます。

1Prettierの導入と一括整形

Prettierは開発時だけ使う道具なので-Dで入れます。--writeは整形して上書き、--checkは整形済みかの確認だけを行います。--checkはCIで「整形されていないコードを弾く」用途に使います。

# 開発用の依存として Prettier をインストール
npm install -D prettier

# プロジェクト全体を整形して上書きする
npx prettier --write .

# 整形済みかどうかを確認だけする(CI 向け。書き換えはしない)
npx prettier --check .
# => 未整形のファイルがあると一覧表示され、終了コードが 1 になる

2.prettierrc.jsonでルールを一度だけ決める

設定ファイルをリポジトリに含めると、全員のエディタとCIが同じルールで整形します。項目は少なく、迷ったら既定値のままで十分です。決めた後は見た目の議論をしないのがポイントです。

// .prettierrc.json — チームで一度だけ決める整形ルール
{
  "printWidth": 100,
  "singleQuote": true,
  "tabWidth": 2,
  "semi": true,
  "trailingComma": "all"
}

// このファイルをリポジトリに含めることで、
// 全員のエディタ・CI が同じルールで整形するようになる

3整形前と整形後 — 差分から見た目の議論が消える

どんな書き方で保存しても、Prettierを通すと同じ形に揃います。書いた人のクセが差分に現れなくなるので、レビューでは変更の中身だけを見ればよくなります。

// ── Before: 書いた人のクセが出ているコード ──
// const user={name:"Tanaka",age:28,roles:["admin","editor"]}
// function isAdmin(u:{roles:string[]}){return u.roles.includes("admin")}

// ── After: Prettier を通した後(誰が書いても必ずこの形になる)──
const user = { name: 'Tanaka', age: 28, roles: ['admin', 'editor'] };

function isAdmin(u: { roles: string[] }): boolean {
  return u.roles.includes('admin');
}

4保存時整形のエディタ設定(VS Code)

保存のたびに自動整形されるようにすれば、整形コマンドの実行を忘れる心配がなくなります。この設定を.vscode/settings.jsonとしてリポジトリに含めると、チーム全員に同じ動きが行き渡ります。

// .vscode/settings.json — 保存時に Prettier で自動整形する
{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true
}

// ・拡張機能「Prettier - Code formatter」のインストールが前提
// ・このファイルをリポジトリに含めれば、チーム全員が同じ動きになる

5ESLintとの衝突を避ける — 役割分担の仕上げ

ESLintにも整形系のルールがあるため、そのままではPrettierと指摘が衝突することがあります。eslint-config-prettierを最後に適用すると、ESLint側の整形系ルールが無効になり、整形はPrettierに一本化されます。

# ESLint の整形系ルールを無効化する設定を導入
npm install -D eslint-config-prettier

# eslint.config.js の設定配列の最後に追加する:
#   import prettierConfig from 'eslint-config-prettier';
#   export default [ ...既存の設定, prettierConfig ];

# 役割分担の完成形:
#   ESLint   → 品質(バグの芽・危険な書き方)だけを見る
#   Prettier → 見た目(整形)だけを受け持つ
#   → 同じ行に2つの道具が別々の指摘をする状態がなくなる