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

VSCodeでHTML整形のステップHTML
この記事は約5分で読めます。

 

【サイト内のコードはご自由に個人利用・商用利用いただけます】

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

基本的な知識があればカスタムコードを使って機能追加、目的を達成できるように作ってあります。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を凌駕する現役のプログラマチームによって監修されています。

サイト内のコードを共有する場合は、参照元として引用して下さいますと幸いです

※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

はじめに

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

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