Formatting

Format ISML templates with a tag-aware formatter that changes only indentation, or with the legacy JS-Beautify engine, and escape bare

The ISML language server formats .isml files. The default Indentation formatter sets the indentation of each line from the ISML and HTML tag structure and leaves the rest of the line exactly as written, apart from the bare # escapes

The Indentation formatter changes only the leading whitespace: every line keeps its text, and ISML block and branch tags set the depth. Format Selection indents the selected lines to the depth the whole template gives them

Format a template

  • Format Document formats the whole file. Run it from the Command Palette or the editor context menu, or press ⇧⌥F on macOS, Shift+Alt+F on Windows, or Ctrl+Shift+I on Linux
  • Format Selection formats only the selected lines, with ⌘K ⌘F on macOS or Ctrl+K Ctrl+F on Windows and Linux. Each line gets the depth the whole template gives it, so a block pasted at the wrong level lands where it belongs
  • To format on every save, turn on VS Code's editor.formatOnSave for all files, or for ISML only under "[isml]" in your workspace settings

The extension makes itself the default ISML formatter: on every start, it sets the "[isml]" block in your user settings to "editor.defaultFormatter": "intellijsfcccom.intellij-sfcc". That replaces the whole block, so other ISML-only settings you put there, such as editor.formatOnSave, are lost. Keep them in workspace settings (.vscode/settings.json):

.vscode/settings.json
{
  "[isml]": {
    "editor.formatOnSave": true
  }
}

What the Indentation formatter changes

  • Block tags 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
  • Tag text, attributes, ${...} expressions, and one-line markup are never rewritten, apart from a bare #. Lines are never joined or split, and blank lines lose only their whitespace
  • The content of <isscript>, <script>, <style>, and <iscomment> moves to the depth of its tag and keeps its own relative indentation
  • The content of <pre> and <code> is kept exactly as written

Indentation follows the file's indentation settings, editor.tabSize and editor.insertSpaces, shown as Spaces: 4 in the status bar

Bare # in template text

Format Document and Format Selection write each bare # of the template text as ${'#'}, or ${"#"} inside single quotes, the fix of the bare # error. Both engines do, and Format Selection only inside the selection. Organize Imports (Shift+Alt+O) writes the same escapes without formatting

<a href="#reviews" style='color: #1a73e8'>Reviews</a>
<isprint value="${product.price}" formatter="#,##0.00" />

becomes

<a href="${'#'}reviews" style='color: ${"#"}1a73e8'>Reviews</a>
<isprint value="${product.price}" formatter="#,##0.00" />

formatter is an ISML attribute, so its # stays. To keep bare #, turn off intellij-sfcc.isml.formatter.escapeHash. The error and its quick fixes stay

Formatter settings

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

See Settings for a JS-Beautify example with html.format.wrapLineLength

On this page