Visual Studio Code 中的 Emmet 2.0

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

在 Visual Studio Code 2017 年 7 月版本（版本 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。
• 我们正在 2017 年 8 月解决的 Emmet 2.0 中的已知问题

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