まえがき

VSCode を使っていてコーディングしているとき、ファイル保存時に自動でコードフォーマットしてほしいと思いました。
ググってみたのですが、意外と欲しい情報がすぐに手に入らなかったのでメモがてら記載します。

なお、本記事では TypeScript のコードフォーマットをする場合を書いていますが、他の言語でも参考になるかと思います。

やりたいこと

VSCode でファイルを保存するときに自動でフォーマットしてほしい
余計なプラグインやライブラリはインストールしたくない

VSCode にはデフォルトで TypeScript のフォーマッターが入っています。なので余計なものを入れなくても設定さえすれば実現できます。
ググるとよく「プラグインを入れます」「ライブラリをインストールします」みたいな記事が出てきますが、凝ったことをしないのであればデフォルトのもので十分です。

フォーマッターが入っていない言語の場合

VSCodeの公式によると JavaScript, TypeScript, JSON, HTML はデフォルトのフォーマッターが入っています。
https://code.visualstudio.com/docs/editor/codebasics#_formatting

その他の言語をフォーマットしたい場合は、マーケットプレイスから使えそうなプラグインを探してインストールするのが良いでしょう。
ただ、上記のリストにない言語でもデフォルトでフォーマッターが入っている場合がありました。まずは一旦下記の手順でフォーマットを試してみて、ダメならプラグインを入れるという流れが良いでしょう。

1. 設定ファイルを直接いじる方法

設定ファイルのjsonを直接書き換えるのが最速です。

まずは「表示」>「コマンドパレット」を押してコマンドパレットを開きます。
そこに「setting.json」と入力すると、以下のように3つくらい設定ファイルが表示されます。
一番上の「基本設定: ユーザー設定を開く」を選択します。

そこに以下の記述を追加します。

{
    "editor.formatOnSave": true
}

これだけでおしまいです。

2. GUI から設定する方法

GUIから設定する方法です。

「Code」>「基本設定」>「設定」を選択します。
すると設定画面が開きますので、さらに「テキストエディター」>「書式設定」と進みます。
すると以下のように「Format On Save」という設定があるのでこれをチェックします。
これで保存時に自動でフォーマットしてくれます。

設定したのに保存時にフォーマットしてくれない場合

上記の設定をしたのに、これだけでは保存時にフォーマットしてくれないときがあります。

フォーマッターが入っていない場合
フォーマッターが複数入っているがデフォルトのフォーマッターを指定していない場合

適当なファイルを開いて、コードフォーマットのショートカットキー Shift + option + F を押してください。
すると、場合によって以下のように表示されます。

複数のフォーマッターがある場合

複数のフォーマッターがある場合は以下のように表示されます。

そうしたら「構成」を押してデフォルトのフォーマッターを指定してください。これで終わりです。
なお、前述の設定ファイルで指定する場合は以下のようになります。

{
    "editor.formatOnSave": true,
    "[typescript]": {
        "editor.defaultFormatter": "vscode.typescript-language-features"
    }
}

フォーマッターが入っていない場合

フォーマッターが入っていない場合は以下のように表示されます。

「フォーマッタをインストール」を押してマーケットプレイスからフォーマッターのプラグインをインストールします。

余談： TypeScript で ESLint に怒られない設定をいれる

参考までに、TypeScript で ESLint に怒られないフォーマットの設定方法も書いておきます。
{} のスペースの設定、インデント幅をスペース2つにする設定を入れておきます。

{
    "editor.formatOnSave": true,
    "files.insertFinalNewline": true,
    "redhat.telemetry.enabled": true,
    "javascript.format.insertSpaceAfterOpeningAndBeforeClosingNonemptyBraces": false,
    "typescript.format.insertSpaceAfterOpeningAndBeforeClosingNonemptyBraces": false,
    "editor.detectIndentation": false,
    "[typescript]": {
        "editor.tabSize": 2,
        "editor.insertSpaces": true
    }
}

最後に

これくらいの情報はVSCodeの公式ドキュメントにわかりやすく書いておいてくれよという気持ちでした。

Visual Studio Code で保存時に自動でコードフォーマットする