Visual Studio Code 中的 Emmet 2.0

2017 年 8 月 7 日 Ramya Rao, @ramyanexus

在 2017 年 7 月发布的 Visual Studio Code（版本 1.15）中，我们正在推出一个更出色的 Emmet 体验，该体验在过去两个版本中一直处于预览状态。

其功能包括

• 建议/自动补全列表中的 Emmet 缩写扩展。
• 对大多数 Emmet 操作的多光标支持。
• 对自定义 Emmet 片段的更新支持。

作为此次更新的一部分，我们使用来自 @emmetio 的新 npm 模块重写了所有 Emmet 操作。

一个重要的变化是，Tab 键不再是扩展 Emmet 缩写的默认方式。相反，Emmet 缩写现在将出现在建议列表中。它们可以像任何其他智能补全一样被选中，选中后，缩写将被扩展。

注意：要继续使用 Tab 键扩展 Emmet 缩写和片段，请将 emmet.triggerExpansionOnTab 设置为 true。

继续阅读以了解 Visual Studio Code 中 Emmet 2.0 的变化。

Emmet 的新模块化方法

以前，Emmet 库是一个单一的整体代码库，用于每个 Emmet 操作。Emmet 的作者 Sergey Chikuyonok 设想了一个 Emmet 2.0 的新世界，其中包含更小、可重用的模块。

现在有来自 @emmetio 的单独 npm 模块，用于扩展 Emmet 缩写所需的管道的不同部分。这些包括以下步骤

• 解析缩写
• 解析片段和变量
• 根据语法渲染输出
• 应用转换

还有单独的模块用于解析 HTML 和 CSS 文档，以帮助实现 Emmet 的其余功能。您可以在 npm 上 emmetio 下找到这些模块。

采用这种模块化方法是为了允许编辑器插件使用编辑器特定的 API，以便 Emmet 更好地与编辑器功能集成。例如，这种方法使我们能够

• 在建议/自动补全列表中提供 Emmet 缩写扩展。
• 为大多数 Emmet 操作提供多光标支持。
• 使用 VS Code 特定 API 为需要解析文件的 Emmet 操作提供更高效的文档解析。
• 将 Emmet 集成从 VS Code 核心中移除并放入扩展中。

Tab 不再是默认的 Emmet 扩展键

使用 Tab 键作为 Emmet 扩展的键盘快捷键存在两个问题

• 当用户想使用 Tab 键缩进源代码时，发生了 Emmet 扩展。
• 当用户想扩展 Emmet 缩写时，插入了建议列表中的项目。

Sergey Chikuyonok 意识到将 Emmet 放在建议列表中会带来更愉快的体验。它帮助我们解决了上述两个问题，这是一个额外的收获。

现在 Emmet 缩写可以通过建议列表轻松访问，我们能够删除 Tab 键与 Emmet: ExpandAbbreviation 命令的默认关联。Tab 键现在可以自由地执行其应有的操作：缩进。

如果您关闭了 editor.quickSuggestions 设置，您将不得不按 ⌃Space (Windows, Linux Ctrl+Space) 来手动触发建议/自动补全列表。

如果您不希望 Emmet 出现在建议/自动补全列表中，请将 emmet.showExpandedAbbreviation 设置为 never。

您仍然可以将任何键盘快捷键（Tab 键除外）绑定到 editor.emmet.action.expandAbbreviation 命令，或者从命令面板中使用 Emmet: Expand Abbreviation。

如果您更喜欢使用 Tab 键扩展缩写，请将设置 emmet.triggerExpansionOnTab 添加到您的设置中并将其设置为 true。我们使用此设置提供适当的回退，以便在没有缩写可扩展时提供缩进。

其他更改

我们已经在新的 Emmet 页面中记录了一些其他更改

• 使用 emmet.includeLanguages 而不是 emmet.syntaxProfiles 设置来在其他文件类型中启用 Emmet
• 您编写Emmet 中自定义片段的方式的更改
• 可用Emmet 设置的更改
• 要将单个选择中的单独行包装在单独的标签中，请使用命令 Emmet: Wrap Individual Lines with Abbreviation 而不是 Emmet: Wrap with Abbreviation。
• Emmet 2.0 中的已知问题，我们正在 2017 年 8 月解决这些问题

让 Emmet 2.0 实现的人

我要感谢 Sergey Chikuyonok 在 Emmet 模块化方面所做的出色工作，以及帮助我们将这些改进带到 VS Code。

还要感谢所有在 VS Code 预览版中使用新 Emmet 并通过 GitHub 问题提供了宝贵反馈的人。GitHub 问题中的讨论对于实现当前用户体验非常有帮助。

特别感谢 Steve Lombardi、Jens Hausdorf、Vladimir Sizikov、Niichie、Thomas Klepzig 以及许多使用 VS Code Insiders 版本测试我的错误修复和功能添加的人。

分享您对新 Emmet 的想法

您是否怀念旧 Emmet 的任何功能？使用新 Emmet 时遇到问题？请随时创建 GitHub 问题，我们将尽力帮助您。

由于 Emmet 现在是一个扩展，因此为 VS Code 中的 Emmet 做出贡献也比以往任何时候都更容易。VS Code GitHub 仓库中的 emmet 文件夹包含您开始所需的所有源代码。

编码愉快！

Ramya Rao, VS Code 团队成员 @ramyanexus