PR

【VSコード】インデントを一発で自動的に揃えるショートカットキーのご紹介!

テクニック系

コーディング作業をしていて、いつの間にかインデントがめちゃくちゃに・・なんてシーンありませんか?

一つ一つ手動で修正となると、気が遠くなるような作業となってしまいます。

こんな時、VSコードには、インデントを一発で揃えることができるショートカットキーがありますので、覚えておくととても便利です。

今回の記事では、Windows、Mac、linux、それぞれの場合のショートカットをご紹介します。併せて、使えない場合の対処法もご紹介しますので、ご覧ください。

インデントを一発で自動的に揃えるショートカットキー

それでは、それぞれご紹介していきます。

Windows

Shift + Alt + F

Mac

shift + option(alt) + F

linux

Ctrl + Shift + I

上記のショートカットキーを入力することで、一発でインデントを揃えることができます。

実際に使ってみる

下記画像のように、インデントがめちゃくちゃなコードでも・・

インデント揃え前イメージ画像

一発で全て綺麗に揃います!

インデント揃え後イメージ画像

カーソルは適当な位置でも、全て綺麗に揃います!範囲を指定する必要はありません。

お助け猫
お助け猫

画像はHTMLファイルですが、もちろん、CSSファイル等のファイルでも使えるテクニックです!

ショートカットキーが使えない場合の対処法

お悩みさん
お悩みさん

ショートカットキーを押すと、変なエラー本文が出て使えない・・

ショートカットキーを使用しようとすると、下記のような画面が表示される場合があります。

エラー本文イメージ画像

この場合は、「Install Formatter」をクリックして、表示される好きなFormatterをインストールすることで利用できるようになります。

保存時に自動的に整形させる設定も可能

これまで、インデントを一発で自動的に揃えるショートカットキーをご紹介しましたが、実は、ファイル保存時に自動的に整形するように設定する事も出来ますので、手順を紹介しておきます。

①左下の歯車のマークをクリックし「settings」をクリック

②テキストエディタ設定から「Format On Save」にチェックを入れる

これで設定完了です。ファイルを保存すると、自動的にインデントが揃うようになります。

保存時に、自動的にインデントを揃えてくれるようにしたい場合は、この設定をしてみてください。

まとめ

今回は、VSコードでインデントを一発で自動的に揃えるショートカットキーをご紹介しました。

このように、VSコードには、便利なショートカットキーが用意されているので、ぜひ覚えておいていただければと思います。

タイトルとURLをコピーしました