WebStorm 2016.3 Help

Using Handlebars and Mustache Templates

On this page:

Basics

With WebStorm, you can use Handlebars expressions and Mustache templates in dedicated Handlebars and Mustache files that have the extension .hbs or .mustache respectively. WebStorm distinguishes these file types and processes their contents according to default or custom settings specified on the Templates page of the Settings/Preferences dialog.

For more details about Handlebars expressions and Mustache templates see http://handlebarsjs.com/.

Preparing to use Handlebars expressions and Mustache templates

To prepare using Handlebars expressions and Mustache templates

  1. To enable the Handlebars/Mustache support in WebStorm, make sure, the Handlebars/Mustache plugin is active. The plugin is bundled with WebStorm and activated by default. If the plugin is not activated, enable it on the Plugins page of the Settings / Preferences Dialog as described in Enabling and Disabling Plugins.
  2. Add the Handlebars and Mustache file types to WebStorm:
    1. Open the Settings/Preferences dialog by choosing File | Settings for Windows and Linux or WebStorm | Preferences for OS X. Then select File Types. Find more on page Accessing Settings.
    2. On the File Types page that opens, click the Add button /help/img/idea/2016.3/new.png.
    3. In the New File Type dialog box that opens, specify the name of the new type Handlebars/Mustache and optionally provide a description. When you click OK, WebStorm returns to the File Types page.
    4. Select the newly registered file type and in the Registered Patterns area, specify the patterns that define the files of this type *.hbs and *.mustache. To add a pattern, click the Add button /help/img/idea/2016.3/new.png and type the pattern in the Add Wildcard dialog box that opens.
    Find more on page Creating and Registering File Types.
  3. Create a file of the type Handlebars or Mustache and place your code there. To create a file, select the parent folder and on the context menu of the selection choose New | Handlebars and specify the file name in the dialog box that opens. Find more on page Creating Files from Templates.

Configuring processing of Handlebars expressions and Mustache templates

To configure processing of Handlebars expressions and Mustache templates

The configuration settings you specify apply only to dedicated Handlebars and Mustache files that have the extension .hbs or .mustache respectively.

  1. Open the Settings / Preferences Dialog by pressing Ctrl+Alt+S or by choosing File | Settings for Windows and Linux or WebStorm | Preferences for OS X. Expand the JavaScript node under Languages&Frameworks, and then click Templates under JavaScript. The Templates page opens. Switch to the Handlebars/Mustache area.
  2. Enable or disable tag completion.
    • To have WebStorm automatically insert the second closing curly brace (}) of a Handlebars expression as soon as you type the first closing one, select the Automatically insert closing tag check box.

      WebStorm also recognizes triple stashes ({{{) that prevent escaping values inside expressions. In this case, WebStorm automatically inserts two closing curly braces as soon as you type the first closing one.

    • When this check box is cleared, you have to type the closing curly braces and triple stashes manually.
  3. To have Handlebars expressions and Mustache templates automatically reformatted during code generation, refactoring, or reformatting (Ctrl+Alt+L), select the Enable formatting check box.

    If the check box is cleared, the original formatting of Handlebars expressions and Mustache templates is preserved.

  4. From the Language for comments drop-down list, select the language to inherit the style for comments from. When you enter a line or block comment by pressing Ctrl+Slash or Ctrl+Shift+Slash, WebStorm inserts the comment delimiters that are used in the chosen language, for example, {{!----}} for Handlebars, /**/ for JavaScript, <!----> for HTML, etc.

See Also

```

Reference:

Language and Framework-Specific Guidelines:

Last modified: 22 March 2017