VSCodeでHTMLを保存時にフォーマットする方法

VSCodeを開き、HTMLファイルを編集しているエディターを表示します。
エディターの右上にある歯車アイコンをクリックし、表示されるメニューから「設定」を選択します。
設定画面が表示されたら、検索バーに「format on save」と入力します。該当する結果が表示されます。
「Editor: Format On Save」オプションが表示されるので、チェックボックスをオンにします。
これで、HTMLファイルを保存するたびに、自動的にフォーマットが適用されます。

フォーマットが適用されると、コードが整理され、インデントやスペースが適切に配置されます。これにより、コードの可読性が向上し、保守性も高まります。

さらに、いくつかのコード例を紹介します。

例1:

<!DOCTYPE html>
<html>
<head>
    <title>My Web Page</title>
</head>
<body>
    <h1>Hello, World!</h1>
    <p>This is a paragraph.</p>
</body>
</html>

例2:

<!DOCTYPE html>
<html>
<head>
    <title>My Web Page</title>
</head>
<body>
    <div>
        <h1>Welcome</h1>
        <p>This is a paragraph.</p>
    </div>
</body>
</html>

これらの例では、フォーマットが適用されることにより、コードが読みやすくなります。

以上が、VSCodeでHTMLを保存時にフォーマットする方法といくつかのコード例です。この機能を有効にすることで、効率的なコーディングとメンテナンスが可能になります。