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

它支援從編輯器中拾取的顏色的色相、飽和度和不透明度配置。透過單擊選擇器頂部的顏色字串，它還提供了在不同顏色模式之間切換的功能。當您懸停在顏色定義上時，選擇器將顯示。

Hover

將滑鼠懸停在 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 原始碼的格式，您可以使用 **格式化文件** 命令 ⇧⌥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：每行的最大字元數。
html.format.unformatted：不應重新格式化的標籤列表。
html.format.contentUnformatted：要分隔的標籤列表，用逗號分隔，其內容不應重新格式化。
html.format.extraLiners：應在其前面新增額外換行的標籤列表。
html.format.preserveNewLines：是否應保留元素之前的現有換行符。
html.format.maxPreserveNewLines：在一個塊中要保留的最大換行數。
html.format.indentInnerHtml：縮排 `<head>` 和 `<body>` 部分。
html.format.wrapAttributes：屬性的換行策略
- auto：當行長被超出時換行
- force：換所有屬性，除了第一個
- force-aligned：換所有屬性，除了第一個，並對齊屬性
- force-expand-multiline：換所有屬性
- aligned-multiple：當行長被超出時換行，垂直對齊屬性
- preserve：保留屬性的換行
- preserve-aligned：保留屬性的換行但對齊
html.format.wrapAttributesIndentSize：在使用 `force aligned` 和 `aligned multiple` 的 html.format.wrapAttributes 或 `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.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。

提示：點選上面的擴充套件卡片以閱讀描述和評論，以決定哪個擴充套件最適合您。在 Marketplace 中檢視更多。

後續步驟

繼續閱讀以瞭解：

CSS、SCSS 和 Less - VS Code 對 CSS（包括 Less 和 SCSS）提供一流的支援。
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 預覽擴充套件列表。

12/10/2025