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

Visual Studio Code の HTML

Visual Studio Code は、HTML プログラミングをすぐに使える基本的なサポートを提供します。構文の強調表示、IntelliSense を使用したスマートな補完、カスタマイズ可能な書式設定があります。VS Code には、優れた Emmet サポートも含まれています。

IntelliSense

HTML の入力中に、HTML IntelliSense を介して候補を提供します。下の画像では、提案された HTML 要素の閉じタグ </div> と、コンテキスト固有の提案された要素のリストを確認できます。

HTML IntelliSense

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

組み込みの CSS や JavaScript を操作することもできます。ただし、他のファイルからのスクリプトやスタイルのインクルードは追跡されず、言語サポートは 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 スタイルセクションで利用できるようになりました。

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 ソースコードの書式設定を改善するには、Format Document コマンド ⇧⌥F (Windows の場合は Shift+Alt+F、Linux の場合は Ctrl+Shift+I) を使用してファイル全体をフォーマットするか、Format Selection ⌘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 もフォーマットされます。

マーケットプレイスには、いくつかの代替フォーマッターがあります。別のフォーマッターを使用したい場合は、組み込みのフォーマッターをオフにするために、設定で "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 ファイルのリストに設定することで、VS Code の新しい HTML タグ、属性、属性値の理解を深めることができます。VS Code は、提供されたタグ、属性、属性値に対して、補完やホバー情報などの言語サポートを提供します。

カスタムデータの使用方法については、vscode-custom-data リポジトリで詳しく読むことができます。

HTML 拡張機能

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

ヒント: 上記の拡張機能のタイルをクリックすると、説明やレビューを読んで、自分に最適な拡張機能を決定できます。詳細はマーケットプレイスをご覧ください。

次のステップ

さらに読む

  • CSS、SCSS、および Less - VS Code は、Less および SCSS を含む CSS をファーストクラスでサポートしています。
  • Emmet - VS Code の強力な組み込み Emmet サポートについて学びます。
  • Emmet 公式ドキュメント - Emmet は、Web 開発者にとって不可欠なツールキットです。

よくある質問

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

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

07/09/2025