VS Codeのエージェントモードを拡張するには、を試してください！

Visual Studio CodeでのHTML

Visual Studio Code は、初期設定で HTML プログラミングの基本的なサポートを提供します。シンタックス ハイライト、IntelliSense によるスマートな補完、カスタマイズ可能なフォーマット機能があります。また、VS Code には優れた Emmet サポートも含まれています。

IntelliSense

HTML を入力すると、HTML IntelliSense によって候補が表示されます。下の画像では、HTML 要素の閉じタグ </div> の候補と、文脈に応じた要素の候補リストが表示されていることがわかります。

HTML IntelliSense

HTMLではドキュメントシンボルも利用でき、id と class 名で DOM ノードに素早く移動できます。

埋め込みの CSS や JavaScript も扱えます。ただし、他のファイルからの script や style のインクルードは追跡されず、言語サポートは HTML ファイルの内容のみを参照することに注意してください。

いつでも ⌃Space (Windows、Linux では Ctrl+Space) を押すことで、候補をトリガーできます。

どの組み込みのコード補完プロバイダーを有効にするかも制御できます。対応する候補を表示したくない場合は、ユーザーまたはワークスペースの設定でこれらを上書きしてください。

// Configures if the built-in HTML language suggests HTML5 tags, properties and values.
"html.suggest.html5": true

閉じタグ

開始タグの > を入力すると、タグ要素は自動的に閉じられます。

HTML Close1

閉じタグの / を入力すると、対応する閉じタグが挿入されます。

HTML Close2

タグの自動クローズは、次の設定で無効にできます。

"html.autoClosingTags": false

タグの自動更新

タグを変更すると、リンク編集機能によって対応する閉じタグが自動的に更新されます。この機能はオプションであり、次の設定で有効にできます。

"editor.linkedEditing": true

カラーピッカー

VS Code のカラーピッカー UI が HTML の style セクションで利用できるようになりました。

color picker in HTML

エディターから取得した色の色相、彩度、不透明度の設定をサポートしています。また、ピッカーの上部にあるカラー文字列をクリックすることで、異なるカラーモードを切り替える機能も提供します。ピッカーは、色の定義の上にカーソルを置くとホバーで表示されます。

ホバー

HTML タグや埋め込まれたスタイル、JavaScript の上にマウスを移動させると、カーソル下のシンボルに関する詳細情報が表示されます。

HTML Hover

検証

HTML 言語サポートは、埋め込まれたすべての JavaScript と CSS の検証を実行します。

この検証は、次の設定で無効にできます。

// Configures if the built-in HTML language support validates embedded scripts.
"html.validate.scripts": true,

// Configures if the built-in HTML language support validates embedded styles.
"html.validate.styles": true

折りたたみ

ソースコードの領域は、行番号と行頭の間のガターにある折りたたみアイコンを使って折りたたむことができます。折りたたみ領域は、すべての HTML 要素と、ソースコード内の複数行コメントで利用できます。

さらに、次の領域マーカーを使用して折りたたみ領域を定義できます: <!-- #region --> と <!-- #endregion -->

HTMLでインデントベースの折りたたみに切り替えたい場合は、以下を使用してください。

"[html]": {
    "editor.foldingStrategy": "indentation"
},

フォーマット

HTML ソースコードの書式を改善するには、ドキュメントのフォーマットコマンド ⇧⌥F (Windows Shift+Alt+F、Linux Ctrl+Shift+I) を使ってファイル全体をフォーマットするか、選択範囲のフォーマット ⌘K ⌘F (Windows、Linux Ctrl+K Ctrl+F) を使って選択したテキストだけをフォーマットできます。

HTML フォーマッターは js-beautify に基づいています。このライブラリが提供するフォーマットオプションは、VS Code の設定に表示されます。

  • html.format.wrapLineLength: 1行あたりの最大文字数。
  • html.format.unformatted: 再フォーマットしないタグのリスト。
  • html.format.contentUnformatted: コンテンツを再フォーマットしないタグのリスト (カンマ区切り)。
  • html.format.extraLiners: 前に改行を追加すべきタグのリスト。
  • html.format.preserveNewLines: 要素の前の既存の改行を保持するかどうか。
  • html.format.maxPreserveNewLines: 1つのチャンク内で保持される改行の最大数。
  • html.format.indentInnerHtml: <head> と <body> セクションをインデントします。
  • html.format.wrapAttributes: 属性の折り返し戦略。
    • auto: 行の長さを超えたときに折り返します。
    • force: 最初の属性を除き、すべての属性を折り返します。
    • force-aligned: 最初の属性を除き、すべての属性を折り返し、属性を揃えます。
    • force-expand-multiline: すべての属性を折り返します。
    • aligned-multiple: 行の長さを超えたときに折り返し、属性を垂直に揃えます。
    • preserve: 属性の折り返しを保持します。
    • preserve-aligned: 属性の折り返しを保持し、揃えます。
  • html.format.wrapAttributesIndentSize: html.format.wrapAttributes で force aligned と aligned multiple を使用する場合の配置サイズ。または、null を指定するとデフォルトのインデントサイズを使用します。
  • html.format.templating: django、erb、handlebars、php のテンプレート言語タグを尊重します。
  • html.format.unformattedContentDelimiter: この文字列の間でテキストコンテンツをまとめて保持します。

ヒント: フォーマッターは、html.format.unformatted および html.format.contentUnformatted 設定にリストされているタグをフォーマットしません。'script' タグが除外されていない限り、埋め込まれた JavaScript はフォーマットされます。

Marketplace には、他にもいくつかのフォーマッターがあります。別のフォーマッターを使用したい場合は、設定で "html.format.enable": false を定義して、組み込みのフォーマッターを無効にしてください。

Emmet スニペット

VS Code は Emmet スニペットの展開をサポートしています。Emmet の省略形は、エディターの自動補完リストで他の候補やスニペットと一緒に表示されます。

Emmet HTML support built-in

ヒント: 有効な省略形については、Emmet チートシートの HTML セクションを参照してください。

HTML の Emmet 省略形を他の言語で使用したい場合は、emmet.includeLanguages 設定を使用して、Emmet モード (css、html など) のいずれかを他の言語に関連付けることができます。この設定は言語識別子を取り、それを Emmet がサポートするモードの言語 ID に関連付けます。

例えば、JavaScript 内で Emmet の HTML 省略形を使用するには:

{
  "emmet.includeLanguages": {
    "javascript": "html"
  }
}

ユーザー定義スニペットもサポートしています。

HTML カスタムデータ

宣言的なカスタムデータ形式を通じて、VS Code の HTML サポートを拡張できます。html.customData にカスタムデータ形式に従う JSON ファイルのリストを設定することで、新しい HTML タグ、属性、属性値に対する VS Code の理解を深めることができます。これにより、VS Code は提供されたタグ、属性、属性値に対して補完やホバー情報などの言語サポートを提供するようになります。

カスタムデータの使用に関する詳細は、vscode-custom-data リポジトリで確認できます。

HTML 拡張機能

拡張機能をインストールして、より多くの機能を追加します。拡張機能ビュー (⇧⌘X (Windows、Linux Ctrl+Shift+X)) に移動し、「html」と入力すると、HTML の作成と編集に役立つ関連拡張機能のリストが表示されます。

ヒント: 上記の拡張機能タイルをクリックして説明とレビューを読み、どの拡張機能が最適かを判断してください。Marketplace でさらに詳しく見ることができます。

次のステップ

さらに読む

よくある質問

VS Code には HTML プレビュー機能がありますか？

いいえ、VS Code には HTML プレビューの組み込みサポートはありませんが、VS Code Marketplace には利用可能な拡張機能があります。拡張機能ビュー (⇧⌘X (Windows、Linux Ctrl+Shift+X)) を開き、「live preview」または「html preview」で検索して、利用可能な HTML プレビュー拡張機能のリストを表示してください。

08/07/2025