WebDesigner's Memorandumウェブデザイナーの備忘録

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

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入力後に「行」のフォーマットを自動で行う

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

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

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

著者について

プロフィール画像

サイトウ マサカズ@31mskz10

1997年生まれ。2016年から専門学校でデザインについて勉強。卒業後は神戸の制作会社「N'sCreates」にウェブデザイナーとして入社。このブログでは自分の備忘録も兼ねて、ウェブに関する記事や制作環境を効率的に行うための記事を書いています。

Twitterをフォロー Facebookでいいね