Visual Studio Codeを使ったコード整形方法(Fomatter)

Visual Studio Codeにはコードを整形する機能(Fomatter)があります。
インデントや細かいスペース、改行位置なども一気に指定のフォーマットに整形してくれるので非常に便利です。
指定のフォーマットに整形しておくことで、コードは見やすくなりますし、チーム内での書き方のバラつきも統一できます。
そして、整形するためにインデントを打っていくだけの面倒な作業もなくなります。
Fomatterの使い方
Fomatterの使い方は、ショートカットキーのshift + option + Fを押すだけで整形されます。
もし、指定のフォーマッタがVisual Studio Codeにインストールされていない場合は、右下に「インストールしますか?」という通知が表示されます。
フォーマットは言語ごとに用意されているので、使う言語のフォーマッタをインストールしておきましょう。

インストールされていれば、押したタイミングで整形されます。
自動でフォーマットする環境設定
自動でフォーマットを実行したい場合は[コード]→[基本設定]→[設定](command + ,)、を開いて、検索窓に「Format On」と入力します。
あとは実行したいタイミングの設定にチェックを入れるだけです。

| 項目 | 内容 |
|---|---|
| Format On Paste | ペーストしたタイミングで自動でフォーマットされる |
| Format On Save | 保存したタイミングで自動でフォーマットされる |
| Format On Type | 入力後に「行」のフォーマットを自動で行う |
保存時のフォーマットは便利ではあるものの、予期せぬ操作を引き起こす可能性もあるので、プロジェクトごとに設定するのが無難です。
例えば、プロジェクトの一部だけ対応するつもりが、保存したことによって他の部分まで整形してしまう可能性もあります。
自動フォーマットを設定する場合は、その辺も気をつけるのと、自分が自動フォーマットを設定していることを忘れないように注意しましょう。

スマホやPCにプッシュ通知をしてくれる「Push7」をブログに追加する方法
Vue CLIをインストールしたのに「command not found: vue」と表示されてしまう場合の対処法
WordPressで既に公開済みの記事の更新を、指定した日付に反映する方法「PublishPress Revisions」
「とりあえず無料版!」ではなく、機能を知った上で判断したいMAMPとMAMP PROの比較
Visual Studio Codeでコメントを色分けして管理する「Better Comments」
Dashで「Secure Input is Enabled」と表示される場合の対処法
Apacheのテストページを非表示にする方法
Visual Studio CodeをMarkdownエディターとして使用する
Vue.jsを使う人が最低限導入しておきたいVisual Studio Codeの拡張機能
EJSのincludeで別ファイルを読み込むときの画像パスを指定する方法
AirPodsで片耳を外しても再生が止まらないようにする方法
MacのKeynoteにハイライトされた状態でコードを貼り付ける方法
iTerm2でマウスやトラックパッドの操作を設定できる環境設定の「Pointer」タブ
DeepLで「インターネット接続に問題があります」と表示されて翻訳できないときに確認すること
Ulyssesの「第2のエディタ」表示を使って2つのシートを横並びに表示する
アプリやフォルダを一気に開ける「Workspaces」の環境設定
Keyboard MaestroのTime of Dayトリガーは「Wireless Network Condition」での条件分岐とセットで使う!
Macのバッテリー効率を上げるアプリ「Endurance」
Ulyssesで原稿を修正前の状態に戻せるバージョン管理機能やバックアップ機能
Android実機で表示しているサイトを、Chrome開発者ツールで開いて検証する方法
SteerMouseの「自動移動」機能で保存ダイアログが表示されたら自動でデフォルトボタンへカーソルを移動させる
Figmaでモックアップをすばやく作成する「Mockuuups Studio」
BetterTouchToolでトラックパッドやタッチバーにアクションを割り当てる
効率的にHTMLを生成できるPugの特徴や記述方法