できない.dev

.prettierignore が効かない/除外したファイルが整形される

.prettierignore は CLI にファイル名を直接渡した場合にも適用される。
それでも整形されるなら、整形の実行主体が Prettier CLI ではない。
実行主体の切り分け、.prettierignore の配置、glob の順序、エディタ拡張の prettier.ignorePath 指定を順に確認すれば大半は解消する。

公開: 更新:

要約

.prettierignoreCLI にファイル名を直接渡した場合にも適用されるprettier --write src/generated.ts は、そのファイルが除外対象なら書き換えずに終了する。
それでも整形されるなら、整形しているのが Prettier CLI ではないか、ignore ファイルが読まれていない。
実行主体を切り分ける、.prettierignore をルートに置く、glob 順序を見直す、エディタ拡張の prettier.ignorePath を明示する、の 4 点で解消する。

よくある原因

  1. 整形しているのが Prettier CLI ではない: エディタの editor.defaultFormatter が別の拡張になっている、または ESLint 経由で整形している場合、.prettierignore を直したのに保存時やコミット時には整形される。
    設定と挙動が食い違うので、まず実行主体を切り分ける。
  2. .prettierignore の配置: Prettier は process.cwd().prettierignore を読む。
    サブディレクトリで実行すると別の(または存在しない)ignore を見に行ってしまう。
  3. ! glob の順序: *.js で除外した後に !src/** で復活させたい場合、後段が勝つルール。
    順序を逆にすると除外解除が効かない。
  4. エディタ拡張の独自挙動: VSCode の esbenp.prettier-vscode 拡張は基本的に .prettierignore を読むが、ネストしたモノレポでは prettier.ignorePath の明示が必要なことがある。

解決策

1. 整形しているのが Prettier CLI か切り分ける

# 除外したはずのファイルを直接渡す
npx prettier --write src/generated/api.ts

除外対象なら、このコマンドはファイルを書き換えずに終了する(--check でも検査対象に入らない)。
つまり .prettierignore は明示指定されたファイルにも効く。
にもかかわらず保存時やコミット時に整形されるなら、整形しているのは Prettier CLI ではない。
エディタなら editor.defaultFormatter が Prettier 拡張かを確認する。
ESLint 経由で Prettier を走らせている場合は、公式の Integrating with Linters(新しいタブで開く) が指摘するとおり間に一段挟まる分だけ挙動が読みにくくなるので、除外の設定も ESLint 側で見直す。

2. ルートに置く / --ignore-path で指定

# モノレポでパッケージ固有の ignore を使いたい場合
npx prettier --write --ignore-path packages/web/.prettierignore packages/web

CLI ドキュメント(新しいタブで開く)--ignore-path は v3 以降で複数指定もできる。

3. glob の順序を見直す

# .prettierignore
**/*.js
!src/utils/**.js   # src/utils 配下の .js は整形対象に戻す
dist/
build/

後で書いたルールが勝つ。
除外を「打ち消す」ルールは 対象除外の後 に書く。

4. VSCode 拡張に ignore パスを教える

// .vscode/settings.json
{
  "prettier.ignorePath": "./.prettierignore",
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true
}

モノレポで複数の .prettierignore がある場合、ワークスペースごとに prettier.ignorePath を明示しないと拡張機能が誤った ignore を読みかねない。

この記事は役立ちましたか?