【簡単】VSCodeでインデントを一瞬で自動整形する方法を解説！
コードを書くときに避けて通れないのが「インデント（字下げ）」の整備。
インデントが乱れていると、コードの可読性が下がり、バグの原因にもつながりやすくなります。
だからこそ、インデントを整えることはプログラミングの基本とも言える重要な作業です。
とはいえ、毎回手作業で揃えるのは面倒…。
そんなときに便利なのが、Visual Studio Code（VSCode）での自動整形機能です。
この記事では、VSCodeでインデントを一瞬で自動で整える方法を、初心者の方にもわかりやすく解説します！
VSCodeでインデントを自動で整えるショートカットキー
Visual Studio Code（VSCode）には、ワンクリックでコードのインデントを整えるショートカットキーが用意されています。
面倒な手作業を省けるので、ぜひ覚えておきましょう。
■ OS別ショートカット一覧
| OS | ショートカットキー |
|---|---|
| Windows | Shift + Alt + F |
| macOS | Shift + Option + F |
| Linux | Ctrl + Shift + I |
これらのショートカットを使えば、選択範囲やファイル全体のインデントを一瞬で自動整形できます。
拡張機能でさらに快適に：「Beautify」の活用
VSCodeでは、拡張機能を使うことで、さらに細かく柔軟にインデント整形が可能です。
特におすすめなのが「Beautify」という拡張機能です。
■ Beautifyの特徴
-
対応言語が豊富（JavaScript、JSON、CSS、Sass、HTMLなど）
-
設定不要ですぐに使える
■ Beautifyの使い方
-
整形したいコードファイルを開いた状態で、
Ctrl + Shift + Pを押す（macOSはCmd + Shift + P）。 -
表示されたコマンドパレットで「Beautify selection」を選択。
これだけで、ガタガタだったインデントが一瞬でスッキリ整います！
VSCodeでインデントのレベルを上げ下げするショートカットキー
自動整形だけでなく、手動で細かくインデントを調整したい場合もありますよね。
そんなときに便利なのが、インデントを上下に調整するショートカットキーです。
■ インデント操作のショートカット一覧
| 操作内容 | ショートカットキー |
|---|---|
| インデントを1段下げる | Ctrl + ] または Tab |
| インデントを1段上げる | Ctrl + [ または Shift + Tab |
※macの場合は Command キーではなく、同様に Ctrl キーで動作します（環境により異なる場合あり）。
■ 実際に使ってみよう！
たとえば、次のようなHTMLコードがあるとします：
この <h1> タグの行にカーソルを合わせた状態で、Ctrl + ] を押してみると…
と、右に1段分インデントが下がります。
次に Ctrl + [ を押すと…
と、元の位置に戻ります。
手動インデント調整は、複数行を選択して一括で上下することもできるので、コードブロックの整理にも非常に便利です！
VSCodeでインデントの幅を設定する方法
これまで、インデントを下げたり上げたりするショートカットをご紹介しましたが、
「1段階のインデントで、何個分のスペースが空くか」を決める インデントの幅 も重要です。
ここでは、Visual Studio Code（VSCode）でインデント幅の確認・変更方法についてわかりやすく解説します。
■ 現在のインデント幅を確認する方法
まず、自分のVSCodeで現在どのような設定になっているか確認してみましょう。
-
画面右下（ステータスバー）に「スペース: 2」や「タブ: 4」などと表示されている部分があります。
-
この表示が、現在のインデント幅を表しています。
-
「スペース: 2」→ 半角スペース2つで1段階のインデント
-
「タブ: 4」→ タブキー1つで半角スペース4つ分の幅
-
■ インデント幅を変更する手順
-
画面右下にある「スペース: ●」または「タブ: ●」と表示された部分をクリックします。
-
表示されたメニューから、以下のいずれかを選択します：
-
「スペースによるインデント」
-
「タブによるインデント」
※どちらを選んでも、あとから変更可能です。
-
-
次に、インデント幅を指定するメニューが出てくるので、お好みの数値（例：「6」）を選択します。
-
設定後、インデント幅が反映され、たとえば
<h1>タグの前にスペースが広がります。（今回はスペース６つ分）
VSCodeで保存時にインデントを自動整形する方法
ここまで、ショートカットや手動でのインデント調整方法を紹介してきました。
今回はさらに便利な機能として、「ファイル保存時に自動でインデントを整える設定」をご紹介します。
■ 保存時に自動整形を有効にする手順
-
画面左下の歯車アイコン（⚙）をクリック
VSCodeの画面左下にある歯車マークをクリックして、設定メニューを開きます。 -
「設定」を選択
表示されたメニューの中から「設定」をクリックします。 -
検索バーに「format on save」と入力
設定画面上部の検索バーにformat on saveと入力します。 -
「Editor: Format On Save」にチェックを入れる
検索結果に表示される「Editor: Format On Save」にチェックを入れましょう。
これで、ファイルを保存するたびに、自動でインデントが整形されるようになります。
わざわざショートカットを押さなくても、Ctrl + S（保存）を押すだけでコードがキレイに！
補足：VSCodeのインデントに色を付ける拡張機能「Indent Rainbow」
最後にご紹介するのは、インデントに色を付けて視認性を高める拡張機能「Indent Rainbow」です。
この拡張機能を使えば、インデントの深さに応じてカラフルなラインが表示されるようになり、コード構造が一目でわかるようになります。
■ Indent Rainbowのメリット
-
インデントがカラフルに視覚化されることで、ネストの深さが直感的にわかる
-
タグの入れ子やブロックのミスを素早く発見できる
-
特にHTMLやPython、YAMLなどインデントが重要な言語で効果抜群
ここまで様々なやり方をご紹介してきました。以上を実践することで、VSCodeでのインデント操作・整形までの一連の操作ができるようになります！