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

Movable TypeでMTLoopを使ってkeyでソートしたときに、10個以上表示させると並びがおかしくなる
ブログに見出しを設置できるjQueryプラグイン「TOC | jQuery Table of Contents」
選択テキストをHTMLタグですぐ囲めるようになるVisual Studio Code拡張機能「htmltagwrap」
Visual Studio CodeでMovable TypeのMTMLファイルを開く拡張機能「Movable Type Markup Language Syntax」
Visual Studio Codeのファイル横に表示されるファイルアイコンのテーマまとめ
Vue CLIをインストールしたのに「command not found: vue」と表示されてしまう場合の対処法
Visual Studio Codeのマルチカーソル機能で文字操作を一括で行う
Visual Studio Codeで連番を入力する拡張機能「vscode-input-sequence」
Visual Studio Codeの拡張機能「Trailing Spaces」でコードの中にある余計なスペースを表示する
スマホやPCにプッシュ通知をしてくれる「Push7」をブログに追加する方法
AirPodsで片耳を外しても再生が止まらないようにする方法
MacのKeynoteにハイライトされた状態でコードを貼り付ける方法
iTerm2でマウスやトラックパッドの操作を設定できる環境設定の「Pointer」タブ
DeepLで「インターネット接続に問題があります」と表示されて翻訳できないときに確認すること
Ulyssesの「第2のエディタ」表示を使って2つのシートを横並びに表示する
自宅ですぐにインターバルトレーニングを始めたいならApple Watchの「Seconds」がオススメ!HIITと相性抜群!
Macのファイル拡張子に紐づいているアプリケーションの管理方法
Macログイン時に自動起動するアプリの管理方法
CSS Nite in Kobe, vol.40「クライアントとのより良い関係性を築くためのコミュニケーション手法」に参加してきました
Visual Studio Codeで正規表現にマッチするか確認できる拡張機能「Regex Previewer」
gulpfile.jsにAutoprefixerのブラウザオプションを書くとエラーがでる場合の修正方法
ツイエバを使ってTwitterのいいねやツイート履歴をEvernoteに保存する方法
FontExplorer X Proのアプリケーションセット機能で、アプリを起動したタイミングで自動的にフォントの有効化を行う方法
Vue Routerでページ遷移後にトーストを表示させる方法
Sketchのテキスト編集周りの基本操作