Visual Studio Code 中的 Emmet

Emmet 程式碼片段和展開的支援已內建於 Visual Studio Code 中，**不需任何擴充功能**。Emmet 2.0 支援大部分的 Emmet 動作，包括展開 Emmet 縮寫和程式碼片段。

如何展開 Emmet 縮寫和程式碼片段

Emmet 縮寫和程式碼片段展開預設在 html、haml、pug、slim、jsx、xml、xsl、css、scss、sass、less 和 stylus 檔案中啟用，以及任何繼承上述任何一種語言的語言，例如 handlebars 和 php。

Emmet in suggestion/auto-completion list

當您開始輸入 Emmet 縮寫時，您將會在建議列表中看到縮寫。如果建議文件彈出視窗已開啟，您將會在輸入時看到展開的預覽。如果您在樣式表檔案中，展開的縮寫會顯示在建議列表中，並與其他 CSS 建議一起排序。

使用 Tab 鍵進行 Emmet 展開

如果您想使用 Tab 鍵來展開 Emmet 縮寫，請新增以下設定

"emmet.triggerExpansionOnTab": true

當文字不是 Emmet 縮寫時，此設定允許使用 Tab 鍵進行縮排。

停用快速建議時的 Emmet

如果您已停用 editor.quickSuggestions 在 VS Code 中開啟在 VS Code Insiders 中開啟設定，您將不會在輸入時看到建議。您仍然可以透過按下 ⌃Space (Windows、Linux Ctrl+Space) 手動觸發建議並查看預覽。

停用建議中的 Emmet

如果您完全不想在建議中看到 Emmet 縮寫，請使用以下設定

"emmet.showExpandedAbbreviation": "never"

您仍然可以使用指令 **Emmet：展開縮寫 (Emmet: Expand Abbreviation)** 來展開您的縮寫。您也可以將任何鍵盤快速鍵綁定到指令 ID editor.emmet.action.expandAbbreviation。

Emmet 建議排序

為確保 Emmet 建議在建議列表中始終位於最上方，請新增以下設定

"emmet.showSuggestionsAsSnippets": true,
"editor.snippetSuggestions": "top"

其他檔案類型中的 Emmet 縮寫

若要在預設不提供 Emmet 縮寫展開的檔案類型中啟用該功能，請使用 emmet.includeLanguages 在 VS Code 中開啟在 VS Code Insiders 中開啟設定。請務必在對應的兩端都使用語言識別碼，右側是 Emmet 支援的語言識別碼 (請參閱上方列表)。

例如

"emmet.includeLanguages": {
  "javascript": "javascriptreact",
  "razor": "html",
  "plaintext": "pug"
}

Emmet 對這些新語言一無所知，因此 Emmet 建議可能會出現在非 HTML/CSS 的環境中。為避免這種情況，您可以使用以下設定。

"emmet.showExpandedAbbreviation": "inMarkupAndStylesheetFilesOnly"

注意：如果您之前使用 emmet.syntaxProfiles 在 VS Code 中開啟在 VS Code Insiders 中開啟來映射新的檔案類型，從 VS Code 1.15 版本開始，您應該改用 emmet.includeLanguages 在 VS Code 中開啟在 VS Code Insiders 中開啟設定。 emmet.syntaxProfiles 在 VS Code 中開啟在 VS Code Insiders 中開啟僅用於自訂最終輸出。

具有多重游標的 Emmet

您也可以將大部分 Emmet 動作與多重游標一起使用

Emmet with multi cursors

使用篩選器

篩選器是特殊的後處理器，會在展開的縮寫輸出到編輯器之前修改它。有兩種使用篩選器的方式；透過 emmet.syntaxProfiles 在 VS Code 中開啟在 VS Code Insiders 中開啟設定全域使用，或直接在目前的縮寫中使用。

以下是第一種方法的一個範例，使用 emmet.syntaxProfiles 在 VS Code 中開啟在 VS Code Insiders 中開啟設定，將 bem 篩選器應用於 HTML 檔案中的所有縮寫

"emmet.syntaxProfiles": {
  "html": {
    "filters": "bem"
  }
}

若要為目前的縮寫提供篩選器，請將篩選器附加到您的縮寫。例如，div#page|c 會將 comment 篩選器應用於 div#page 縮寫。

BEM 篩選器 (bem)

如果您使用區塊、元素、修飾符 (BEM) 的方式撰寫 HTML，那麼 bem 篩選器對您來說非常方便。若要了解更多關於如何使用 bem 篩選器的資訊，請閱讀 Emmet 中的 BEM 篩選器。

您可以透過使用 bem.elementSeparator 和 bem.modifierSeparator 偏好設定來自訂此篩選器，詳情請參閱 Emmet 偏好設定。

註解篩選器 (c)

此篩選器會在重要標籤周圍新增註解。預設情況下，「重要標籤」是指帶有 id 和/或 class 屬性的標籤。

例如 div>div#page>p.title+p|c 將會展開為

<div>
    <div id="page">
        <p class="title"></p>
        <!-- /.title -->
        <p></p>
    </div>
    <!-- /#page -->
</div>

您可以透過使用 filter.commentTrigger、filter.commentAfter 和 filter.commentBefore 偏好設定來自訂此篩選器，詳情請參閱 Emmet 偏好設定。

在 VS Code Emmet 2.0 中，filter.commentAfter 偏好設定的格式有所不同。

例如，不使用

"emmet.preferences": {
  "filter.commentAfter": "\n<!-- /<%= attr('id', '#') %><%= attr('class', '.') %> -->"
}

在 VS Code 中，您將使用更簡單的

"emmet.preferences": {
  "filter.commentAfter": "\n<!-- /[#ID][.CLASS] -->"
}

修剪篩選器 (t)

此篩選器僅適用於為 **Emmet：以縮寫包裝 (Emmet: Wrap with Abbreviation)** 指令提供縮寫時。它會從包裝行中移除行標記。

使用自訂 Emmet 程式碼片段

自訂 Emmet 程式碼片段需要定義在名為 snippets.json 的 JSON 檔案中。 emmet.extensionsPath 在 VS Code 中開啟在 VS Code Insiders 中開啟設定應包含此檔案所在的目錄路徑。

以下是此 snippets.json 檔案內容的範例。

{
  "html": {
    "snippets": {
      "ull": "ul>li[id=${1} class=${2}]*2{ Will work with html, pug, haml and slim }",
      "oll": "<ol><li id=${1} class=${2}> Will only work in html </ol>",
      "ran": "{ Wrap plain text in curly braces }"
    }
  },
  "css": {
    "snippets": {
      "cb": "color: black",
      "bsd": "border: 1px solid ${1:red}",
      "ls": "list-style: ${1}"
    }
  }
}

透過 snippets.json 檔案在 Emmet 2.0 中撰寫自訂程式碼片段與舊方法有幾種不同之處

主題	舊版 Emmet	Emmet 2.0
程式碼片段與縮寫	支援在名為 `snippets` 和 `abbreviations` 的兩個獨立屬性中同時使用兩者	兩者已合併為一個名為 snippets 的單一屬性。請參閱預設的 HTML 程式碼片段和 CSS 程式碼片段
CSS 程式碼片段名稱	可包含 `:`	定義程式碼片段名稱時請勿使用 `:`。當 Emmet 嘗試將給定的縮寫與其中一個程式碼片段進行模糊比對時，它用於分隔屬性名稱和值。
CSS 程式碼片段值	可結尾為 `;`	請勿在程式碼片段值的結尾新增 `;`。Emmet 將根據檔案類型 (css/less/scss 與 sass/stylus) 或為 `css.propertyEnd`、`sass.propertyEnd`、`stylus.propertyEnd` 設定的 Emmet 偏好設定來新增尾隨的 `;`。
游標位置	可使用 `${cursor}` 或 `\|`	定位點和游標位置僅使用 Textmate 語法，例如 `${1}`

HTML Emmet 程式碼片段

HTML 自訂程式碼片段適用於所有其他標記語言變體，例如 haml 或 pug。當程式碼片段值是縮寫而非實際 HTML 時，可以應用適當的轉換，以根據語言類型獲得正確的輸出。

例如，對於帶有列表項目的無序列表，如果您的程式碼片段值是 ul>li，您可以在 html、haml、pug 或 slim 中使用相同的程式碼片段，但如果您的程式碼片段值是 <ul><li></li></ul>，那麼它將僅在 html 檔案中有效。

如果您想要一個純文字的程式碼片段，請用 {} 括住文字。

CSS Emmet 程式碼片段

CSS Emmet 程式碼片段的值應為完整的屬性名稱和值對。

CSS 自訂程式碼片段適用於所有其他樣式表變體，例如 scss、less 或 sass。因此，請勿在程式碼片段值的末尾包含尾隨的 ;。Emmet 將根據語言是否需要它而自行添加。

請勿在程式碼片段名稱中使用 :。當 Emmet 嘗試將縮寫與其中一個程式碼片段進行模糊比對時，: 用於分隔屬性名稱和值。

自訂程式碼片段中的定位點與游標

自訂 Emmet 程式碼片段中定位點的語法遵循 Textmate 程式碼片段語法。

使用 ${1}、${2} 作為定位點，並使用 ${1:placeholder} 作為帶有預留位置的定位點。
以前，使用 | 或 ${cursor} 來表示自訂 Emmet 程式碼片段中的游標位置。這已不再支援。請改用 ${1}。

Emmet 設定

以下是您可以自訂 VS Code 中 Emmet 體驗的 Emmet 設定。

emmet.includeLanguages 在 VS Code 中開啟在 VS Code Insiders 中開啟

使用此設定可在您選擇的語言與 Emmet 支援的語言之間新增對應，以前者使用後者的語法啟用 Emmet。請務必在對應的兩端都使用語言 ID。

例如
```
"emmet.includeLanguages": {
  "javascript": "javascriptreact",
  "plaintext": "pug"
}
```
emmet.excludeLanguages 在 VS Code 中開啟在 VS Code Insiders 中開啟

如果您不希望在某種語言中看到 Emmet 展開，請在此設定中新增該語言，此設定接受語言 ID 字串陣列。
emmet.syntaxProfiles 在 VS Code 中開啟在 VS Code Insiders 中開啟

請參閱 Emmet 輸出設定檔的自訂，了解如何自訂 HTML 縮寫的輸出。

例如
```
"emmet.syntaxProfiles": {
  "html": {
    "attr_quotes": "single"
  },
  "jsx": {
    "self_closing_tag": true
  }
}
```
emmet.variables 在 VS Code 中開啟在 VS Code Insiders 中開啟

自訂 Emmet 程式碼片段使用的變數。

例如
```
"emmet.variables": {
  "lang": "de",
  "charset": "UTF-16"
}
```

emmet.showExpandedAbbreviation 在 VS Code 中開啟在 VS Code Insiders 中開啟

控制建議/完成列表中顯示的 Emmet 建議。

設定值	說明
`never`	永不在任何語言的建議列表中顯示 Emmet 縮寫。
`inMarkupAndStylesheetFilesOnly`	僅針對純粹基於標記和樣式表的語言 (「html」、「pug」、「slim」、「haml」、「xml」、「xsl」、「css」、「scss」、「sass」、「less」、「stylus」) 顯示 Emmet 建議。
`always`	在所有 Emmet 支援的模式以及在 emmet.includeLanguages 在 VS Code 中開啟在 VS Code Insiders 中開啟設定中具有對應的語言中顯示 Emmet 建議。

注意：在 always 模式下，新的 Emmet 實作不具備上下文感知能力。例如，如果您正在編輯 JavaScript React 檔案，您不僅會在撰寫標記時收到 Emmet 建議，還會在撰寫 JavaScript 時收到建議。

emmet.showAbbreviationSuggestions 在 VS Code 中開啟在 VS Code Insiders 中開啟

將可能的 Emmet 縮寫顯示為建議。預設為 true。

例如，當您輸入 li 時，您會收到所有以 li 開頭的 Emmet 程式碼片段建議，例如 link、link:css、link:favicon 等。這有助於學習您從未知道存在的 Emmet 程式碼片段，除非您熟記 Emmet 速查表。

不適用於樣式表或當 emmet.showExpandedAbbreviation 在 VS Code 中開啟在 VS Code Insiders 中開啟設定為 never 時。
emmet.extensionsPath 在 VS Code 中開啟在 VS Code Insiders 中開啟

提供包含 snippets.json 檔案的目錄位置，該檔案又包含您的自訂程式碼片段。
emmet.triggerExpansionOnTab 在 VS Code 中開啟在 VS Code Insiders 中開啟

將此設定為 true 以啟用使用 Tab 鍵展開 Emmet 縮寫。我們使用此設定來提供適當的備用方案，以便在沒有縮寫可展開時提供縮排。
emmet.showSuggestionsAsSnippets 在 VS Code 中開啟在 VS Code Insiders 中開啟

如果設定為 true，則 Emmet 建議將會與其他程式碼片段一起分組，讓您可以依照 editor.snippetSuggestions 在 VS Code 中開啟在 VS Code Insiders 中開啟設定來排序它們。將此設定為 true 並將 editor.snippetSuggestions 在 VS Code 中開啟在 VS Code Insiders 中開啟設定為 top，以確保 Emmet 建議始終顯示在其他建議的最上方。
emmet.preferences 在 VS Code 中開啟在 VS Code Insiders 中開啟

您可以使用此設定來依照 Emmet 偏好設定中說明的方式自訂 Emmet。目前支援以下自訂項目
- css.propertyEnd
- css.valueSeparator
- sass.propertyEnd
- sass.valueSeparator
- stylus.propertyEnd
- stylus.valueSeparator
- css.unitAliases
- css.intUnit
- css.floatUnit
- bem.elementSeparator
- bem.modifierSeparator
- filter.commentBefore
- filter.commentTrigger
- filter.commentAfter
- format.noIndentTags
- format.forceIndentationForTags
- profile.allowCompactBoolean
- css.fuzzySearchMinScore
在 Emmet 2.0 中，filter.commentAfter 偏好設定的格式有所不同，且更為簡單。

例如，您將不使用舊版格式
```
"emmet.preferences": {
  "filter.commentAfter": "\n"
}
```
而是使用
```
"emmet.preferences": {
  "filter.commentAfter": "\n"
}
```
如果您需要 Emmet 偏好設定中說明的所有其他偏好設定支援，請提交功能請求。

後續步驟

Emmet 只是 VS Code 中眾多出色的網頁開發人員功能之一。繼續閱讀以了解更多資訊

HTML - VS Code 支援具備 IntelliSense、自動關閉標籤和格式化的 HTML。
CSS - 我們為 CSS、SCSS 和 Less 提供豐富的支援。

疑難排解

自訂標籤未在建議列表中展開

當自訂標籤在 MyTag>YourTag 或 MyTag.someclass 等運算式中使用時，它們會顯示在建議列表中。但是當它們單獨使用，例如 MyTag 時，它們不會出現在建議列表中。這是為了避免建議列表中的雜訊而設計的，因為每個單字都是潛在的自訂標籤。

新增以下設定以啟用使用 Tab 鍵展開 Emmet 縮寫的功能，這將在所有情況下展開自訂標籤。

"emmet.triggerExpansionOnTab": true

我的以 `+` 結尾的 HTML 程式碼片段無效

Emmet 速查表中以 + 結尾的 HTML 程式碼片段，例如 select+ 和 ul+，不受支援。這是 Emmet 2.0 中的一個已知問題問題：emmetio/html-matcher#1。解決方法是針對這些情況建立您自己的自訂 Emmet 程式碼片段。

縮寫無法展開

首先，檢查您是否正在使用自訂程式碼片段 (是否有 emmet.extensionsPath 在 VS Code 中開啟在 VS Code Insiders 中開啟設定所選取的 snippets.json 檔案)。自訂程式碼片段的格式在 VS Code 1.53 版本中已變更。以前使用 | 來表示游標位置，現在改用 ${1}、${2} 等符記。emmetio/emmet 儲存庫中的預設 CSS 程式碼片段檔案顯示了新游標位置格式的範例。

如果縮寫仍然無法展開

檢查內建擴充功能，看看 Emmet 是否已停用。
嘗試透過在命令選擇區中執行 **開發人員：重新啟動擴充功能主機 (Developer: Restart Extension Host)** (workbench.action.restartExtensionHost) 指令來重新啟動擴充功能主機。

我在哪裡可以設定 Emmet 偏好設定中說明的所有偏好設定？

您可以使用 emmet.preferences 在 VS Code 中開啟在 VS Code Insiders 中開啟設定來設定偏好設定。Emmet 偏好設定中說明的所有偏好設定中，只有其中一個子集可以自訂。請閱讀 Emmet 設定下的偏好設定部分。

有任何提示與技巧嗎？

當然！

在 CSS 縮寫中，當您使用 : 時，左側部分用於與 CSS 屬性名稱進行模糊比對，右側部分用於與 CSS 屬性值進行比對。充分利用這一點，使用諸如 pos:f、trf:rx、fw:b 等縮寫。
探索 Emmet 動作中說明的其他所有 Emmet 功能。
不要猶豫建立您自己的自訂 Emmet 程式碼片段。

4/8/2026