# Visual Studio Codeを使ったコード整形方法（Fomatter）

URL: https://webrandum.net/vscode-fomatter/
公開日: 2020-09-01
更新日: 2020-08-31
カテゴリー: コーディング
タグ: Visual Studio Code
出典: Webrandum（著者: サイトウ マサカズ）

Visual Studio Codeにはコードを整形する機能（Fomatter）があります。

インデントや細かいスペース、改行位置なども一気に指定のフォーマットに整形してくれるので非常に便利です。

指定のフォーマットに整形しておくことで、コードは見やすくなりますし、チーム内での書き方のバラつきも統一できます。

そして、整形するためにインデントを打っていくだけの面倒な作業もなくなります。

## Fomatterの使い方

Fomatterの使い方は、ショートカットキーのshift + option + Fを押すだけで整形されます。

もし、指定のフォーマッタがVisual Studio Codeにインストールされていない場合は、右下に「インストールしますか？」という通知が表示されます。

フォーマットは言語ごとに用意されているので、使う言語のフォーマッタをインストールしておきましょう。

![フォーマッタのインストール](https://webrandum.net/mskz/wp-content/uploads/2020/09/image_2.png)

インストールされていれば、押したタイミングで整形されます。

### 自動でフォーマットする環境設定

自動でフォーマットを実行したい場合は［コード］→［基本設定］→［設定］（command + ,）、を開いて、検索窓に「Format On」と入力します。

あとは実行したいタイミングの設定にチェックを入れるだけです。

![自動でフォーマットする環境設定](https://webrandum.net/mskz/wp-content/uploads/2020/08/image_1-14-1024x612.png)

| 項目 | 内容 |
| --- | --- |

| Format On Paste | ペーストしたタイミングで自動でフォーマットされる |
| --- | --- |

| Format On Save | 保存したタイミングで自動でフォーマットされる |
| --- | --- |

| Format On Type | 入力後に「行」のフォーマットを自動で行う |
| --- | --- |

保存時のフォーマットは便利ではあるものの、予期せぬ操作を引き起こす可能性もあるので、プロジェクトごとに設定するのが無難です。

例えば、プロジェクトの一部だけ対応するつもりが、保存したことによって他の部分まで整形してしまう可能性もあります。

自動フォーマットを設定する場合は、その辺も気をつけるのと、自分が自動フォーマットを設定していることを忘れないように注意しましょう。