Prettierを「支配」する：ASTハックによるフォーマットの完全制御と、チーム生産性を極限まで高める設計哲学
多くのエンジニアにとって、Prettierは「設定して終わり」のブラックボックスです。しかし、大規模なモノレポやドメイン駆動設計を採用する現場では、標準のPrettierだけでは手に負えない「特殊なフォーマット要件」が必ず発生します。
「ここは人間が読みやすくするためにあえて改行を維持したい」「特定のDSLに近い記法だけは整形をスキップさせたい」。これらを解決するためにPrettierのAST（抽象構文木）をハックする技術は、開発のストレスをゼロにする最強の武器となります。
1. なぜPrettierをハックするのか？：ASTという名の「最終防衛線」
Prettierの強みは、一度コードを解析してASTに変換し、それを再構築（Printer）することで「決定論的」な結果を出すことにあります。我々がカスタマイズすべきは、この「再構築のプロセス」です。
標準の `// prettier-ignore` はブロック単位の無効化には強力ですが、粒度が荒すぎます。特定のコメントアノテーションをトリガーに、特定のノードだけ整形ルールを変える「カスタムプリンター」を導入することで、コードの意図をフォーマッタに強制的に理解させることができます。
実践：カスタムプラグインによるAST操作の骨子
PrettierのプラグインAPIを使い、特定のコメントが含まれるノードの印刷処理をオーバーライドする手法です。
// prettier-plugin-custom.js
const { printDocToString } = require(“prettier”);
module.exports = {
printers: {
estree: {
print(path, options, print) {
const node = path.getValue();
// 特定のコメントアノテーション（例: @keep-format）をチェック
if (node.leadingComments?.some(c => c.value.includes(“@keep-format”))) {
// ASTのノードをそのまま文字列として出力し、整形をバイパスする
return options.originalText.slice(node.range[0], node.range[1]);
}
// それ以外は通常のプリティプリントを続行
return print(path);
}
}
}
};
この手法を使えば、ドメインロジックの複雑なマトリクス定義や、手作業で調整したレイアウトを自動整形から保護しつつ、ファイル全体は標準ルールで統一するという「いいとこ取り」が可能になります。
2. チーム開発で「崩壊」を防ぐ設定共有化の神髄
個人のローカル環境で `.prettierrc` をいじる時代は終わりました。CI/CDと開発環境で完全に同一の出力を保証するためのベストプラクティスを共有します。
推奨構成：階層型共有設定
`@company/prettier-config` としてパッケージ化し、`peerDependencies` を活用して依存関係を固定します。
// .prettierrc.js
// プロジェクトルートで設定を集中管理する構成
module.exports = {
…require(“@company/prettier-config”), // 共有パッケージを継承
plugins: [“prettier-plugin-sort-imports”, “./plugins/custom-ast-hack.js”],
// チームの規約を強制するオーバーライド
overrides: [
{
files: “.ts”,
options: {
parser: “typescript”,
printWidth: 100, // 高解像度ディスプレイ時代に合わせた最適値
}
}
]
};
なぜ `.prettierrc.js` にすべきか？: JSONではなくJSにすることで、環境変数による動的な切り替えや、複雑なロジック（例：特定のブランチのみ適用ルールを変えるなど）を埋め込めるからです。
3. 開発スピードを加速させる「神プラグイン」の選定
生産性を極限まで高めるには、以下の2つは必須です。
- `@trivago/prettier-plugin-sort-imports`:
import文の順序を機械的にソートします。「どれがどのライブラリ由来か」を視覚的に分離し、コンフリクトを劇的に減らします。
- `prettier-plugin-packagejson`:
`package.json` のキー順序を自動整理します。依存関係の追加・削除時の差分がクリーンになり、コードレビューの速度が向上します。
4. 現場を支える「絶対遵守」のワークフロー
ツールを導入しても、メンバーが手動実行を忘れては意味がありません。以下の設定をIDEとGitフックに埋め込んでください。
IDE設定 (VS Code: .vscode/settings.json)
{
“editor.formatOnSave”: true,
“editor.defaultFormatter”: “esbenp.prettier-vscode”,
“editor.codeActionsOnSave”: {
“source.fixAll.eslint”: “explicit”
}
}
Git Hook (husky + lint-staged)
コミット前に必ず全ファイルを整形するような愚かな真似はせず、「差分ファイルのみ」をターゲットにするのが鉄則です。
.lintstagedrc.yaml
“.{js,ts,tsx,json,md}”:
- prettier –write # 差分ファイルのみフォーマット
- eslint –fix # 構文チェックも同時に走らせる
アーキテクトからの提言：ツールは「規約の自動化」である
PrettierのASTハックやプラグイン活用は、単なるコードの見た目の話ではありません。「コードフォーマットに関する議論を、コードベースから消し去ること」が目的です。
チームメンバーが「このインデントはどうすべきか？」と悩む時間は、ビジネス価値を生まない損失です。今回伝授した技術を使い、フォーマットの決定権を人間から機械へ、そして「賢く設計されたアルゴリズム」へと委譲してください。それが、技術的負債を最小化し、開発者が最も重要な「ロジックの設計」に集中できる環境を作る唯一の道です。
今日からあなたのプロジェクトで、Prettierを「ただのフォーマッタ」から「ドメイン知識をコードに刻むフレームワーク」へと進化させてみてください。現場の景色が、驚くほどクリアに変わるはずです。