🚀 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 を操作することもできます。ただし、他のファイルからの 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 スタイルセクションで利用できるようになりました。

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 設定にリストされているタグを整形しません。埋め込み JavaScript は、'script' タグが除外されていない限り整形されます。

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

Emmet スニペット

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

Emmet HTML support built-in

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

HTML Emmet 省略形を他の言語で使用する場合は、Emmet モード (css、html など) のいずれかをemmet.includeLanguages 設定を使用して他の言語に関連付けることができます。この設定は、言語識別子を受け取り、それを 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 の作成と編集に役立つ関連拡張機能のリストを表示します。

ヒント: 上記の拡張機能タイルをクリックして、説明とレビューを読んで、最適な拡張機能を決定してください。詳細については、Marketplace を参照してください。

次のステップ

以下について読み進めてください。

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

よくある質問

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

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

04/03/2025