Visual Studio Code 中的 Emmet

Visual Studio Code 內建支援 Emmet 程式碼片段和展開，無需安裝擴充套件。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 鍵進行縮排。

停用 quickSuggestions 時的 Emmet

如果您停用了 editor.quickSuggestions 設定，您將不會在鍵入時看到建議。您仍然可以透過按 ⌃Space (Windows, Linux Ctrl+Space) 手動觸發建議並檢視預覽。

在建議中停用 Emmet

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

"emmet.showExpandedAbbreviation": "never"

您仍然可以使用命令 Emmet: Expand Abbreviation 來展開您的縮寫。您也可以為命令 ID editor.emmet.action.expandAbbreviation 繫結任何鍵盤快捷鍵。

Emmet 建議排序

為了確保 Emmet 建議始終位於建議列表的頂部，請新增以下設定

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

其他檔案型別中的 Emmet

要在預設不支援 Emmet 縮寫的語言中使用 Emmet 縮寫展開，請使用 emmet.includeLanguages 設定。請確保對對映的雙方都使用語言識別符號，右側是 Emmet 支援的語言的語言識別符號（參見上面的列表）。

例如

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

Emmet 對這些新語言一無所知，因此可能會在非 HTML/CSS 上下文中出現 Emmet 建議。為避免此問題，您可以使用以下設定。

"emmet.showExpandedAbbreviation": "inMarkupAndStylesheetFilesOnly"

注意： 如果您之前使用 emmet.syntaxProfiles 為新檔案型別進行對映，從 VS Code 1.15 開始，您應該改用 emmet.includeLanguages 設定。 emmet.syntaxProfiles 僅用於自定義最終輸出。

帶多游標的 Emmet

您也可以將大多數 Emmet 操作與多游標一起使用

Emmet with multi cursors

使用過濾器

過濾器是特殊的後處理器，可以在展開的縮寫輸出到編輯器之前對其進行修改。有兩種使用過濾器的方法：透過全域性的 emmet.syntaxProfiles 設定，或者直接在當前縮寫中使用。

下面是第一種方法的一個示例，使用 emmet.syntaxProfiles 設定為 HTML 檔案中的所有縮寫應用 bem 過濾器

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

要為當前縮寫提供一個過濾器，請將過濾器附加到您的縮寫。例如，div#page|c 將對 div#page 縮寫應用 comment 過濾器。

BEM 過濾器 (bem)

如果您使用 Block Element Modifier (BEM) 編寫 HTML，那麼 bem 過濾器對您來說會非常方便。要了解更多關於如何使用 bem 過濾器，請閱讀 Emmet 中的 BEM 過濾器。

您可以透過使用 Emmet 首選項中記錄的 bem.elementSeparator 和 bem.modifierSeparator 偏好設定來定製此過濾器。

註釋過濾器 (c)

此過濾器會在重要的標籤周圍添加註釋。預設情況下，“重要的標籤”是指那些帶有 id 和/或 class 屬性的標籤。

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

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

您可以透過使用 Emmet 首選項中記錄的 filter.commentTrigger、filter.commentAfter 和 filter.commentBefore 偏好設定來定製此過濾器。

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] -->"
}

Trim 過濾器 (t)

此過濾器僅在為 **Emmet: Wrap with Abbreviation** 命令提供縮寫時適用。它移除被包裝行的行標記。

使用自定義 Emmet 程式碼片段

自定義 Emmet 程式碼片段需要在名為 snippets.json 的 json 檔案中定義。 emmet.extensionsPath 設定應指向包含此檔案的目錄的路徑。

下面是此 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}"
    }
  }
}

Emmet 2.0 中透過 snippets.json 檔案編寫自定義程式碼片段的方式與舊方法有幾處不同

主題	舊 Emmet	Emmet 2.0
程式碼片段與縮寫	在名為 `snippets` 和 `abbreviations` 的兩個單獨屬性中都支援	兩者已合併為一個名為 snippets 的屬性。請參閱預設的 HTML 程式碼片段和 CSS 程式碼片段
CSS 程式碼片段名稱	可以包含 `:`	定義程式碼片段名稱時不要使用 `:`。當 Emmet 嘗試將給定縮寫與程式碼片段進行模糊匹配時，`:` 用於分隔屬性名稱和值。
CSS 程式碼片段值	可以以 `;` 結尾	不要在程式碼片段值末尾新增 `;`。Emmet 將根據檔案型別（css/less/scss vs 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

使用此設定可在您選擇的語言與 Emmet 支援的語言之間新增對映，以在前者中使用 Emmet，並使用後者語法。請確保對對映的雙方都使用語言 ID。

例如
```
"emmet.includeLanguages": {
  "javascript": "javascriptreact",
  "plaintext": "pug"
}
```
emmet.excludeLanguages

如果您有不希望看到 Emmet 展開的語言，請在此設定中新增它，該設定接受語言 ID 字串的陣列。

emmet.syntaxProfiles

請參閱 Emmet 自定義輸出配置檔案，瞭解如何自定義 HTML 縮寫的輸出。

例如

"emmet.syntaxProfiles": {
  "html": {
    "attr_quotes": "single"
  },
  "jsx": {
    "self_closing_tag": true
  }
}

emmet.variables

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

例如

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

emmet.showExpandedAbbreviation

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

設定值	描述
`never`	絕不在此語言的建議列表中顯示 Emmet 縮寫。
`inMarkupAndStylesheetFilesOnly`	僅為純粹的標記和樣式表語言（'html'、'pug'、'slim'、'haml'、'xml'、'xsl'、'css'、'scss'、'sass'、'less'、'stylus'）顯示 Emmet 建議。
`always`	顯示 Emmet 建議，包括所有 Emmet 支援的模式以及在 emmet.includeLanguages 設定中有對映的語言。

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

emmet.showAbbreviationSuggestions

顯示可能的 emmet 縮寫作為建議。預設情況下為 true。

例如，當您鍵入 li 時，您會收到以 li 開頭的 Emmet 程式碼片段的建議，如 link、link:css、link:favicon 等。這有助於學習 Emmet 程式碼片段，否則您可能永遠不知道它們的存在，除非您能熟記 Emmet 速查表。

不適用於樣式表，或者當 emmet.showExpandedAbbreviation 設定為 never 時。
emmet.extensionsPath

提供包含 snippets.json 檔案的目錄的位置，該檔案又包含您的自定義程式碼片段。
emmet.triggerExpansionOnTab

將此設定為 true 可啟用使用 Tab 鍵展開 Emmet 縮寫。我們使用此設定來提供適當的回退以在沒有縮寫可展開時提供縮排。
emmet.showSuggestionsAsSnippets

如果設定為 true，則 Emmet 建議將與其它程式碼片段一起分組，允許您根據 editor.snippetSuggestions 設定來排序它們。將其設定為 true 並將 editor.snippetSuggestions 設定為 top，以確保 Emmet 建議始終顯示在其他建議的頂部。
emmet.preferences

您可以使用此設定來定製 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 中眾多出色的 Web 開發功能之一。請繼續閱讀，瞭解更多關於

HTML - VS Code 對 HTML 提供 IntelliSense、標籤閉合和格式化支援。
CSS - 我們為 CSS、SCSS 和 Less 提供豐富支援。

故障排除

自定義標籤在建議列表中不會展開

自定義標籤在表示式中使用時（如 MyTag>YourTag 或 MyTag.someclass）會在建議列表中顯示。但當它們單獨使用時，如 MyTag，它們不會出現在建議列表中。這是出於設計的考慮，以避免在建議列表中出現噪聲，因為每個單詞都可能是一個自定義標籤。

新增以下設定以啟用使用 tab 展開 Emmet 縮寫，這將始終展開自定義標籤。

"emmet.triggerExpansionOnTab": true

我的 HTML 程式碼片段以 `+` 結尾時不起作用

以 + 結尾的 HTML 程式碼片段，如 Emmet 速查表中的 select+ 和 ul+，不受支援。這是 Emmet 2.0 中的一個已知問題 Issue: emmetio/html-matcher#1。一種變通方法是建立您自己的自定義 Emmet 程式碼片段來處理這種情況。

縮寫無法展開

首先，檢查您是否正在使用自定義程式碼片段（是否存在由 emmet.extensionsPath 設定拾取的 snippets.json 檔案）。自定義程式碼片段的格式在 VS Code 1.53 版本中已更改。不要使用 | 來指示游標位置，而是使用 ${1}、${2} 等標記。emmetio/emmet 倉庫中的預設 CSS 程式碼片段檔案顯示了新的游標位置格式的示例。

如果縮寫仍然無法展開

檢查內建擴充套件，看看 Emmet 是否已被停用。
嘗試透過在命令面板中執行 Developer: Restart Extension Host (workbench.action.restartExtensionHost) 命令來重啟擴充套件主機。

我可以在哪裡設定 Emmet 首選項中記錄的所有首選項？

您可以使用 emmet.preferences 設定來設定首選項。只有 Emmet 首選項中記錄的部分首選項可以自定義。請閱讀 Emmet 配置下的首選項部分。

有什麼技巧和竅門嗎？

當然！

在 CSS 縮寫中，當您使用 : 時，左側用於與 CSS 屬性名進行模糊匹配，右側用於與 CSS 屬性值進行匹配。充分利用這一點，使用如 pos:f、trf:rx、fw:b 等縮寫。
探索 Emmet 文件中記錄的所有其他 Emmet 功能，請參閱 Emmet 操作。
不要猶豫建立您自己的自定義 Emmet 程式碼片段。

12/10/2025