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
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.formatOnSavefor 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):
{
"[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
{
"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