Visual Studio Code 中的 Emmet 2.0

2017 年 8 月 7 日 Ramya Rao, @ramyanexus

在 Visual Studio Code 2017 年 7 月版本 (版本 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 issue 反馈给我们。GitHub issue 中的讨论对于实现当前的用户体验非常有帮助。

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

分享您对新 Emmet 的看法

您怀念旧 Emmet 的任何功能吗？使用新 Emmet 遇到困难了吗？请随时在 GitHub 上创建 issue，我们将尽力帮助您。

现在 Emmet 已成为 VS Code 的扩展，贡献代码也比以往任何时候都更容易。VS Code GitHub 仓库中的 emmet 文件夹包含您入门所需的所有源代码。

编码愉快！

Ramya Rao，VS Code 团队成员 @ramyanexus