なぜ、あなたの「ESLint + Prettier」は統一感に欠けるのか？
開発現場でよく目にする光景があります。「JavaScriptはセミコロンありで書くべきか、なしで書くべきか」といった瑣末な議論でプルリクエストが埋め尽くされる様子です。
本来、コードフォーマットは「人間が脳のCPUを消費すべきではない領域」です。しかし、プロジェクトが成長し、React、TypeScript、あるいは設定ファイル（JSON, YAML）やマークダウンが混在し始めると、一つのルールを全体に適用すること自体が「無理ゲー」になります。
ここで多くのエンジニアが陥る罠が、「全ファイル一律の`.prettierrc`」という幻想です。今日は、プロの開発現場で必須となる、「言語や文脈に応じた動的なフォーマット制御」、つまり`overrides`の極意を伝授します。
—
1. なぜ「overrides」が必要なのか？
例えば、フロントエンドのReactコンポーネントと、バックエンドのNode.jsスクリプト、そして設定ファイルであるJSON。これらを同じルールで縛り上げると、どこかで必ず「可読性が崩壊」します。
Prettierの`overrides`機能を使えば、ディレクトリ構造や拡張子をトリガーにして、「適材適所のルール」を自動適用できます。これは単なる設定の書き分けではありません。チーム全員の「コードの見た目に関する認知負荷」をゼロにするためのアーキテクチャなのです。
—
2. 構築の第一歩：まずは土台を固める
まずはプロジェクトのルートで最小限の環境を整えましょう。
必要なパッケージをインストール
npm install –save-dev prettier eslint-config-prettier
- `prettier`: コード整形エンジンそのもの。
- `eslint-config-prettier`: ESLintとPrettierのルール競合を無効化する「平和条約」のようなライブラリです。これを入れないと、ESLintが「セミコロンがない！」と怒り、Prettierが「付けるな！」と怒る無限ループに陥ります。
—
3. 「overrides」を極める：最強の設定ファイル
以下は、実務で私が必ずと言っていいほど導入する`.prettierrc`の構成例です。
{
“semi”: true,
“singleQuote”: true,
“tabWidth”: 2,
“overrides”: [
{
“files”: “.json”,
“options”: {
“tabWidth”: 2
}
},
{
“files”: [“.ts”, “.tsx”],
“options”: {
“semi”: true,
“trailingComma”: “all”
}
},
{
“files”: “config//.js”,
“options”: {
“semi”: false
}
}
]
}
この設定の「魂」を解説します
- グローバル設定: 基本方針としてセミコロンあり、シングルクォートを使用します。
- overridesの力:
- `.json`: インデントを厳格に制御し、構造の崩壊を防ぎます。
- `.ts/tsx`: 型定義やJSXの文脈では、`trailingComma: “all”`（末尾カンマ）を強制します。これはGitの差分を最小化するためのプロの定石です。
- `config//.js`: 特定のディレクトリ配下だけ、あえてセミコロンを廃止するような柔軟な運用も可能です。
—
4. 精度高い「HelloWorld」的動作確認
設定が正しく効いているか、以下の手順で確認しましょう。
1. わざと崩したファイルを作る:
`test.ts` というファイルを作り、わざと汚いインデントやクォートで記述します。
const name:string=”Test”;
2. CLIでチェックする:
npx prettier –check test.ts
これで「コードが汚いですよ」という警告が出れば成功です。
3. 自動整形を実行する:
npx prettier –write test.ts
一瞬で `.prettierrc` のルールに基づいた完璧なコードに変換されます。
—
5. 最後に：なぜこれが「楽」なのか
これを導入すると、コードレビューで「ここ、インデントがずれてるよ」といった指摘は一生しなくて済みます。
もしチームメンバーが「このファイルのルールを変えたい」と言い出しても、あなたは「`.prettierrc`の`overrides`を一行追加するだけだよ」と答えるだけでいい。ルール変更のコストが極限まで低くなる。これこそが、アーキテクトが設計する「持続可能な開発環境」の姿です。
今日からあなたのプロジェクトに`overrides`を導入して、コードの見た目という重力から解放されましょう。毎日のコーディングが、驚くほど軽やかになるはずですよ。