Prettierは、JavaScript・TypeScript・CSS・HTML・Markdown・JSONなどを共通の規則で整形する「意見の強い」コードフォーマッタです。2017年1月、Mozilla在籍中だったジェイムス・ロング氏（reason.mlコミュニティでも知られる）が公開しました。「コードの見た目に関する議論を全部消す」ことを目的に、ユーザー側の設定項目を意図的に少なく絞り、ファイルをパース→ASTに変換→ルールに従って完全に書き直す、というアプローチを採ります。数年でフロントエンド開発のデファクト整形ツールとなり、現在は数百万のプロジェクトで採用されています。
この記事の目次
- AST再印字という設計
- 公開から急拡大まで
- 現場での運用パターン
- ESLintとの分担
- まとめ
AST再印字という設計
Prettierの最大の特徴は、コードを行単位で「差し替える」のではなく、ファイル全体を一度ASTに変換し、改めて整形ルールに従って完全に書き直す「reprint」方式を採る点です。これによりインデント・改行位置・クォート種別・括弧の有無といった見た目要素は、元のソースが何であれ全く同じ出力に揃います。Phil Wadler氏らの古典論文「A Prettier Printer」の理論を実装に落とし込んだ、というのが命名の由来でもあります。
もう一つの設計思想が「意見の強さ」です。Prettierは行幅・タブ幅・セミコロンの有無といったごく少数の設定だけ許し、それ以外の細かい好みはサポートしません。「2スペースか4スペースかで議論する時間を消し、ビジネスロジックに集中させる」という割り切りで、宗教論争を回避するために多少の自由を捨てる、というスタイルです。実際に、PR時のスタイル指摘がほぼ消滅したと多くの企業が報告しており、レビュー文化を変えたツールと評されます。
公開から急拡大まで
Prettierは2017年1月のオープンソース公開直後から急速に広まりました。作者のジェイムス・ロング氏は当時Mozillaに在籍しており、ReasonMLの開発者として既にコミュニティでの知名度がありました。公開から数か月でFacebook（現Meta）が社内採用に踏み切り、ReactリポジトリのCIに組み込んだことで一気に知名度が跳ね上がりました。同年中にはCristoph Nakazawa氏を中心とした有志メンテナチームに開発が引き継がれ、現在のガバナンスにつながっています。
2018年以降、Vue・Angular・Next.js・Reduxといった主要OSSがほぼ全てデフォルト整形をPrettierに置き換え、「Prettierが入っていないリポジトリは見た目で分かるほどになった」と語られるレベルにまで普及しました。現在も活発に更新が続いており、TypeScript 5の新構文、JSX・Astro・GraphQLなど対象範囲は年々拡張されています。「設定をいじらずに導入する」という採用ハードルの低さが、デファクト化を後押しした最大の要因です。
現場での運用パターン
Prettierは「導入直後に全ファイルを書き換える」ところから運用が始まります。初回適用は大量の差分を生むため、git blameを汚さないために.git-blame-ignore-revsを併用するのが定番です。日常運用では、VS CodeなどIDEの保存時フォーマット機能で常に自動整形され、コミット直前にはhusky＋lint-stagedで変更ファイルだけPrettierを通す構成が広く使われています。
CI側ではprettier --checkを走らせて、整形漏れのコミットを検知します。ESLintと併用する場合はeslint-config-prettierでフォーマット系ルールを無効化し、Prettierが見た目を、ESLintが論理ルールを担当する分業が標準的です。TurborepoやNxなどのモノレポでは、ルートに1つの.prettierrcを置き、全パッケージへ一括適用するパターンが取られます。「議論を不要にするインフラ」として、開発者全員のエディタに溶け込んでいる状態が普通になりました。
ESLintとの分担
Prettierと最もよく比較されるのがESLintです。ESLintは2013年公開のLinterで、JavaScriptの論理エラーやベストプラクティス違反を指摘するのが本業ですが、初期は整形ルール（indent、quotes、semiなど）も多数持っていました。Prettier公開後、これら整形系ルールは「Prettierに任せて消す」のが定石となり、現在は両者が綺麗に分業されています。
Prettierは設定項目が少ない代わりに、対象言語の広さ（JS・TS・CSS・HTML・JSON・Markdown・YAML・GraphQL・Vue・Angular）と「悩む余地がない」一貫性で勝負します。ESLintはJS／TS中心で、ルールごとに細かく挙動を選びコードの意味的な問題を捕まえる役回りです。両者を併用してPrettier→ESLintの順で走らせ、「見た目はPrettier、論理はESLint」と切り分けるのが、現代のJSプロジェクトでほぼ標準形になっています。
まとめ
Prettierは2017年にジェイムス・ロング氏が公開したコードフォーマッタで、AST再印字と「意見の強い既定値」が特徴です。公開後数年でフロントエンド整形のデファクト基準となり、レビュー時のスタイル議論を実質的に消滅させました。ESLintと役割を分担しつつ、開発者の集中をビジネスロジックに向けさせる地味で強力なインフラとして定着しています。
※本記事はIT用語辞典の手書きドラフトです。公開前に最新情報・出典を確認のうえ加筆修正してください。
コメント