Prettier とは

Prettierは、コードを解析し、独自のルールに基づいてゼロから再構築することで一貫したスタイルを強制する、独自の意見を持つコードフォーマッタです。エラー検出に重点を置く従来のリンターとは異なり、Prettierは元のスタイルを無視し、作成者の癖に関係なくコードベースの統一性を保ちます。JavaScript、TypeScript、CSS、HTML、GraphQLなど広範なエコシステムをサポートしています。フォーマット作業を自動化することで、コードレビューにおける「スタイルの些細な議論」を排除し、開発者がインデントやセミコロンの配置ではなくロジックに集中できるようにします。高速かつ多人数で開発するリポジトリの維持において、業界標準となっています。

Prettier の主な機能

独自のフォーマットエンジン

Prettierは元のスタイルを破棄し、内部のAST（抽象構文木）に基づいてコードを再構築します。厳格なルールを強制することで、括弧の配置や行の長さに関する主観的な議論を排除します。この決定論的なアプローチにより、プロジェクト内のすべてのファイルが同一の見た目になり、モジュール間を移動する開発者の認知的負荷を軽減します。

マルチ言語サポート

JavaScriptやTypeScript以外にも、CSS、HTML、JSON、Markdown、YAML、GraphQLをサポートしています。この統合されたツールチェーンにより、ファイルタイプごとに異なるフォーマッタを用意する必要がありません。SCSSやMDXのような複雑なネストも一貫して処理し、プロジェクト全体のスタイリングにおける唯一の信頼できる情報源となります。

IDE統合エコシステム

VS Code、WebStorm、Vim、Emacs向けの最高クラスのプラグインを提供します。エディタの「Format on Save」ライフサイクルにフックすることで、即座にフィードバックを得られます。この緊密な統合により、バージョン管理にコミットされる前にコードが整形されるため、煩雑な差分を防ぎ、クリーンなGit履歴を維持できます。

ゼロコンフィグのデフォルト設定

Prettierは、プロジェクトの95%でそのまま機能する適切なデフォルト設定を提供します。タブ幅やセミコロンの使用など、軽微な設定変更は可能ですが、設定の肥大化を防ぐために意図的にオプションを制限しています。この哲学により、チームは標準を受け入れることを強制され、ESLintベースのルールでよく見られる終わりのないカスタマイズサイクルを防ぎます。

CI/CDパイプラインでの強制

CIパイプラインで `prettier --check` を実行することで、整形されていないコードを含むプルリクエストを自動的に拒否できます。このゲートキーピング機能により、開発者がチームのスタイルガイドを回避することを防ぎ、管理者の手作業なしでリポジトリ全体の100%の準拠を維持します。

Prettier の使い方

npmでパッケージをインストール: npm install --save-dev --save-exact prettier。 2. 空の設定ファイルを作成: echo {}> .prettierrc.json。 3. .prettierignoreファイルを作成し、dist、coverage、node_modulesなどのビルド成果物を除外。 4. package.jsonにフォーマットスクリプトを追加: "format": "prettier --write \"src/**/*.js\""。 5. 公式拡張機能をインストールし、IDE（VS Code、WebStorm）で「Format on Save」を有効化。 6. npm run formatを実行し、コードベース全体を一括で標準化。

Prettier の利用シーン

大規模チームの標準化

大規模なエンタープライズチームでは、開発者間でコーディングスタイルが競合することがよくあります。Prettierを導入することで、コードレビューからスタイル関連のコメントを排除でき、シニアエンジニアは構文ではなくアーキテクチャのロジックに集中できるため、PRレビュープロセスの速度が大幅に向上します。