【ぷりてぃあー】
Prettier とは？
最終更新:
💡 コードの見た目を、毎回同じルールで「きれいに」整える
コードフォーマッター（自動整形ツール）。JavaScript、TypeScript、CSS、HTML、JSON、Markdownなどのコードの見た目を、決まったスタイルに自動でそろえる。
📌 このページのポイント
ひよこ PrettierとESLintの違いは？
ペンギン先生 Prettierはインデントや改行の位置、クォートの種類など、コードの見た目を整えるフォーマッターだよ。ESLintは未使用の変数やバグにつながりやすい書き方を見つけるリンターなんだ。型の誤りはTypeScriptのチェックの担当だね。併用するときは、eslint-config-prettierで見た目に関するESLintのルールを止めて、ぶつからないようにするよ
ひよこ なぜ設定項目が少ないの？
ペンギン先生 Prettierを使ういちばんの理由は、スタイルの議論を終わらせることだからだよ。オプションを増やすと、今度は「どのオプションにするか」の議論になってしまうんだ。だから公式は、見た目に関するオプションの追加要望はもう受け付けないと決めているよ
ひよこ どうやって使うの？
ペンギン先生 公式は、チームで結果がずれないようにバージョンを固定してインストールすることをすすめているよ。.prettierrcに設定を書いてコミットし、エディタの拡張機能で保存時に整形するのが便利だね。CIでprettier --checkを動かせば、整形漏れに気づけるんだ
ひよこ おもしろい！Biomeっていう新しいツールも聞くけど？
まとめ：ざっくりこれだけ覚えればOK！
「Prettier」って出てきたら「コードの見た目を自動で統一するフォーマッター」と思えればだいたいOK！
📖 おまけ：英語の意味
「Prettier」 ＝ より美しく（prettyの比較級）
💬 Pretty（きれいな）の比較級だよ。コードを「よりきれいに」整えるツールにぴったりの名前だね