編輯

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.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 設定將 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 首選項中所述。

filter.commentAfter 首選項的格式在 VS Code Emmet 2.0 中有所不同。

例如，不是

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

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

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

修剪過濾器 (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}"
    }
  }
}

透過 snippets.json 檔案在 Emmet 2.0 中建立自定義片段與舊方式有所不同

主題	舊版 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.includeLanguages 設定中有對映的語言中顯示 Emmet 建議。

**注意：** 在 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
filter.commentAfter 首選項的格式在 Emmet 2.0 中不同且更簡單。

例如，不是舊格式
```
"emmet.preferences": {
  "filter.commentAfter": "\n"
}
```
您將使用
```
"emmet.preferences": {
  "filter.commentAfter": "\n"
}
```
如果您需要 Emmet 首選項中記錄的任何其他首選項的支援，請提交功能請求。

後續步驟

Emmet 只是 VS Code 中出色的 Web 開發人員功能之一。請繼續閱讀以瞭解

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 設定選擇的 snippets.json 檔案）。自定義片段的格式在 VS Code 1.53 版本中發生了變化。現在使用 ${1}、${2} 等標記來指示游標位置，而不是使用 |。emmetio/emmet 倉庫中的預設 CSS 片段檔案展示了新游標位置格式的示例。

如果縮寫仍然未能展開

檢查內建擴充套件，檢視 Emmet 是否已停用。
嘗試透過執行**開發人員：重啟擴充套件主機**（workbench.action.restartExtensionHost）命令來重啟擴充套件主機，該命令可在命令面板中找到。

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

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

有什麼提示和技巧嗎？

當然！

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

09/11/2025