第71章 Emmet 扩展使用指南

通过 Emmet 扩展 支持 Emmet 功能。

Emmet 是网页开发者的工具包，能显著提升 HTML 和 CSS 的工作效率。

• Language Server: olrtg/emmet-language-server

使用缩写包裹

安装 Emmet 扩展后，你可以使用展开的 Emmet 缩写 包裹当前选中的内容：

1. 选中要包裹的文本。若未选中任何内容，系统将包裹外层 HTML 元素；如果无法确定外层元素，则包裹当前行。
2. 从命令面板中运行 editor: wrap with abbreviation。输入框默认填入并选中上次使用的缩写，直接输入即可替换；使用 up 和 down 键可切换历史缩写。
3. 在选中区域下方出现的输入框中输入缩写，例如 div.wrapper>ul>li*3。输入过程中，下方会实时显示展开效果的预览。
4. 按 enter 应用，或按 escape 取消。如果缩写无法生成展开内容，错误提示将显示在输入框旁，且输入框保持打开状态以便修正。

对于单个选区，展开结果作为代码片段插入，光标定位在展开内容的末尾。对于多个选区，每个选区会被独立包裹；重叠的选区会合并后仅包裹一次。

支持文档中记录的包裹行为：

• 逐行包裹：在重复元素后加 *（不带数字），例如 ul>li*，即可为每行选中内容单独包裹一个元素。$ 编号也可用：ul>li.item$*>a。
• 去除列表标记：在末尾添加裁剪过滤器 |t，例如 ul>li*|t，可去除被包裹行中的列表标记，如 *、- 或 1.。
• 控制输出位置：在属性值或文本节点中使用 $# 占位符，例如 ul>li[title=$#]*>{$#}。
• 还支持 comment 过滤器 |c 和 BEM 过滤器 |bem，二者可以组合使用，例如 div#page>p.intro|c|bem。

如果选区只覆盖了开始标签或结束标签的一部分，会在包裹之前自动扩展为整个元素。包裹属于标记操作：在样式表中不可用，样式表中 Emmet 提供的是代码补全。

该操作没有默认快捷键。如需添加，请在你的 keymap 中进行绑定：

json [keymap] [ { "context": "Editor && mode == full", "bindings": { "ctrl-alt-w": "editor::WrapWithAbbreviation" } } ]