用語集 › 🛠️ 開発ツール › Prettier
【ぷりてぃあー】

Prettier とは？

💡 コードの見た目を自動で「きれいに」
📌 このページのポイント
Prettier によるコードフォーマット フォーマット前 const x={a:1,b:2, c:3}; if(x.a===1){ console.log( x )} バラバラなスタイル → フォーマット後 const x = { a: 1, b: 2, c: 3, }; if (x.a === 1) { 統一されたスタイル 設定不要で動作 多言語対応 保存時に自動整形 チーム全体でコードスタイルを自動統一
Prettierのイメージ
ひよこ ひよこ

PrettierとESLintの違いは？

ペンギン先生 ペンギン先生

Prettierはコードの「見た目」を整えるフォーマッター。インデント、改行位置、クォートの種類などを自動統一する。ESLintはコードの「品質」をチェックするリンター。未使用変数、型エラー、危険なパターンを検出する。両方を併用するのが一般的で、eslint-config-prettierでルールの衝突を防ぐよ

ひよこ ひよこ

なぜ設定項目が少ないの？

ペンギン先生 ペンギン先生

Prettierの思想は「スタイル議論に終止符を打つ」こと。タブvsスペース、セミコロンありなし…こういう議論は生産的じゃない。Prettierがほぼ全てを決めてくれるから、チーム内のスタイル論争がなくなる。設定できるのはインデント幅、セミコロン、クォートの種類など最小限だけだよ

ひよこ ひよこ

どうやって使うの？

ペンギン先生 ペンギン先生

npm install --save-dev prettierでインストールして、VS Codeの設定で「Format On Save」を有効にするのが最も一般的。.prettierrcファイルにチームの設定を書いてリポジトリにコミットする。CI/CDでprettier --checkを実行してフォーマット漏れを防ぐ運用もおすすめだよ

ひよこ ひよこ

おもしろい！Biomeっていう新しいツールも聞くけど？

ペンギン先生 ペンギン先生

Biome（旧Rome）はフォーマッターとリンターを1つのツールに統合したRust製ツールだよ。PrettierとESLintの両方の役割を高速にこなす。まだエコシステムが発展途上だけど、速度が桁違いに速いから注目されている。新規プロジェクトなら試してみる価値はあるね

ペンギン
まとめ：ざっくりこれだけ覚えればOK！
「Prettier」って出てきたら「コードの見た目を自動で統一するフォーマッター」と思えればだいたいOK！
📖 おまけ：英語の意味
「Prettier」 ＝ より美しく（prettyの比較級）
💬 Pretty（きれい）の比較級。コードをより美しくフォーマットするよ
🔗 あわせて読みたい
← 用語集にもどる