Emmet 是一款工具，可帮助您通过键入所需内容的缩写片段来快速构建 HTML 部分。 如果您使用 VSCode，您可以通过打开 .html 文件并尝试执行以下操作来对其进行快速测试：

<!-- type this and press `tab` in a `.html` file -->
div>ul>li.list-item*3

<!-- and you'll see it expand to: -->
<div>
  <ul>
    <li class="list-item"></li>
    <li class="list-item"></li>
    <li class="list-item"></li>
  </ul>
</div>

目前最流行的编辑器 VSCode 内置了对此的支持。 但是，如果您经常使用 Rails，您可能会注意到它在开箱即用的 erb 模板文件中不起作用。 让我们启用它吧！

首先，在 VSCode 中打开 settings.json 文件。 您可以通过打开命令面板（ctrl/cmd + shift + p）并输入“settings.json”来使用快捷方式。 查找“打开用户设置 (JSON)”项并单击它以打开该文件。 在 JSON 的大括号内，您需要添加以下内容：

"emmet.includeLanguages": {
    "html.erb": "html"
},

这将告诉 Emmet 包含扩展名为 .html.erb 的文件的 HTML 片段。 保存并关闭 settings.json，在 Rails 项目中打开视图模板，您现在应该能够使用这些片段。 这是一个很棒的备忘单，它展示了一些可以用来快速生成 HTML 的很酷的东西。

用缩写换行

代码片段可能非常有用，但我认为最好的 Emmet 技巧之一是 VSCode 中默认情况下未启用的东西。 您是否曾经需要将 HTML 部分包装在 div 中以用于样式设计？ 我不太擅长估计样式需要多少个容器，所以我必须经常这样做。 但我发现这个手动流程很麻烦。 您必须在完全不同的行上键入开始标记和结束标记，同时仍然匹配开始标记的缩进，然后必须缩进已添加的标记之间的部分。 为了帮助解决这个问题，我们可以使用 Emmet 的缩写：

因此，您可以突出显示要换行的部分，按下按键绑定，然后键入要将该部分换行的 emmet 代码片段。Emmet 将自动插入标签并缩进其间的内容。

VSCode 默认没有设置此键绑定。 要设置它，您需要导航到键盘快捷键。 单击左下角的齿轮图标，您应该在子菜单中看到键盘快捷键。 单击它，然后搜索“用缩写换行”。 您应该会看到 Emmet 命令弹出，并且您将能够将键绑定设置为适合您使用的内容。

其他考虑因素

如果不使用 VSCode 怎么办？ 这是可以理解的，我首选的编辑器是 Neovim。 您使用的编辑器可能仍以某种方式支持 Emmet。 你只需要谷歌来填补一些空白。 我为 VSCode 编写此内容是因为现在 95% 的开发人员都使用它。

有时您可能还希望将这些片段放在其他位置，例如如果您使用 React，则在 .jsx 文件中。 在这种情况下，您可以将 .jsx 添加到 settings.json 文件中的 emmet.includeLanguages 中，就像我在 html.erb 中所示的那样。