Visual Studio Code 中的 Emmet 2.0

2017 年 8 月 7 日，Ramya Rao，@ramyanexus

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

其功能包括

• 在建议/自动完成列表中展开 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 中是一个扩展，所以贡献比以往任何时候都更容易。VS Code GitHub 仓库中的 emmet 文件夹 包含了您入门所需的所有源代码。

编码愉快！

Ramya Rao，VS Code 团队成员 @ramyanexus