まくろぐ

VS Code のフォーマッターで自動整形する (editor.formatOnSave)

更新:
作成:

VS Code には、標準で各種言語用のフォーマッターが搭載されており、JavaScript、TypeScript、JSON、HTML などのコードを自動整形することができます。

手動でフォーマッターを起動する

ファイル全体をフォーマット (editor.action.formatDocument)

  • コマンドパレット1 を使う場合: Format Document を選択
  • ショートカットキーを使う場合:
    • (Windows) Shift + Alt + F
    • (macOS) Shift + Option + F

選択中の行をフォーマット (editor.action.formatSelection)

  • コマンドパレット1 を使う場合: Format Selection を選択
  • ショートカットキーを使う場合:
    • (Windows) Ctrl + K → Ctrl + F
    • (macOS) Cmd + K → Cmd + F

ファイル保存時などに自動でフォーマットする

下記の設定をしておくと、ファイル保存時や、コードの編集中に自動的にフォーマッターを起動することができます。 設定ファイル (settings.json) の場所に関しては、こちらの記事 を参考にしてください。

全ての種類のファイルで自動フォーマットする場合

settings.json
{
  // ...
  "editor.formatOnSave": true,   // 保存時にフォーマット
  "editor.formatOnType": true,   // 入力中(改行時)にフォーマット
  "editor.formatOnPaste": true,  // ペースト時にフォーマット
}

フォーマッターによっては、保存時のフォーマット (editor.formatOnSave) にしか対応していません。

特定の種類のファイルで自動フォーマットする場合

下記は、TypeScript ファイル (.ts, .tsx) の編集中のみオートフォーマットを有効にする例です(参考: per-language configuration)。

settings.json
{
  // .ts ファイル用の設定
  "[typescript]": {
    "editor.formatOnSave": true,
    "editor.formatOnType": true,
    "editor.formatOnPaste": true,
  },
  // .tsx ファイル用の設定
  "[typescriptreact]": {
    "editor.formatOnSave": true,
    "editor.formatOnType": true,
    "editor.formatOnPaste": true,
  },
}

Prettier などの拡張フォーマッターを使用する

VS Code に標準搭載されているフォーマッターの代わりに、拡張機能が提供するフォーマッターを使用するには、editor.defaultFormatter にその拡張機能の ID を設定します。 ここでは、下記の Prettier 拡張を使ってみます。 Prettier 自体のインストールや設定 は終わっているものとします。

この拡張機能の ID は esbenp.prettier-vscode なので、設定ファイルの中で次のように指定します。

settings.json
{
  "typescript.format.enable": false,  // 組み込みのフォーマッターは無効にする
  "editor.defaultFormatter": "esbenp.prettier-vscode",  // Prettier を使う
  "editor.formatOnSave": true,
  "editor.formatOnType": true,
  "editor.formatOnPaste": true,
}

上記では、ファイル保存時 (formatOnSave) などに自動でフォーマットをかけるように設定していますが、コマンドパレット1 から Format Document などを選んだ場合も同様に Prettier 拡張のフォーマッターが使われるようになります。


  1. Cmd/Ctrl + Shift + P ↩︎

関連記事

まくろぐ
サイトマップまくへのメッセージ