VSCode の Format on Save が効かない

要約

保存時の整形が走らない時は、フォーマッタが選ばれていない か 拡張機能の競合で別のフォーマッタが優先されている かのどちらか。editor.formatOnSave を有効化したうえで、言語ごとの editor.defaultFormatter を明示すれば 9 割は片付く。

よくある原因

1. formatOnSave 自体がオフ: ユーザ設定で true でも、ワークスペース設定で false に上書きされている
2. defaultFormatter が無い / 剥がれた: Prettier 拡張を入れ直したり、別 PC と同期した時に設定が消える
3. 言語スコープの上書き: [typescript] / [json] で別のフォーマッタを指定しており、想定とずれる
4. save 時アクションの順序: editor.codeActionsOnSave の ESLint fixAll と Prettier が両方走り、結果が上書きされる

解決策

1. 設定を明示する

.vscode/settings.json:

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

ワークスペース設定はユーザ設定より優先される。
チームで揃えるならリポジトリにコミットする。

2. 言語ごとに切り分ける

{
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[python]": {
    "editor.defaultFormatter": "ms-python.black-formatter"
  }
}

公式の Formatting ドキュメント でも、言語ごとに既定フォーマッタを指定するのが正攻法。

3. 実際に走るフォーマッタを確認

Ctrl+Shift+P から Format Document With... を実行すると、現在のファイルで使えるフォーマッタ一覧と既定値が表示される。
期待外のものが既定なら歯車から差し替える。

4. ESLint と Prettier を分離する

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  }
}

codeActionsOnSave は保存時アクション、formatOnSave はフォーマット整形と役割が違う。
両方有効にする場合は ESLint で lint fix → Prettier で整形の順に流れる。