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 設定，您在輸入時將不會看到建議。您仍然可以按下 ⌃ 空格鍵 (Windows、Linux Ctrl+空格鍵) 手動觸發建議並查看預覽。

在建議中停用 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)

如果您使用區塊元素修飾詞 (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 喜好設定。

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: 以縮寫包裝 命令提供縮寫時。它會從包裝的行中移除行標記。

使用自訂 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
程式碼片段 vs 縮寫	在 2 個不同的屬性中支援兩者，分別稱為 `snippets` 和 `abbreviations`	兩者已合併為單一屬性，稱為程式碼片段。請參閱預設 HTML 程式碼片段和 CSS 程式碼片段
CSS 程式碼片段名稱	可以包含 `:`	定義程式碼片段名稱時，請勿使用 `:`。當 Emmet 嘗試將給定的縮寫模糊比對至其中一個程式碼片段時，它會用來分隔屬性名稱和值。
CSS 程式碼片段值	可以以 `;` 結尾	請勿在程式碼片段值的結尾新增 `;`。Emmet 會根據檔案類型 (css/less/scss vs 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 程式碼片段語法。

使用 ${1}、${2} 表示 Tab 停駐點，並使用 ${1:placeholder} 表示具有預留位置的 Tab 停駐點。
先前，| 或 ${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 建議。

設定值	描述
`永不`	永遠不要在任何語言的建議清單中顯示 Emmet 縮寫。
`僅限標記和樣式表檔案`	僅針對純粹以標記和樣式表為基礎的語言 ('html'、'pug'、'slim'、'haml'、'xml'、'xsl'、'css'、'scss'、'sass'、'less'、'stylus') 顯示 Emmet 建議。
`總是`	在所有 Emmet 支援模式以及在 emmet.includeLanguages 設定中具有對應的語言中顯示 Emmet 建議。

注意：在 always 模式中，新的 Emmet 實作不具備內容感知能力。例如，如果您正在編輯 JavaScript React 檔案，您不僅會在撰寫標記時取得 Emmet 建議，也會在撰寫 JavaScript 時取得 Emmet 建議。

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 程式碼片段無法運作

不支援來自 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 程式碼片段。

04/03/2025

Visual Studio Code 中的 Emmet

Was this documentation helpful?