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 を操作することもできます。ただし、他のファイルからの 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 要素およびソースコード内の複数行コメントで利用できます。

さらに、次の領域マーカーを使用して折りたたみ領域を定義することもできます:  および 

HTML でインデントに基づいた折りたたみに切り替えたい場合は、以下を使用します。

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

統合ブラウザーでの HTML ファイルのプレビュー

VS Code 内の統合ブラウザーで HTML ファイルをプレビューできます。

統合ブラウザーで HTML ファイルを開くには、ファイルエクスプローラーまたはエディタータブでファイルを右クリックし、Open in Integrated Browser（統合ブラウザーで開く）を選択します。また、HTML ファイルがアクティブなときに、エディターのタイトルバーにある Show Preview（プレビューの表示）アイコンを選択することもできます。

HTML ファイルを変更すると、プレビューがリアルタイムで更新され、変更が反映されます。

フォーマット

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

ヒント

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

Marketplace には、選択できるいくつかの代替フォーマッターが用意されています。別のフォーマッターを使用したい場合は、設定で "html.format.enable": false を定義して組み込みフォーマッターをオフにしてください。

Emmet スニペット

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

Emmet HTML support built-in

ヒント

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

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

例えば、JavaScript 内で Emmet の HTML 省略形を使用するには、以下のようにします。

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

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

HTML カスタムデータ

宣言的なカスタムデータフォーマットを介して、VS Code の HTML サポートを拡張できます。 html.customData VS Code で開く VS Code Insiders で開くにカスタムデータフォーマットに準拠した JSON ファイルのリストを設定することで、VS Code による新しい HTML タグ、属性、属性値の理解を強化できます。これにより、VS Code は提供されたタグ、属性、および属性値に対して、補完やホバー情報などの言語サポートを提供するようになります。

カスタムデータの使用に関する詳細については、vscode-custom-data リポジトリを参照してください。

HTML 拡張機能

さらに機能を追加するには、拡張機能をインストールします。拡張機能ビュー (⇧⌘X (Windows、Linux では Ctrl+Shift+X)) を開き、「html」と入力すると、HTML の作成と編集を支援する関連拡張機能の一覧が表示されます。

ヒント

上の拡張機能のタイルを選択して説明やレビューを読み、どの拡張機能が最適かを判断してください。詳細は Marketplace でご確認ください。

次のステップ

詳細については、以下をお読みください。

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

5/28/2026