【VSCode】インデントを瞬時に自動整形する方法！

インデントが整えられていないソースコードを、１行ずつ手作業でインデントを整えた経験はないでしょうか？私は幾度もあります。どれだけの時間を無駄にしたことか。。

数行であれば手作業でも良いかもしれませんが、数十行となると結構ストレスになるのではないでしょうか。改行する際に間違えて「>」を消してしまったり、タグの開始タグと終了タグの数が合わなくなったり、、

今回は、VS Codeでソースコードのインデントを瞬時に自動整形するショートカットをご紹介します。

インデントを一瞬で自動整形する方法

結論ですが、以下のショートカットキーになります。

インデントしたいソースコードを選択し、上記のショートカットキーを押すと、一瞬で自動整形してくれます。（超便利！）

インデント前のソースコード

下記のように、横に長いコードを階層的に見やすい形にしたいとき、ありますよね。具体例として、下記コードを整形してみます。

コード全体を選択してショートカットキーを押してみます。

<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>

どうでしょう。階層的になりましたね！もし手作業でやるとなれば数秒はかかると思いますし、その間にミスも生じるかもしれません。ショートカットキーを使用すれば１秒もかからず正確に整形してくれます。

ショートカットキーを使用する際の注意点（初歩的ですが！）

「ショートカットキーを押したのにインデントが変わらない！」「ソースコードが消えてしまった！」といったことがある場合は、「かな入力」になっているかもしれません。

今回ご紹介したショートカットキーに関わらずですが、ショートカットキーを使用する際は必ず「英数入力」の状態でなければいけません。日本語の文章を入力した直後にショートカットキーを使うといった場面もあると思いますので、超初歩的ですが、頭に入れておきましょう。

まとめ

今回ご紹介したショートカットキーを知ってるだけで、コーディングの生産性がかなり上がるのではないかと思います。ぜひ使いこなしましょう。