はじめに
この記事を読めば、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の拡張機能を使って、さらに快適な開発環境を整えることもできます。
ぜひ試してみてください。
