インデントが整っていないソースコードを、1行ずつ手作業で直した経験はありませんか？
私は何度もあります。そのたびに「この時間、何だったんだろう…」と後悔してきました。
数行程度なら手作業でも何とかなるかもしれませんが、数十行、数百行にもなると話は別。改行時にうっかり「>」を消してしまったり、タグの開始・終了が合わなくなって混乱したり…地味にストレスですよね。
今回は、VS Codeでソースコードのインデントを一瞬で自動整形する方法をご紹介します。
インデントを一瞬で自動整形する方法
まず結論から。以下のショートカットキーで、選択したソースコードを自動整形できます。
| Mac | 「Shift」＋「Option」 +「F」 |
| Windows | 「Shift」+「Alt」+「F」 |
インデントを整えたい範囲を選択し、上記のキーを押すだけ。一瞬で自動整形されます。（本当に便利！）
実例：インデント前と後で比較
たとえば、以下のように1行に詰め込まれたHTMLコードがあるとします。
インデント前：
<table>
<tr><th>見出し</th><td>テキスト</td></tr><tr><th>見出し</th><td>テキスト</td></tr>
</table>このコードを選択してショートカットキーを押すと、以下のように整形されます。
インデント後：
<table>
<tr>
<th>見出し</th>
<td>テキスト</td>
</tr>
<tr>
<th>見出し</th>
<td>テキスト</td>
</tr>
</table>ご覧のとおり、コードが階層的になり、格段に読みやすくなりました。
もし手作業でここまで整形しようとしたら数十秒はかかるでしょうし、ミスのリスクも高くなります。
注意点：英数入力モードで使おう
「ショートカットキーを押したのに整形されない！」
「ソースコードが突然消えた！」
…そんなときは、入力モードが“かな入力”になっていないか確認してみてください。
VS Codeに限らず、ショートカットキーは「英数入力」モードでないと正常に動作しません。
日本語を入力した直後は、特に要注意です。初歩的なことですが、意外と見落としがちなので覚えておきましょう。
まとめ
VS Codeのショートカットキーを活用すれば、コード整形にかかる手間と時間を劇的に削減できます。
とくに作業時間が限られている中では、こうした時短テクニックが大きな差を生みます。
ぜひ今日から使いこなして、効率的なコーディングライフを手に入れましょう！
