Overview

Use the dedicated ISML language server for scripting, completion, custom tags, navigation, diagnostics, and formatting with zero configuration.

ISML (.isml) is Salesforce B2C Commerce's server-side template language. Intellij SFCC gives it a dedicated language server - not just syntax coloring, but the same depth of intelligence you get for scripts: real scripting inside ${ … } and <isscript>, tag and attribute completion, custom-tag awareness, template navigation, validation, and formatting.

The defining feature: ISML has complete scripting support. Expressions and <isscript> blocks run through the same engine as .ds and .js, so dw.* types, pdict, loop variables, and importScript all work inside templates. See Scripting in ISML.

Explore ISML LSP

A Real Language

The extension registers .isml as the isml language with a TextMate grammar (scope text.isml.basic) that embeds HTML, CSS, and JavaScript. Opening any .isml file gives you, with zero configuration:

  • ISML tag highlighting - distinct coloring for <isif>, <isloop>, <isinclude>, <isscript>, and the rest of the ~34 standard tags.
  • Expression highlighting - ${ … } expressions colored with dw.* API tokens.
  • Embedded HTML, CSS, and JavaScript - standard highlighting alongside ISML, including full JavaScript inside <isscript> blocks.
  • Editing aids - auto-closing for ${ } and block tags (<isif>, <isloop>, <isscript>, <isdecorate>, <isobject>, <iscomment>), bracket colorization, indentation and on-enter rules, and Emmet (via the HTML language participant).

Snippets

Built-in snippets scaffold the common tags:

PrefixOutput
isif<isif condition="${}">…</isif>
isloop<isloop items="${}" var="" status="">…</isloop>
isinc<isinclude template="" />
isset<isset name="" value="" scope="page" />
isdec<isdecorate template="">…</isdecorate>
isscr<isscript>…</isscript>
isprint<isprint value="${}" />

Customizing Syntax Colors

ISML tokens follow your theme, but you can override them in settings.json:

{
  "editor.tokenColorCustomizations": {
    "textMateRules": [
      {
        "scope": "entity.name.tag.isml",
        "settings": { "foreground": "#C586C0" }
      }
    ]
  }
}

On this page