VS Codeにおける「.prettierrc」構成エラーの修正方法

エラーメッセージ

ファイルを保存してコードが自動整形されるのを期待したのに、何も起こらない。クリーンなファイルになる代わりに、VS Codeの右下に小さなアラートアイコンが表示されます。ログを確認すると、次のようなメッセージが表示されているはずです。

Error: Invalid configuration file: .prettierrc

エラーが発生する理由

Prettierは構文に対して非常に厳格です。YAMLファイル内のカンマの置き間違いや、意図しないタブ一つで、プロジェクト全体のフォーマッタがクラッシュします。通常、パーサーが予期しない文字を検出したために、ファイル全体の読み込みを断念したことが原因です。設定の99%が正しくても、たった一つの小さな構文エラーでファイル全体が読み取れなくなります。

ステップ1：Prettierの出力ログを確認する

UIのアラートは曖昧ですが、内部ログは具体的です。問題の原因となっている正確な行を見つけるには、拡張機能の出力を確認する必要があります。

VS Codeで出力パネルを開きます（Ctrl+Shift+U または Cmd+Shift+U）。
パネル右側のドロップダウンメニューから、Prettierを選択します。
一番下までスクロールします。"Unexpected token } in JSON at position 145"（JSONの145文字目に予期しないトークン「}」があります）といった具体的なポインタを含むスタックトレースが表示されます。

ステップ2：よくある構文ミスを修正する

構文エラーの内容は、.prettierrcに使用している形式によって異なります。まずは以下のよくある原因を確認してください。

JSONを使用している場合（標準の .prettierrc）

JSONは最も一般的な形式ですが、非常に壊れやすい側面もあります。コメントや末尾のカンマ（trailing commas）はサポートされていません。例えば、以下の設定は最後の値の後にカンマがあるためエラーになります。

{
  "semi": true,
  "singleQuote": true,
  "printWidth": 80, // <--- このカンマがPrettierを壊します
}

最後のカンマとすべての // コメント を削除して修正してください。

YAMLを使用している場合

YAMLのエラーは通常「タブかスペースか」に関連しています。Prettierはインデントにスペースを期待します。誤ってTabキーを押すと、パーサーは即座に失敗します。インデントが一貫していること（通常は1レベルにつき2つのスペース）を確認してください。

semi: true
trailingComma: "all"
singleQuote: true
# これらの行の前に隠れたタブがないことを確認してください

ステップ3：コンバーターで検証する

ファイルに問題がなさそうに見えてもエラーが出る場合は、バリデーターを試してください。筆者は構造が正しいか確認するために、よくYAML ↔ JSON Converterを使用します。これはブラウザ上で完結するため、プロジェクトの設定が外部に漏れることはありません。コンバーターでパースできない場合、Prettierも同様にパースできません。

ステップ4：隠れた文字（BOM）を確認する

Windowsユーザーはバイトオーダーマーク（BOM）に注意してください。一部のエディタは、ファイルの先頭に隠れた文字を含めてUTF-8ファイルを保存します。Prettierはこれに拒絶反応を示すことがよくあります。VS Codeの右下にあるステータスバーを確認してください。UTF-8 with BOMと表示されている場合は、そこをクリックしてエンコード付きで保存を選択し、通常のUTF-8を選んでください。

ステップ5：明示的なファイル拡張子を使用する

拡張子のない .prettierrc ファイルを使用すると、Prettierは形式を推測する必要があります。紛らわしい文字が含まれていると、推測を誤る可能性があります。ファイルを .prettierrc.json や .prettierrc.yaml にリネームしてみてください。これにより、エディタは正しいパーサーを強制的に使用するようになり、見落としていた構文ハイライトのエラーが明らかになることがよくあります。

修正の確認

構文を修正したら、以下の手順で拡張機能をリセットします。

.prettierrc ファイルを保存します。
コマンドパレットを開きます（F1 または Cmd+Shift+P）。
**「Prettier: Restart Server」**と入力してEnterを押します。
ソースファイル（index.js など）を開き、保存を実行します。これで正しく整形されるはずです。

再発防止のヒント

**スキーマを追加する：**JSON設定の先頭に "$schema": "http://json.schemastore.org/prettierrc" を含めます。これにより、ミスをした瞬間に赤い波線が表示されるようになります。
**シンプルに保つ：**複雑なロジックや珍しい形式は避けてください。シンプルな .prettierrc.json が、ほとんどのチームにとって最も互換性の高い選択肢です。
チェックを自動化する：husky などのツールを使用して、コードがコミットされる前に prettier --check . を実行するようにします。これにより、壊れた設定がチームメンバーに共有される前にキャッチできます。