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

修剪篩選器 (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 程式碼片段語法。

使用 ${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 建議。

設定值	描述
`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 檔案的目錄位置，而 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 程式碼片段。

03/05/2025