WebStorm 自动完成 html 代码答案

【问题标题】：WebStorm autocomplete html codeWebStorm 自动完成 html 代码
【发布时间】：2021-01-31 22:58:35
【问题描述】：

我正在 WebStorm 中寻找快捷方式来自动完成我的 html 代码。所以在我的情况下，如果我编写像.row 这样的代码并按下它应该自动写<div class="row"></div>。

【问题讨论】：

如果你写 div.row 并点击 Tab 就可以了。否则它怎么知道你想让那个类在哪个元素上？
天哪，是的，标签可以解决问题。我正在点击其他所有内容，而不是标签。即使你写 .class 它也会写你
。写下你的答案，我会接受的！谢谢
@jonrsharpe “否则它应该如何知道你希望该类在哪个元素上？” 这是 Emmet 的标准行为——它将是 @987654324应用了该类的@标签。
@Valor_ Tab 是默认值 .. 但它也可以是 Enter 或 Space .. 甚至是您选择的自定义键 -- Settings/Preferences | Editor | Emmet
@LazyOne 哦酷，不知道。我认为它只适用于特定的元素名称。

标签： webstorm

【解决方案1】：

这种“转换”（缩写扩展）称为 Emmet .. 并且默认使用 Tab 键。

但它也可以是 Enter 或 Space .. 甚至是您选择的自定义键 - 您可以在 Settings/Preferences | Editor | Emmet

更改它

附言对于大块代码——看看Live Templates (Code Snippets)。

【讨论】：

顺便说一句，你知道我们如何将这些代码sn-ps导出来备份或分享给其他人吗？
@Tung What "code sn-ps" 究竟是什么？ 如果您指的是标准 Emmet 缩写.. 那么它们已经是标准缩写 (docs.emmet.io/cheat-sheet) 所以如果您的编辑器/IDE 支持 Emmet，它应该已经拥有它们。如果是标准的实时模板——嗯，它们是 IDE（捆绑）的标准，所以不需要共享任何东西。对于您可以自己创建的自定义实时模板 -- jetbrains.com/help/phpstorm/… -- 它们存储在templates 子文件夹中。
感谢您提供缩写备忘单的链接。它回答了我的问题。如果它们是默认实现的，我们不需要为它们保存配置。

【解决方案2】：

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

写.row#row 并按Tab 键将变为<div class="row" id="row"></div>。

我认为这会有所帮助。

【讨论】：