PrettierをVS Codeのデフォルトフォーマッタに設定する方法

問題点

VS CodeでPrettier拡張機能をインストールした後、ファイルのフォーマットを実行すると、以下のようなプロンプトが表示されることがあります：

Do you want to format with the default formatter or with prettier formatter?

このプロンプトで誤って「default formatter」を選択してしまった場合、Prettierをデフォルトのフォーマッタとして設定し直す必要があります。

解決方法

Prettierをデフォルトフォーマッタに設定する方法はいくつかあります。

方法1: 設定メニューからGUIで設定する（推奨）

VS Codeを開き、設定画面を表示
- 左下の歯車アイコンをクリック → 「設定」を選択
- または Ctrl + ,（Windows/Linux） / Cmd + ,（Mac）を押す
デフォルトフォーマッタを設定
- 設定の検索バーで「default formatter」と検索
- 「Editor: Default Formatter」を選択
- ドロップダウンメニューから「Prettier - Code formatter」を選択
保存時の自動フォーマットを有効にする（任意）
- 検索バーで「format on save」と検索
- 「Editor: Format On Save」のチェックボックスをオンにする

キーボードショートカット

手動フォーマット: Shift + Alt + F（Windows/Linux） / Shift + Option + F（Mac）
コマンドパレット: Ctrl + Shift + P（Windows/Linux） / Cmd + Shift + P（Mac）

方法2: 右クリックメニューから設定する

フォーマットしたいファイルを右クリック
「Format Document With...」を選択
フォーマッタの一覧から「Configure Default Formatter...」を選択
Prettierを選択

この後、再度右クリックして「Format Document With...」を選択すると、Prettierに「(default)」のマークが付いているのを確認できます。

方法3: settings.jsonを直接編集する

上級者向けですが、設定ファイルを直接編集することも可能です。

Ctrl + Shift + P（Windows/Linux） / Cmd + Shift + P（Mac）でコマンドパレットを開く
「Preferences: Open Settings (JSON)」を検索して実行
以下の設定を追加：

json

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true
}

特定のファイルタイプだけに適用したい場合は：

json

{
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[scss]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

注意点

Prettier拡張機能が正しくインストールされ、有効化されていることを確認してください
ワークスペースごとに設定を分けたい場合は、ワークスペース設定を使用します

トラブルシューティング

設定が反映されない場合：

VS Codeの再起動：設定変更後、VS Codeを再起動してみてください
拡張機能の確認：Prettier拡張機能が無効になっていないか確認
競合の確認：他のフォーマット拡張機能が競合していないか確認

これらの手順に従うことで、PrettierをVS Codeのデフォルトフォーマッタとして設定でき、コードの一貫したフォーマットを自動化できるようになります。

関連記事

PrettierをVS Codeのデフォルトフォーマッタに設定する方法 ​

問題点 ​

解決方法 ​

方法1: 設定メニューからGUIで設定する（推奨） ​

方法2: 右クリックメニューから設定する ​

方法3: settings.jsonを直接編集する ​