導入：なぜ自動整形を「除外」する必要があるのか？
皆さんは、Prettierを使ってコードを自動整形した際、「意図した改行が消えてしまった」「巨大なデータ配列が1行にまとめられて逆に読みづらくなった」という経験はありませんか？Prettierは強力なツールですが、機械的な処理ゆえに、人間が意図的にレイアウトを整えた箇所を壊してしまうことがあります。本記事では、特定のファイルやコードブロックを自動整形の対象外にする設定方法を解説します。
基礎知識：.prettierignoreとは？
.prettierignoreは、Prettierがファイルを走査する際に「このファイルは無視してね」と指示を出すための設定ファイルです。プロジェクトのルートディレクトリに配置することで、Gitの.gitignoreと同じような感覚で利用できます。これを使うことで、自動整形の利便性を保ちつつ、可読性を優先したい特定の場所を保護することができます。
実装/解決策：特定ファイルを対象外にする手順
まずは、プロジェクトのルートディレクトリに「.prettierignore」という名前のファイルを作成しましょう。このファイルの中に、除外したいファイルのパスを記述するだけで設定は完了です。
また、ファイル全体ではなく「コードの一部だけ」を除外したい場合は、コメントを使って制御します。
サンプルプログラム：設定の具体例
以下のコードを参考に、プロジェクトに合わせて書き換えてみてください。
1. .prettierignore（ファイル単位の除外）
読みづらくなる巨大なデータファイルを指定
data/large-dataset.json
生成されたファイルは整形対象外にする
dist/
build/
2. ソースコード内での部分的な除外
// prettier-ignore のコメントを直上の行に書くことで、次の1行（またはブロック）を整形から守れます
// 下記の配列は、要素ごとに改行して見やすくしたいので整形を無効化します
// prettier-ignore
const userList = [
{ id: 1, name: “Tanaka” },
{ id: 2, name: “Suzuki” },
{ id: 3, name: “Sato” }
];
// この下のコードは通常通り整形されます
const message = “こんにちは”;
応用・注意点：現場で役立つ運用ルール
1. 使いすぎに注意
便利だからといって乱用すると、チーム開発において「どこが整形されていて、どこが手動管理なのか」が不明確になります。あくまで「どうしても自動整形が適さない場合」の最終手段として使いましょう。
2. コメントの書き忘れ防止
コードの一部を除外する // prettier-ignore は、その下の行がインデント崩れを起こしていてもPrettierが無視してしまいます。エディタの機能などで、除外した箇所がどこか視覚的に分かりやすく管理することをおすすめします。
3. 変更の共有
.prettierignoreを変更した場合は、必ずチームメンバーと共有してください。個人の環境だけで除外設定をしていると、他のメンバーの環境で自動整形が走ってしまい、Gitで無駄な差分（コンフリクト）が発生する原因になります。
適切な「除外設定」を使いこなして、自動整形の便利さとコードの可読性の両方を手に入れましょう！
コメント