WebStorm 中自定义 HTML 元素的缩进

Question

我正在使用 WebStorm 9.0.2 创建 HTML 模板，这些模板使用来自 Knockout 的无容器控制流语法（Example) 有条件地显示元素。

这是一个例子：

<div id="my-page">
  <!-- ko if: myObservable() -->
  <h2>Hello World!</h2>
  <p>It would be nice if things within ko:if are indented..</p>
  <!-- /ko -->
</div>

WebStorm 中是否有一个选项来定义 <!-- ko if: ... -> 声明中的所有内容都必须缩进？

Answer 1

据我所知，无法指定缩进的位置 - 但是您可以查看 Code Style - JetBrains Webstorm 9.0.2

Answer 2

目前的情况是缩进无法自动完成 Knockout 的无容器控制流语法中的元素。

已经报告了这样做的愿望，您可以vote for it在即将发布的 WebStorm 版本中实现。

当前解决方法

您可以手动制作缩进并设置自动格式，以便它保留手动缩进。为此，您必须启用 Formatter Control。这可以在 文件 → 设置 → 编辑器 → 代码样式:

中完成

激活格式化程序控件后，您可以使用定义的标记来防止其中的代码被自动格式化/对齐/缩进。如果您在特定语言的注释中使用标记（适用于多种编程语言），则此方法有效。

这里是 HTML 和原始问题的例子：

<div id="my-page">
  <!-- @formatter:off -->
  <!-- ko if: myObservable() -->
    <h2>Hello World!</h2>
    <p>It would be nice if things within ko:if are indented..</p>
  <!-- /ko -->
  <!-- @formatter:on -->
</div>

非常感谢 WebStorm 支持团队 pointing this out。

如果有人想要更好的解决方案，请vote for it。

WebStorm 中自定义 HTML 元素的缩进

Identation for custom HTML elements in WebStorm

html

javascript

auto-indent

webstorm

knockout.js

当前解决方法