Search code examples
javascripthtmlknockout.jswebstormauto-indent

Identation for custom HTML elements in WebStorm

I am using WebStorm 9.0.2 to create HTML templates which use containerless control flow syntax from Knockout (Example) to conditionally display elements.

Here is an 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>

Is there an option in WebStorm to define that everything inside a <!-- ko if: ... -> declaration must be indented?

Solution

  • Current situation is that the indentation can not be done automatically for elements inside Knockout's containerless control flow syntax.

    The wish to do that has been reported and you can vote for it to be implemented in upcoming WebStorm releases.

    Current workaround

    You can make the indentation manually and set the Auto Format so that it retains the manual indentation. To do that, you have to enable the Formatter Control. This can be done in File → Settings → Editor → Code Style:

    Enable Formatter Control

    When the Formatter Controls are activated, you are able to use the defined markers to prevent code within from being automatically formatted / aligned / indented. This works if you use the markers within comments of the specific language (works with multiple programming languages).

    Here is an example for HTML and the original problem:

    <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>

    Many thanks to the WebStorm support team for pointing this out.

    And if anyone would like to have a better solution, then please vote for it.