ISML Overview

ISML (.isml) is Salesforce B2C Commerce's server-side template language. Intellij SFCC runs two language servers on every template: the ISML server handles tags, attributes, template paths, structure, and formatting, while the scripting engine analyzes ${ … } expressions and <isscript> blocks with the shared SFCC type model

Explore ISML support

Scripting in ISML

Typed APIs, imports, variables, and references inside expressions and script blocks

Tags & completion

Complete standard tags, attributes, values, template paths, closing tags, and entities

Custom tags & modules

Discover ismodule declarations, complete their tags and attributes, and open their templates

Navigation & editing

Follow template links, read tag docs, rename matching tags, fold structure, and expand selections

Diagnostics

Script checks in templates, tag structure errors, and the bare # error with its quick fixes

Formatting

Format a document or selection with the tag-aware indentation engine

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 colors - in every tag that starts with <is, such as <isif>, <isloop>, <isinclude>, and your own custom tags, the tag name and its closing > or /> take their own color, so template logic stands out from the HTML around it. Attributes keep their usual colors, and <iscomment> keeps the comment color
• Expression highlighting - JavaScript highlighting inside ${ … } expressions and <isscript> blocks. The ${ and } delimiters take the theme's tag punctuation color, the same as the < and > around HTML tags
• Expressions in attribute values - a ${ … } inside an attribute value is highlighted as script too, on HTML and ISML tags alike, such as class="${cssClass}" or <isif condition="${basket.productLineItems.length > 0}">. Quoted style values and on… event handlers, such as style="width: ${width}px" or onclick="track('${product.ID}')", keep their CSS or JavaScript colors around the expression
• Embedded HTML, CSS, and JavaScript - markup, <style>, and <script> content keep their usual highlighting
• Bracket pairs - ${ … }, {}, (), and [] are colorized as matching pairs

Editing aids

• Closing tags - typing </ completes the innermost open tag, and typing > after a start tag such as <isif condition="${…}"> adds </isif>. The extension enables VS Code's HTML auto-insert for ISML, so html.autoClosingTags controls both
• Pairs - ${ gets its closing }, quotes and brackets close as you type, <!-- gets -->, and typing = after an attribute name adds the quotes (html.autoCreateQuotes). The block tags <isif>, <isloop>, <isscript>, <isdecorate>, <isobject>, and <iscomment>, typed without attributes, also close themselves
• Comments - Toggle Line Comment (⌘/ on macOS, Ctrl+/ on Windows and Linux) and Toggle Block Comment (⇧⌥A on macOS, Shift+Alt+A on Windows, Ctrl+Shift+A on Linux) wrap the line or selection in <iscomment> and </iscomment>, because ISML has no line comment. Run the command again to remove them
• Indentation - Enter after an opening block tag such as <isif …> or <isloop …>, after <iselse> or <iselseif …>, or after an HTML start tag indents the new line. Between an HTML start and end tag, such as <div> and </div>, Enter also moves the end tag to its own line
• Character entities - type & and a few letters to complete HTML character entities such as ©, each with the character it stands for
• Suggestions in quotes - the extension turns on quick suggestions inside strings for ISML, so attribute values and template paths appear while you type between quotes. Suggestions stay off inside comments

See ISML completion for everything the list offers

Tag colors

The ISML tag color comes from the extension's customTag semantic token, not from a TextMate scope, so change it with the extension's own settings. intellij-sfcc.customTagColorDark (default #2ed09a) colors the tags in dark themes, and intellij-sfcc.customTagColorLight (default #0a7b7b) in light and high contrast themes:

{
  "intellij-sfcc.customTagColorDark": "#c792ea",
  "intellij-sfcc.customTagColorLight": "#7c4dff"
}

The extension writes the color into editor.semanticTokenColorCustomizations for the active theme in your user settings, and the editor updates as soon as you change the theme or either color. Because it is a semantic token color, it needs semantic highlighting, which VS Code's built-in themes turn on (editor.semanticHighlighting.enabled). See Tag colors

Related

Scripting LSP

The same engine for .ds, .js, and .ts cartridge scripts

Scripting in ISML

Full script intelligence inside expressions and isscript blocks

ISML settings

Formatter, custom tag files, and tag colors