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 鍵進行縮排。

停用快速建議時的 Emmet

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

在建議中停用 Emmet

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

"emmet.showExpandedAbbreviation": "never"

您仍然可以使用 Emmet: 展開縮寫 命令來展開您的縮寫。您也可以將任何鍵盤快速鍵繫結至命令 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)

如果您使用撰寫 HTML 的 Block Element Modifier (BEM) 方式，則 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 偏好設定來自訂此篩選器。

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

Trim 篩選器 (t)

此篩選器僅在為 Emmet: 以縮寫包裝 命令提供縮寫時適用。它會從包裝的行中移除行標記。

使用自訂 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
程式碼片段與縮寫	在 2 個個別屬性中支援兩者，分別稱為 `snippets` 和 `abbreviations`	兩者已合併為單一屬性，稱為 snippets。請參閱預設的 HTML 程式碼片段和 CSS 程式碼片段
CSS 程式碼片段名稱	可以包含 `:`	定義程式碼片段名稱時請勿使用 `:`。當 Emmet 嘗試模糊比對給定的縮寫與其中一個程式碼片段時，它會用來分隔屬性名稱和值。
CSS 程式碼片段值	可以 `;` 結尾	請勿在程式碼片段值的結尾新增 `;`。Emmet 會根據檔案類型 (css/less/scss 與 sass/stylus) 或為 `css.propertyEnd`、`sass.propertyEnd`、`stylus.propertyEnd` 設定的 emmet 偏好設定來新增尾隨的 `;`。
游標位置	可以使用 `${cursor}` 或 `\|`	僅使用 Textmate 語法，例如 `${1}` 表示 Tab 停駐點和游標位置

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 嘗試模糊比對縮寫與其中一個程式碼片段時，: 會用來分隔屬性名稱和值。

自訂程式碼片段中的 Tab 停駐點和游標

自訂 Emmet 程式碼片段中的 Tab 停駐點語法遵循 Textmate 程式碼片段語法。

針對 Tab 停駐點使用 ${1}、${2}，針對具有預留位置的 Tab 停駐點使用 ${1:placeholder}。
先前，| 或 ${cursor} 用來表示自訂 Emmet 程式碼片段中的游標位置。這不再受支援。請改用 ${1}。

Emmet 組態

以下是您可以使用的 Emmet 設定，來自訂您在 VS Code 中的 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 支援 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 是否已停用。
嘗試執行 開發人員: 重新啟動擴充功能主機 (workbench.action.restartExtensionHost) 命令在命令面板中，重新啟動擴充功能主機。

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

您可以使用設定 emmet.preferences 來設定偏好設定。只有 Emmet 偏好設定中記載的偏好設定子集可以自訂。請閱讀 Emmet 組態下的偏好設定章節。

有任何秘訣與訣竅嗎？

當然有！

在 CSS 縮寫中，當您使用 : 時，左側部分會用來與 CSS 屬性名稱進行模糊比對，而右側部分會用來與 CSS 屬性值進行比對。充分利用此功能，使用類似 pos:f、trf:rx、fw:b 等縮寫。
探索 Emmet 動作中記載的所有其他 Emmet 功能。
請隨時建立您自己的自訂 Emmet 程式碼片段。

02/06/2025