Visual Studio Code でコードを自動整形し、インデント幅を設定する方法

Visual Studio Code (VSCode) でコードを自動整形する方法を紹介する。コードを修正していると、インデントが揃わずコードを整理したい場合がある。すべて手作業で修正すると時間がかかるが、コードの自動整形機能を使えば簡単に整理できる。

コードの自動整形

ショートカットキーでコードを自動整形する

Visual Studio Code (以下 VSCode) でコードを整形するショートカットキーは、OS ごとに次のようになっている。

Windows: Shift + Alt + F
macOS: Shift(⇧) + Option(⌥) + F
Linux: Ctrl + Shift + I

次のように整形されていないコードでショートカットキーを押すと、コードが整形される。

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>HTML 테이블(table)</title>
</head>
<body>
<h1>기본 테이블</h1>
<table>
<tr><th>분류</th>  <th>항목</th>
</tr>
<tr>
  <td>과일</td><td>사과</td>
</tr><tr>
<td>채소</td>
  <td>당근</td>
</tr></table>
</body>
</html>

次のコードはショートカットキーを押して整形したものである。

<!DOCTYPE html>
<html lang="ko">

<head>
  <meta charset="UTF-8">
  <title>HTML 테이블(table)</title>
</head>

<body>
  <h1>기본 테이블</h1>
  <table>
    <tr>
      <th>분류</th>
      <th>항목</th>
    </tr>
    <tr>
      <td>과일</td>
      <td>사과</td>
    </tr>
    <tr>
      <td>채소</td>
      <td>당근</td>
    </tr>
  </table>
</body>

</html>