Visual Studio Code 中的 HTML
Visual Studio Code 開箱即用，提供對 HTML 程式設計的基本支援。它提供語法醒目提示、透過 IntelliSense 進行智慧型補齊，以及可自訂的格式化功能。VS Code 也包含出色的 Emmet 支援。
IntelliSense
當您輸入 HTML 時，我們會透過 HTML IntelliSense 提供建議。在下圖中，您可以看到建議的 HTML 元素關閉標籤 </div>，以及根據上下文提供的建議元素清單。
文件符號也適用於 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.autoClosingTags": false
自動更新標籤
修改標籤時，連結編輯功能會自動更新對應的關閉標籤。此功能為選用，可透過設定啟用。
"editor.linkedEditing": true
顏色選擇器
VS Code 顏色選擇器 UI 現已在 HTML 樣式區段中提供。
它支援針對從編輯器中選取的顏色設定色相、飽和度和不透明度。它還提供透過點擊選擇器頂部的顏色字串來切換不同顏色模式的功能。當您將滑鼠懸停在顏色定義上方時，選擇器會顯示出來。
懸停
將滑鼠移到 HTML 標籤或內嵌樣式和 JavaScript 上方，即可取得游標下符號的更多資訊。
驗證
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 ：每行字元數上限。
- 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 設定中列出的標籤。內嵌的 JavaScript 會被格式化，除非 'script' 標籤被排除。
市集提供多種替代的格式化程式可供選擇。如果您想使用不同的格式化程式，請在您的設定中定義 "html.format.enable": false 來關閉內建的格式化程式。
Emmet 片段
VS Code 支援 Emmet 片段擴充。Emmet 縮寫會與編輯器自動補齊清單中的其他建議和片段一起列出。
提示：請參閱 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 對於 CSS，包括 Less 和 SCSS，都提供一流的支援。
- Emmet - 了解 VS Code 強大的內建 Emmet 支援。
- Emmet 官方文件 - Emmet，網頁開發人員的必備工具套件。
常見問題
VS Code 有 HTML 預覽功能嗎？
不，VS Code 沒有內建的 HTML 預覽支援，但在 VS Code 市集中有可用的延伸模組。開啟延伸模組檢視 (⇧⌘X (Windows、Linux Ctrl+Shift+X)) 並搜尋 '即時預覽' 或 'html 預覽' 以查看可用的 HTML 預覽延伸模組清單。