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 | 入力後に「行」のフォーマットを自動で行う |
保存時のフォーマットは便利ではあるものの、予期せぬ操作を引き起こす可能性もあるので、プロジェクトごとに設定するのが無難です。
例えば、プロジェクトの一部だけ対応するつもりが、保存したことによって他の部分まで整形してしまう可能性もあります。
自動フォーマットを設定する場合は、その辺も気をつけるのと、自分が自動フォーマットを設定していることを忘れないように注意しましょう。



Android実機で表示しているサイトを、Chrome開発者ツールで開いて検証する方法
CSS疑似要素の「:empty」でタグの中身が空のときのスタイルを設定する
Visual Studio Codeの文字サイズやタブサイズの設定方法
Nuxt.jsの基本と最初のセットアップ「プロジェクトの作成と起動をするまでの流れ」
iTerm2でさらに細かい機能の設定ができる環境設定の「Advanced」タブ
iOSシミュレーターを使ってWebサイトを開発者ツールを見ながら実機表示で開発する方法
Visual Studio Codeの基本|概要やインストールから日本語化など最低限の設定方法
Movable TypeでMTLoopを使ってkeyでソートしたときに、10個以上表示させると並びがおかしくなる
サイトのPocketに保存された回数や、あとで読まれた回数まで解析できるPocketのパブリッシャーツールの登録方法
HTTP/2が設定されているはずなのに、ブラウザ上でHTTP/1.1になってしまう場合はセキュリティソフトを確認
AirPodsで片耳を外しても再生が止まらないようにする方法
MacのKeynoteにハイライトされた状態でコードを貼り付ける方法
iTerm2でマウスやトラックパッドの操作を設定できる環境設定の「Pointer」タブ
DeepLで「インターネット接続に問題があります」と表示されて翻訳できないときに確認すること
Ulyssesの「第2のエディタ」表示を使って2つのシートを横並びに表示する
高機能なスクリーンショットアプリ「CleanShot X」
macOSの効率化に関するDiscordコミュニティ「CMD-F」を立ち上げました
1Passwordの開発者向け機能(SSH Agent / Environments / 1Password CLI / Developer Watchtower)
Default Folder Xで保存ダイアログ内のファイルリストにフォーカスする方法
Obsidianで整理した知識をAnkiで定着させる方法
Figma × Keyboard Maestroでどこまで効率化できる?
マウス操作の完成度が高いウインドウリサイズアプリ「Magnet」
Macで複数ディスプレイを使っている場合に便利な設定集
AppCleanerでMacアプリを関連ファイルごと完全に削除する
操作に没頭できる!Firefox版 Arcのようなブラウザ「Zen Browser」