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”来乘坐快捷方式。查找项目Open User Settings (JSON)，然后单击它打开文件。在JSON的卷发括号内，您需要添加以下内容：

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

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

用缩写包裹

摘要的内容可能非常有用，但是我认为最好的emmet技巧之一是默认情况下在vscode中无法启用的东西。您是否曾经需要将HTML的一部分包裹在div中？我擅长估计造型需要多少个容器，因此我必须经常这样做。但是我发现了这个笨拙的手动流动。您必须在完全不同的线路上键入打开标签，同时仍与开头标签的凹痕匹配，然后您必须缩进添加的标签之间的部分。为此，我们可以使用Emmet的wrap with abbreviation：

因此，您可以突出显示要包装的部分，点击钥匙扣，然后键入要包装该部分的emmet片段。EMMET将处理插入标签并自动将内容置入其中。

vscode默认情况下没有此键键设置。要设置它，您需要导航到键盘快捷键。单击左下方的齿轮图标，您应该在子菜单中看到Keyboard Shortcuts。单击它，然后搜索“用缩写包裹”。您应该看到弹出emmet命令，并且可以将钥匙扣设置为适合您的东西。

其他考虑因素

如果您不使用VSCODE怎么办？这是可以理解的，我首选的编辑是Neovim。您使用的编辑者可能仍然以某种方式支持Emmet。您只需要Google填补一些空白即可。我为VScode写了这篇文章，因为这是如今95％的开发人员使用的。

您有时可能还需要在其他地方使用这些片段，例如在.jsx文件中使用React。在这种情况下，您可以像我在html.erb中显示的emmet.includeLanguages中添加.jsx。