Visual Studio Code で「保存時に自動整形」「タイプ時に自動整形」を有効にする

Visual Studio のソースコード自動整形

自分は仕事や趣味で、C# や TypeScript によるプログラム作成を行うことが多い。

そしてその際に使用するエディタ、というか統合開発環境として Windows OS 上で Visual Studio を使う場合がほとんどだ。

※(本記事投稿時点では Visual Studio 2015 及び 2017 RC を専ら使用。

そしてその Visual Studio のエディタ機能であるが、"行末のセミコロンを打鍵" といった、タイピング上の所定のイベントごとに、そのタイピング中であったソースコード行を自動整形してくれる (下図)。
エディタによる自動整形は、開発メンバー間でソースコードの書式がブレず、誰が編集しても一貫した体裁になるので大変よろしい。
また、自動なので、いちいちスペースを空けたりなどなど、細かい作業に時間や集中力を奪われないのも利点だ。

"保存時に整形" は標準装備されてない

但し、Visual Studio 標準では、ソースファイル保存時にソースコード全体をいっきに自動整形はやってくれない。

Ctrl + K, Ctrl + D のキーコンビネーションで、いつでもソースコード全体のいっき自動整形を発動することはできる。
しかしだからといって、Ctrl + K, Ctrl + D, Ctrl + S の 3 タイプキーコンビネーションを習慣づけるというのは、なんだかおかしい気がする。

ということで、そこは Visual Studio に追加の拡張 (アドイン) をインストールことで解決だ。

下記のアドインを Visual Studio にインストールすることで、Ctrl + S などによるソースコード保存時に、当該ソースコード全体をいっきに自動整形してくれる。

Format document on Save - Visual Studio Marketplace
https://marketplace.visualstudio.com/items?itemName=mynkow.FormatdocumentonSave

Visual Studio "Code" の場合

さてそんな自分だが、たまに Visual Studio Code を使うこともある。

※一時期は、Sublime を評価したり Atom使ってた時期もあった。が、今は Visual Studio Code のみ。

しかしながら、自分が Visual Studio Code を使っている限りでは、「タイプ時に自動整形」や「保存時に自動整形」は発動せず、自動整形したければ Alt + Shift + F を打鍵する必要があった。

ちょっとこれは不便だなー、せめて「保存時に自動整形」は欲しいなー、と常々思っていた。

で、Visual Studio Code は拡張 ( アドイン ) の開発が盛んのような気がするので、「保存時に自動整形」してくれる Visual Studio Code 拡張も誰かが作ってくれてるに違いない！と気が付き、Visual Studio Marketplace で検索してみた。

そうすると、大変ありがたいことに、下記の Visual Studio Code 拡張が見つかった。

Format on Save - Visual Studio Marketplace
https://marketplace.visualstudio.com/items?itemName=gyuha.format-on-save

なるほど、ではこの拡張をインストールしてみようかなー、と思いつつ、レビューに目を通してみると......どうやら、Ctrl + S 押す ⇒ ファイルが保存される ⇒ 自動整形が発動、という処理の流れになってしまっているようだ。

つまりこの VSCode 拡張では、たしかに Ctrl + S などの保存処理で自動整形が発動するものの、もう既にファイルに保存されたあとで整形されてしまっている、ということらしい。
なので、この拡張の利用者は、整形されたあとの内容を確実にファイルに保存するために、もういちど重ねて Ctrl +S するなどしてファイル保存を2回実行することで問題回避しているようだ。

レビューには「Ctrl + S x 2回押すの、何とかならんかねー」といった投稿が散見された。

他に手段は?

そこで、性急にこの拡張をインストールするのは踏みとどまり、Visual Studio Marketplace での検索ではなく、Google 検索でほかに手段がないか検索してみた。

そしたらなんと。

Visual Studio Code の標準機能として「保存時に自動整形」機能が追加されたというではないか。

時期は September 2016 リリース、バージョン v.1.6 から、「保存時に自動整形」機能が Visual Studio Code 標準で搭載されているという (下記参照)。

Visual Studio Code Updates - September 2016 (version 1.6)
https://code.visualstudio.com/updates/v1_6#_format-on-save

ただ「保存時に自動整形」機能は標準で搭載はされているが、既定ではこの機能は Off になっているらしい。

そこで以下の手順で、「保存時に自動整形」を有効化することにした。

VSCode で "保存時に整形" を有効化する

まずは Visual Studio Code を起動。

起動したら、Visual Studio Code のメニューから、[File]-[Preferences]-[User Settings] を選択。

※ここではユーザー設定で変更することにしたが、そのほうがよければ、ワークスペース設定で設定を適用しても構わない。

するとエディタ領域に、設定のための JSON ファイル (settings.json) が開く。
左の領域にはシステム既定値が表示され、右半分の領域に、ユーザー設定を記述するエディタ領域が開かれる。

左側の領域では検索が効く。
そこで、その検索ボックスに "formatOn" と検索語を入力して目的の設定項目に絞り込み。

これで "editor.formatOnSave" という、いかにもな名前の設定項目が見つかるはずだ。
その設定項目にマウスカーソルを当てるとエンピツアイコンがホバー表示される。
そのエンピツアイコンをクリックすると、true と false の選択しがポップアップする。
もちろんここでは true を選択。すると画面右半分の編集領域に設定項目が転記されて、ユーザー設定として保存される。

もちろん手作業で、画面左側から目的の設定項目を選択してクリップボードにコピー、右半分の編集領域に貼り付けてから、書き換えても同じだ。

これで Visual Studio Code 本体の標準機能で「保存時に自動整形」が実施されるようになった。

快適!

もうひとつ、おまけが...!

...ということなのだが、よくよく見ると、"formatOn" で設定項目の絞り込みした結果に "editor.formatOnType" という項目がヒットしているではないか。

"format on type"、すなわち
「タイプ時に自動整形」
ではないのか!?

そこで早速、先の要領でこの "editor.formatOnType" も、ユーザー設定で true に設定してみた。

これでタイプしてみると...



おお、ちゃんと「タイプ時に自動整形」が発動している!

まとめ

ということで、Visual Studio Code は v.1.6 以降は「保存時に自動整形」が本体に標準装備されているとのこと。

ただし、既定では無効化されているので、お好みに応じてユーザー設定等で有効化するとよい。

また、どのバージョンからかはよく調べてないが、少なくとも v.1.8.1 では、「タイプ時に自動整形」の設定項目も用意されていた。

これもユーザー設定等で有効に設定すると、ちゃんと「タイプ時に自動整形」が機能する。

なお、先に発見した、Visual Studio Code 拡張であるが、Ctrl + S を2回押さないと自動整形後の内容が保存されないという点はあるものの、自動整形を発動させるファイル種別を、設定ファイルで拡張子を指定することで仕分けできるとのこと。

Visual Studio Code 標準装備の自動整形機能はファイル種別による発動有無の指定はできず、本機能を有効にしたならば、すべてのファイル種別に対して自動整形が発動する。

場合によっては、Ctrl + S x 2回押しでもなお、ファイル種別に応じた自動整形の発動有無の指定ができる VSCode 拡張を使ったたほうがよいかもしれないので、適宜使い分けるといいかもしれない。