🚀 在 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 檔案的內容。

您可以隨時按下 ⌃ 空格鍵 (Windows、Linux Ctrl+空格鍵) 來觸發建議。

您也可以控制哪些內建程式碼完成提供者處於作用中狀態。如果您不想看到對應的建議，請在您的使用者或工作區設定中覆寫這些設定。

// 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 元素。

此外，您可以使用下列區域標記來定義摺疊區域：<!-- #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 設定中列出的標籤。除非排除 'script' 標籤，否則會格式化內嵌的 JavaScript。

市集有數種替代格式器可供選擇。如果您想要使用不同的格式器，請在您的設定中定義 "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 將為提供的標籤、屬性和屬性值提供語言支援，例如完成和 hover 資訊。

您可以在 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))，然後搜尋 'live preview' 或 'html preview' 以查看可用的 HTML 預覽擴充功能清單。

02/06/2025