Formatting

Format ISML templates with a tag-aware indentation formatter (or legacy JS-Beautify), configurable via dedicated settings

The ISML language server formats .isml files with an understanding of ISML tag structure - indenting block tags, branch tags (<iselse>, <iselseif>), and embedded content correctly. Run it with Shift+Alt+F (Format Document) or on save.

<isif condition="${pdict.showProducts}">
<isloop items="${pdict.products}" var="product" status="loopstate">
<div class="product-tile">
<h2>${product.name}</h2>
</div>
</isloop>
</isif>
<isif condition="${pdict.showProducts}">
    <isloop items="${pdict.products}" var="product" status="loopstate">
        <div class="product-tile">
            <h2>${product.name}</h2>
        </div>
    </isloop>
</isif>

Formatter Settings

settings.json
{
  "intellij-sfcc.isml.formatter.enabled": true,
  "intellij-sfcc.isml.formatter.type": "Indentation",
  "intellij-sfcc.isml.formatter.wrapAttributes": "preserve"
}

Indentation respects your VS Code editor.tabSize and editor.insertSpaces settings, so ISML formatting matches the rest of your project.

On this page