【VSC Tips】プログラムコードの自動整形のやり方

自動整形とは？

自動整形はprettier（プリティア＝よりかわいい）、formatter（フォーマッター=整形するもの）とも言われ、プログラムのコードの先頭の位置を調整し、見やすくすることです。多くのプログラムエディタでは自動整形の機能があり、Visual Studio Codeも、もちろんあります。

自動整形の方法 – ショートカット

自動整形のショートカットはShift + Alt + Enterを同時に叩きます。

Visual Studio Codeは複数のプログラムの編集が出来ますが、このショートカットで、すべてのプログラムコードの自動整形が出来ます。

ただ、最初から自動整形出来るというわけではなく、各プログラムの自動整形の拡張機能をインストールしなければなりません。

自動整形の拡張機能のインストール

拡張機能のインストールについては安心して下さい。

インストールされていなければ、拡張機能をインストールする為のメッセージが表示されますので、まずは、コードを開いて、Shift + Alt + Enterを試して下さい。そして、メッセージが表示されればメッセージ上の「フォーマッタをインストール」をクリックして下さい。

自動整形をする為の拡張機能の候補が複数表示されます。様々な開発者が作成している為です。

どれを選ぶかですが、ダウンロード数と評価で判断して下さい。また、開発者がMicrosoftであれば、そちらを選択して下さい。下記のCSSファイルの場合、Microsoft社から提供されている物がなくダウンロード数と評価で選択しました。そして、インストールと青いボタンがあるので、クリックしてインストールすれば自動整形の拡張機能が使えるようになります。

拡張機能を無効・削除したい場合

もし、インストールした拡張機能がうまく機能しなかった場合や、他の拡張機能を試したい場合は、インストールした拡張機能を無効、または削除が出来ます。

上記の画面を見て下さい。画面右側の四角のマークをクリックするとインストール済みの拡張機能のリストが表示されます。そこで、無効・削除する拡張を選択します。「無効にする」、「アンイストール」の選択がありますので、どちらかを選択して下さい。

まとめ

いかがだったでしょうか。

自動整形することによって、コードが見やすくなり、よりプログラム作成がはかどります。

是非、自動整形の機能を使ってみて下さいね。