Formatting

Reformat Code formats .isml files from their ISML and HTML tag structure. The default Indentation mode sets the indentation of each line and leaves the rest of the line as you wrote it. Full mode also tidies the inside of the lines. Formatting is free and works while the IDE indexes

IndentationFull mode

STstorefrontSandbox 01version2

productTile.isml

1<isinclude template="product/components/badges" sf-toolkit="off"/>

2<div class="tile" data-pid="${ product.ID }" >

3 <isif condition="${ product.available }" >

4 <span class = "name">${product.name}</span>

5 <isprint value="${product.price}" encoding="htmlcontent" />

6 <iselse>

7 <span class="sold-out">${Resource.msg('label.soldout', 'product', null)}</span>

8 </isif>

9 <isscript>

10 var total=pdict.count;

11 if(total>3){

12 total=3;

13 }

14 </isscript>

15</div>

storefrontapp_customcartridgetemplatesdefaultproductproductTile.ismlGlobal scopeLFUTF-8

Format a template

• Code › Reformat Code (Cmd+Alt+L, Ctrl+Alt+L) formats the whole file, or only the selected lines when there's a selection. Each selected line gets the depth the whole template gives it, so a block pasted at the wrong level lands where it belongs
• Code › Reformat File... (Cmd+Alt+Shift+L, Ctrl+Alt+Shift+L) asks for the scope first. Reformat Code on a folder in the Project view formats every template in it
• To format on every save, turn on Reformat code in Settings › Tools › Actions on Save and pick ISML among its file types

In Indentation mode a template keeps its number of lines. Full mode may wrap long start tags into more lines. Formatting a result again changes nothing in either mode

Indentation mode

• Tags with a body, such as <isif>, <isloop>, <isdecorate> and <isobject>, indent their content one level, as nested HTML elements do
• <iselseif> and <iselse> line up with their <isif>, and the lines after them are indented one level
• HTML elements pair their start and end tags as written, so a table whose rows come from an <isloop> inside a cell indents correctly. Where ISML and HTML cross, such as a <div> opened in one branch and closed after </isif>, the ISML tags set the depth
• The body of <isscript>, <script> and <style> moves as a whole and keeps the relative indentation of its lines
• Multi-line start tags, ${...} expressions and comments move with their first line. The body of <iscomment> moves as a whole too, where the VS Code formatter indents it
• The content of <pre>, <textarea> and multi-line JavaScript strings and template literals never moves

Tag text, attributes and expressions are never rewritten, and lines are never joined or split. Indentation follows Settings › Editor › Code Style › ISML › Tabs and Indents, or indent_size and indent_style in .editorconfig

Full mode

Full mode keeps the indentation of Indentation mode and also:

• Leaves one space between the attributes of a start tag and none around =. ISML tags keep a space before /> when they had one
• Removes the spaces inside ${ }, or puts one on each side with Expression braces ${ }
• Wraps and aligns the attributes of ISML tags as the ISML attributes options say. HTML tags follow Settings › Editor › Code Style › HTML
• Formats <isscript>, <script> and <style> bodies with the JavaScript and CSS formatters. A <script> with ${...} inside keeps its lines, since the server fills them in
• Keeps blank lines up to Keep blank lines of the HTML code style and removes spaces at line ends

<iscomment>, HTML comments and <pre> keep their text exactly. Text lines are never joined or split, and the code inside ${...} keeps its spacing unless you turn on Format ${} expressions with the JavaScript formatter:

<isprint value = "${ Resource.msg('x','y',null) }"  encoding="off"   />
<p>${a+b}</p>

<isprint value="${Resource.msg('x','y',null)}" encoding="off" />
<p>${a+b}</p>

<isprint value="${Resource.msg('x', 'y', null)}" encoding="off" />
<p>${a + b}</p>

Attribute wrapping

With ISML attributes (full mode) set to Wrap always, each attribute after the first goes on its own line:

<isinclude template="components/header"
    sf-toolkit="off" />

<isinclude template="components/header"
           sf-toolkit="off" />

<isinclude
    template="components/header"
    sf-toolkit="off"
/>

Wrap if long wraps only start tags that pass Hard wrap at. With Keep line breaks off, an ISML start tag you split over lines is joined back into one line

Code style options

Every option is in Settings › Editor › Code Style › ISML. Options marked full mode do nothing in Indentation mode

The HTML code style's own Do not indent children of list (html, body, thead, tbody, tfoot) doesn't apply to templates, so tables keep their depth

EditorConfig

Put the options in .editorconfig to share them with the team. Each one is ij_isml_ and the option name:

[*.isml]
indent_size = 4
ij_isml_formatter_mode = full
ij_isml_attribute_wrap = on_every_item
ij_isml_align_attributes = true
ij_isml_spaces_within_expression_braces = false
ij_isml_format_expressions = true

Export › EditorConfig File on the code style page writes every option for you

Matching the VS Code formatter

Indentation mode follows the rules of the VS Code Indentation formatter, apart from the <iscomment> body, so a team that uses both editors gets the same templates. For the VS Code intellij-sfcc.isml.formatter.wrapAttributes values, set the same wrapping in Full mode, under ISML attributes for ISML tags and in the HTML code style for HTML tags:

Related