VSCodeでインデントを簡単にキレイに揃える方法
![](https://tamatuf.net/wp/wp-content/uploads/2024/02/main-image-1.png)
VSCodeで、ソースコードのインデントを設定やショートカットキーを使って、きれいに揃える方法の備忘録です。
インデントを揃える
インデントがバラバラのソースコード全体を一括でキレイに整える方法です。
コード上で、右クリックから「ドキュメントのフォーマット」をクリックします。
![](https://tamatuf.net/wp/wp-content/uploads/2024/02/in01.png)
スペースが2つずつ入り、インデントがキレイに整いました。
![](https://tamatuf.net/wp/wp-content/uploads/2024/02/inn02.png)
「ドキュメントのフォーマット」は、ショートカットキーでも実行できます。
Windowsは「Shift + Alt + F」、Macの場合 「shift + option + F」キーで実行します。
Macでショートカットキーを使用した際に、テキストが入力されてフォーマットの変更が実行されない場合は、英字入力の状態に変更します。
![](https://tamatuf.net/wp/wp-content/uploads/2024/02/in03.png)
インデントを追加する
個別に1行だけインデントを下げたい場合は、「tab」キーで変更することができます。
インデントのレベルを下げる場合は「tab」キー、インデントのレベルを上げる場合は「tab + shift」キーを押します。
![](https://tamatuf.net/wp/wp-content/uploads/2024/02/in04.png)
![](https://tamatuf.net/wp/wp-content/uploads/2024/02/in05.png)
インデントの幅を変更する
インデント1つ分に入れる、スペースやタブの数を変更する方法です。
画面下の「スペース」の文字をクリックして、アクションの選択から使用するインデントを選択します。
![](https://tamatuf.net/wp/wp-content/uploads/2024/02/in06-1024x536.png)
スペースを入れたい場合は、「スペースによるインデント」をクリックして、入れるスペースの数を選択します。
![](https://tamatuf.net/wp/wp-content/uploads/2024/02/inn07-1024x224.png)
例えば、スペースを4つ入れたい場合は「4」を選択します。
![](https://tamatuf.net/wp/wp-content/uploads/2024/02/inn08-1024x536.png)
改めてドキュメントのフォーマットを実行すると、インデント1つ当たりにスペースが4つ入りました。
画面下のスペースの数字も「4」に変更されています。