WebStorm自动完成HTML代码

Question

我正在寻找 WebStorm 中用于自动完成 HTML 代码的快捷方式。例如，在我的情况下，如果我键入代码.row并按某个键，它应该自动写出<div class="row"></div>。

- Valor_

---

如果你输入 div.row 并按下 Tab 键，它就会自动补全。否则它怎么知道你想要把这个类放在哪个元素上呢？ - jonrsharpe

哦，是的，Tab键就可以了。我一直在敲其他的键，但没有敲Tab键。 即使你写.class，它也会写成<div class="class"></div>。请写下你的答案，我会接受的！谢谢。 - Valor_

“否则它怎么知道你想要这个类应用在哪个元素上呢？”这是Emmet的标准行为 - 它将创建一个带有该类的div标签。 - LazyOne

@Valor_ Tab 是默认选项，但也可以是 Enter 或 Space，甚至是您选择的自定义键 -- 设置/首选项 | 编辑器 | Emmet。 - LazyOne

@LazyOne 哦，太酷了，我不知道。我以为它只能附加到特定的元素名称上才能工作。 - jonrsharpe

Answer 1

这里讲的是“变换”（缩写扩展）叫做Emmet.. 默认情况下使用Tab键。但它也可以是Enter或Space..甚至是您选择的自定义键 - 您可以在“设置/首选项|编辑器|Emmet”中更改它。

---

P.S. 对于大段的代码，请查看Live Templates（代码片段）。

- LazyOne

---

顺便问一下，你知道我们如何将这些代码片段导出以备份或与他人分享吗？ - Tung

@Tung，“code snippets”指的是什么？如果你指的是标准的Emmet缩写...那么它们已经是标准的了（https://docs.emmet.io/cheat-sheet/），所以如果你的编辑器/IDE支持Emmet，它应该已经有了。如果是标准的Live Templates - 那么它们对于IDE（捆绑）来说是标准的，所以不需要分享任何东西。对于你自己可以创建的自定义Live Templates - https://www.jetbrains.com/help/phpstorm/tuning-the-ide.html#config-directory - 它们存储在templates子文件夹中。 - LazyOne

感谢提供缩写速查表的链接，它回答了我的问题。如果它们已经默认实现了，我们就不需要为它们保存配置。 - Tung

Answer 2

您可以使用Tab键来自动完成代码。例如：

输入 .row#row 然后按下Tab键将会生成<div class="row" id="row"></div>代码。

我认为这会很有帮助。

- Jaied