Prettier の設定ファイル (.prettierrc) が読み込まれない

要約

Prettier の設定は cosmiconfig が package.json の "prettier" キー、.prettierrc、.prettierrc.json、.prettierrc.{js,cjs,mjs}、prettier.config.{js,cjs,mjs} を順に探す。
命名や配置が外れると黙って既定値で整形され、tabWidth や singleQuote の指定が反映されない。prettier --find-config-path で実際に検出されるパスを確認するのが原因切り分けの起点になる。

よくある原因

1. ファイル名の誤り: prettierrc.json（先頭ドット無し）や prettier.json は対象外。
   サポート対象は Configuration File に列挙されている。
2. JSON 構文エラー: .prettierrc.json でコメントや末尾カンマを書くと cosmiconfig がパースに失敗して読み込めない。
   JSON5 / JSONC ではない。
3. monorepo の階層: Prettier は整形対象ファイルから上位に向かって探す。packages/web/src/foo.ts を整形するなら、packages/web/ か repo root に .prettierrc が必要。
4. エディタ拡張のバージョン違い: VS Code の esbenp.prettier-vscode がバンドルする Prettier と、node_modules の Prettier の差で挙動が変わる。

解決策

1. 検出パスを確認する

npx prettier --find-config-path src/index.ts

何も出ない場合は 設定が見つかっていない。
期待した .prettierrc のパスが表示されるまで原因をたぐる。

2. ファイル名と書式を公式に合わせる

{
  "tabWidth": 2,
  "singleQuote": true,
  "trailingComma": "all"
}

コメントを書きたければ .prettierrc.cjs にする。

module.exports = {
  tabWidth: 2,
  singleQuote: true,
};

3. ワークスペースの Prettier を指す

.vscode/settings.json:

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "prettier.prettierPath": "./node_modules/prettier"
}

node_modules の Prettier を強制すれば CLI と同じバージョンで動く。