language-sfcc

Adds syntax highlighting, completions, and snippets to ISML & Demandware Script files in Atom.


Keywords
atom, atom-package, salesforce, salesforce-commerce-cloud, syntax-highlighting
License
MIT
Install
apm install language-sfcc@0.6.0

Documentation

Language SFCC

Atom SFCC

Build Status Windows Build status Known Vulnerabilities

Adds syntax highlighting, completions, and snippets to .isml & .ds (Demandware Script) files in Atom.
With support for Autocomplete+ & Hyperclick already included.

Installation

Command Line

  1. Install the latest version of Atom
  2. In the terminal, install the package via apm:
apm install language-sfcc

GUI

  1. Install the latest version of Atom
  2. Launch Atom
  3. Open Settings View using Cmd+, on macOS or Ctrl+, on other platforms
  4. Click the Install tab on the left side
  5. Enter language-sfcc in the search box and press Enter
  6. Click the "Install" button that appears

Autocomplete

The description for autocomplete .isml tags are grabbed from the official Salesforce Commerce Cloud B2C documentation. In order to properly consult the official guide, you must be a Salesforce Developer registered in an instance of your sandbox or in a Commerce Cloud B2C development environment.

Tags

The autocompletion of the tags respects the semantics, for the correct functionality of the tags in the SFCC environment. Look at this example of spacing of the <isreplace/> tag. The highlight of the tag color helps you understand if the type is wrong.

isreplace-snippet

Snippets

Once the package is installed, all the snippets available for the various tag servers are available in the section: Snippets.
By default, any completion of any tag server can be called without the is extension.

Example: if you type include become:

<isinclude template="common/layout/page" />

Autocomplete+

Support for autocomplete+ is already included in the package.
At each insertion of the opening of each tag, typing therefore: <, all available server-side tags are shown.

For each tag, in turn, all it's available attributes are self-completed. Before you can close each tag the package helps you understand which type of closure to respect for each tag, thus avoiding syntax errors.

isml-completions

In addition to suggesting if the tag has attributes or not to insert, the typologies of suggestion, already explanatory for their name while writing the tag, can be:

  • Block Closing With Attr(s)
  • Block Closing Without Attrs
  • Self Closing With Attr(s)
  • Self Closing Without Attrs

Hyperclick

It's possible to open the templates included in the template attribute in the tags:

  • <isdecorate/>
  • <isinclude/>
  • <ismodule/>

Here is an example of automatically opening the templates with Hyperclick interaction. In macOS the automatic trigger of the underline can be activated with the combination of the default keys cmd + click, and in other platforms with: control + click.

hero-hyperclick

In order to enable Hyperclick support, the installation of atom-ide-ui is required. Once installed language-sfcc you will be asked optionally whether or not to activate this feature.

Grammar

By default the ISML syntax includes the default scope for HTML files (text.html.basic), so many of the packages that work for the .html extension also work in the .isml files. For example, the extension for automatic closing of tags.

Syntax

The package supports, compared to other extensions for the various editors, full highlight syntax between the html and isml tags. Even in complex situations. Here is an example.

syntax-preview

Validate ISML

Each .isml files can be parsed with the htmlhint plugin, configurable by .htmlhintrc file.
Follow this guide to be able to parse files correctly.

License

Language SFCC is released under the MIT license.