編輯

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。但請注意，來自其他檔案的指令碼和樣式引用不會被跟蹤，語言支援僅關注 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

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

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: 在 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 檔案列表，您可以增強 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 預覽擴充套件列表。

09/11/2025