Visual Studio Code 中的 Emmet
對 Emmet 片段和擴展的支持內置於 Visual Studio Code 中，無需安裝其他擴展。 Emmet 2.0 支持大多數 Emmet Actions，包括擴展 Emmet 縮寫和片段。
如何展開 Emmet 縮寫和片段
默認情況下，vscode會在 html, haml, pug, slim, jsx, xml, xsl, css, scss, sass, less 和 stylus 文件，以及從上述任何文件繼承的任何語言（如handlebar和php）中啟用Emmet功能。
當您開始輸入 Emmet 縮寫時，您將看到該縮寫顯示在建議列表中。如果您打開了建議文檔彈出窗口，您將在鍵入時看到擴展的預覽。如果您在樣式表文件中，展開的縮寫會顯示在建議列表中，並在其他 CSS 建議中排序。
使用 Tab 鍵 進行 Emmet 擴展
如果要使用 Tab 鍵擴展 Emmet 縮寫，請添加以下設置：
"emmet.triggerExpansionOnTab": true
當文本不是 Emmet 縮寫時，此設置允許使用 Tab 鍵進行縮進。
禁用 quickSuggestions 時的 Emmet
如果您禁用了 editor.quickSuggestions 設置，您將不會在鍵入時看到建議。您仍然可以通過按 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 設置。
| Language | Identifier |
|---|---|
| ABAP | abap |
| Windows Bat | bat |
| BibTeX | bibtex |
| Clojure | clojure |
| Coffeescript | coffeescript |
| C | c |
| C++ | cpp |
| C# | csharp |
| CSS | css |
| Diff | diff |
| Dockerfile | dockerfile |
| F# | fsharp |
| Git | git-commit and git-rebase |
| Go | go |
| Groovy | groovy |
| Handlebars | handlebars |
| Haml | haml |
| HTML | html |
| Ini | ini |
| Java | java |
| JavaScript | javascript |
| JavaScript React | javascriptreact |
| JSON | json |
| JSON with Comments | jsonc |
| LaTeX | latex |
| Less | less |
| Lua | lua |
| Makefile | makefile |
| Markdown | markdown |
| Objective-C | objective-c |
| Objective-C++ | objective-cpp |
| Perl | perl and perl6 |
| PHP | php |
| Plain Text | plaintext |
| PowerShell | powershell |
| Pug | jade, pug |
| Python | python |
| R | r |
| Razor (cshtml) | razor |
| Ruby | ruby |
| Rust | rust |
| SCSS | scss (syntax using curly brackets), sass (indented syntax) |
| ShaderLab | shaderlab |
| Shell Script (Bash) | shellscript |
| Slim | slim |
| SQL | sql |
| Stylus | stylus |
| Swift | swift |
| TypeScript | typescript |
| TypeScript React | typescriptreact |
| TeX | tex |
| Visual Basic | vb |
| Vue | vue |
| Vue HTML | vue-html |
| XML | xml |
| XSL | xsl |
| YAML | yaml |
確保對映射的兩側使用語言標識符，右側是 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.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 Preferences 中記錄的 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: Wrap with Abbreviation 命令提供縮寫時適用。它從包裹的線中刪除線標記。