泥沼の「フォーマット戦争」を終結させる：Prettierの`overrides`を極めるアーキテクチャ設計
多くのプロジェクトが、成長と共に「負債」を抱えます。その筆頭が、言語やフレームワークが混在する中での「一貫性の欠如」です。
「JSはシングルクォートだが、JSONはダブルクォートでなければならない」「特定のディレクトリだけはレガシーなルールを引きずっている」。このような不毛な議論をチームで行う時間は、エンジニアのキャリアにおいて最も浪費すべきでない時間です。
本記事では、Prettierの `overrides` 機能を駆使し、「設定の不整合」という概念そのものを消滅させるための高度なアーキテクチャ設計を伝授します。
—
1. なぜ「単一の`.prettierrc`」では不十分なのか
プロジェクトがモノレポ化したり、フロントエンド（React/TypeScript）とバックエンド（Node.js）や設定ファイル（YAML/JSON）が混在するようになると、単一の設定ファイルは「最大公約数的な妥協」を強いることになります。
Prettierの `overrides` は、単なる条件分岐ではありません。「ファイルパスのコンテキストに基づき、パーサーとルールを動的に切り替えるポリモーフィックな設定」です。これを活用することで、コードベースの構造に合わせた「最適化されたフォーマット環境」を構築できます。
2. 実践的 `.prettierrc` ベストプラクティス構成
以下は、大規模なTypeScriptプロジェクトで私が実際に導入している設定例です。
{
// 1. プロジェクト全体のベースライン（最も抽象度の高いルール）
“semi”: true,
“singleQuote”: true,
“trailingComma”: “all”,
“printWidth”: 100,
// 2. overridesによる言語・ディレクトリ別の特化設定
“overrides”: [
{
// JSONはダブルクォートが標準かつ不可欠
“files”: [“.json”, “.jsonc”],
“options”: {
“singleQuote”: false
}
},
{
// 特定のディレクトリ配下だけルールを変える（例: レガシーコードや特定のconfig）
“files”: [“src/legacy//.ts”],
“options”: {
“trailingComma”: “none”
}
},
{
// YAMLはインデント2スペースを強制し、視認性を維持
“files”: “.yaml”,
“options”: {
“tabWidth”: 2
}
}
]
}
なぜこの構成が最強なのか
- 認知負荷の低減: 開発者はフォーマットの差異を意識する必要がありません。ファイルを保存すれば、そのファイルにとって「最も正しい」形に自動修正されます。
- 属人性の排除: `overrides` を使うことで、「設定を忘れた」という言い訳が許されない強制力が働きます。
—
3. 生産性を極限まで高める「隠れたエコシステム」
設定ファイルだけでは、開発体験（DX）は完成しません。以下のツールを組み合わせることで、開発スピードは一段上のレベルへ到達します。
必須の神プラグイン：`prettier-plugin-sort-json`
JSONのキーが乱雑だと、GitのDiffが読みづらくなります。このプラグインを導入し、`package.json` などを自動でアルファベット順にソートさせることで、差分管理のストレスをほぼゼロにできます。
開発環境の秘伝のショートカット
VS Codeを使用している場合、`Format on Save` は基本ですが、以下の設定を `settings.json` に追加してください。
// VS Code設定: プロジェクト単位で保存時の動作を保証する
“[typescript]”: {
“editor.defaultFormatter”: “esbenp.prettier-vscode”,
“editor.formatOnSave”: true
},
“[json]”: {
“editor.defaultFormatter”: “esbenp.prettier-vscode”,
“editor.formatOnSave”: true
}
これにより、「フォーマットを忘れてLintエラーが出る」という手戻りを物理的に遮断します。
—
4. チーム開発における「共有化」の哲学
設定ファイルを配布するだけでは、チームの足並みは揃いません。以下のルールをチームの憲法として掲げてください。
1. `.prettierignore` を聖域とする: `node_modules` やビルド成果物だけでなく、自動生成される型定義ファイルなどを確実に追加する。これがないと、ツールが巨大なファイルを解析しようとしてIDEがフリーズする原因になります。
2. CI/CDでの強制検証:
ローカルでフォーマットしていても、CIでチェックを通さなければ意味がありません。
# CIパイプラインに組み込むべきコマンド
npx prettier –check .
このコマンドがCIの最初のステップ（lint）に含まれていれば、「フォーマットの不整合」によるレビューのやり直しは、プロジェクトから永遠に消滅します。
アーキテクトからの提言
フォーマットをツールに任せることは、単なる「見た目の統一」ではありません。「コードの品質を担保するための精神的リソースを、ビジネスロジックの設計に全振りする」ための戦略的投資です。
今日からあなたのプロジェクトの `.prettierrc` を見直してください。`overrides` を適切に配置するだけで、チームの生産性は確実に、そして劇的に向上します。ツールは、設定した人間の知性をそのまま反映します。賢い設計で、最高の開発体験を勝ち取ってください。