VSCodeでHTML整形を簡単に！5ステップで完全ガイド

はじめに
●VSCodeでのHTML整形の基本
●応用例：VSCodeでCSSを整形する
まとめ

はじめに

この記事を読めば、HTML整形を簡単に行えるようになります。

VSCodeを使ったHTML整形の方法やカスタマイズの方法、サンプルコード、さらに応用例を詳しく解説していきます。

初心者の方でも理解しやすいように、文章はできるだけわかりやすく説明しているので、安心して読み進めてください。

●VSCodeでのHTML整形の基本

HTML整形とは、HTMLコードを見やすく整理することです。

VSCode（Visual Studio Code）は、Microsoftが開発した無料のコードエディタで、HTML整形機能が標準で備わっています。

○ステップ1：VSCodeのインストール

まずはじめに、VSCodeをインストールしましょう。

公式サイト(https://code.visualstudio.com/)からダウンロードしてインストール手順に従って下さい。

○ステップ2：HTMLファイルを開く

VSCodeを開いたら、HTMLファイルを開きます。

ファイルメニューから「開く」を選択し、対象のHTMLファイルを選んでください。

○ステップ3：HTML整形の実行

HTMLファイルを開いたら、右クリックして「ドキュメントのフォーマット」を選択することで、HTML整形が行われます。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1>見出し1</h1>
<p>ここに本文が入ります。</p>
</body>
</html>

整形後

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>
  <body>
    <h1>見出し1</h1>
    <p>ここに本文が入ります。</p>
  </body>
</html>

ステップ3で整形されたコードは、インデントが揃っていて見やすくなります。

これにより、コードの構造が分かりやすくなり、エラーの発見や修正が容易になります。

○ステップ4：HTML整形のカスタマイズ

VSCodeでは、HTML整形のルールをカスタマイズすることができます。

設定画面で、「editor.formatOnSave」や「html.format.indentInnerHtml」などのオプションを変更することで、整形ルールを調整できます。

例えば、次の設定を追加することで、保存時に自動で整形が行われるようになります。

{
  "editor.formatOnSave": true
}

○ステップ5：拡張機能を利用する

VSCodeには、さまざまな拡張機能があります。これを利用することで、HTML整形の機能をさらに強化できます。

拡張機能は、VSCodeの左側のメニューから「拡張機能」を選択し、検索窓にキーワードを入力してインストールできます。

例えば、「Prettier」という拡張機能は、HTMLのほかにもJavaScriptやCSSなど、さまざまなファイル形式に対応しています。

これをインストールすることで、コード全体を統一したフォーマットで整形できます。

●応用例：VSCodeでCSSを整形する

VSCodeでHTML整形ができるようになったら、次にCSSの整形にも挑戦してみましょう。

ここでは、CSS整形の基本的な方法を紹介します。

○ステップ1：CSSファイルを開く

まずはじめに、VSCodeでCSSファイルを開きます。

ファイルメニューから「開く」を選択し、対象のCSSファイルを選んでください。

○ステップ2：CSS整形の実行

CSSファイルを開いたら、右クリックして「ドキュメントのフォーマット」を選択することで、CSS整形が行われます。

body {
  background-color: #ffffff;
  color: #000000;
}
h1 {
  font-size: 24px;
}
p {
  font-size: 14px;
}

ステップ2で整形されたコードは、プロパティと値の間にスペースが入り、インデントが揃っていて見やすくなります。

これにより、CSSの構造が分かりやすくなり、エラーの発見や修正が容易になります。

○ステップ3：CSS整形のカスタマイズ

VSCodeでは、CSS整形のルールもカスタマイズすることができます。

設定画面で、「css.format.insertSpaces」や「css.format.wrapLineLength」などのオプションを変更することで、整形ルールを調整できます。

例えば、次の設定を追加することで、CSSのプロパティと値の間のスペースを2つに設定できます。

{
  "css.format.insertSpaces": 2
}

まとめ

これで、VSCodeを使ってHTMLとCSSの整形ができるようになりました。

今回紹介した方法を活用して、コードを見やすく整理し、効率的に開発を進めていきましょう。

また、VSCodeの拡張機能を使って、さらに快適な開発環境を整えることもできます。

ぜひ試してみてください。