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 操作提供多光标支持。
• 为需要解析文件的 Emmet 操作，使用 VS Code 特定 API 提供更高效的文档解析。
• 将 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。
• 我们正在 2017 年 8 月解决的 Emmet 2.0 中的已知问题

促成 Emmet 2.0 的人们

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

还要感谢所有在 Emmet 处于预览阶段时使用过它的 VS Code 用户，并通过 GitHub issues 提供了宝贵的反馈。GitHub issues 中的讨论对我们达到当前的用户体验非常有帮助。

特别感谢 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