IntelliJ IDEA 2016.3 Help

Using Handlebars and Mustache Templates

This feature is supported in the Ultimate edition only.

On this page:

Basics

With IntelliJ IDEA, you can use Handlebars expressions and Mustache templates in dedicated Handlebars and Mustache files that have the extension .hbs or .mustache respectively. IntelliJ IDEA 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/.

The plugin is not bundled with IntelliJ IDEA, but it can be installed from the JetBrains plugin repository as described in Installing, Updating and Uninstalling Repository Plugins and Enabling and Disabling Plugins.

Preparing to use Handlebars expressions and Mustache templates

To prepare using Handlebars expressions and Mustache templates

  1. To enable the Handlebars/Mustache support in IntelliJ IDEA, install and activate the Handlebars/Mustache repository plugin. The plugin is not bundled with IntelliJ IDEA, but it can be installed from the JetBrains plugin repository as described in Installing, Updating and Uninstalling Repository Plugins and Enabling and Disabling Plugins.
  2. Add the Handlebars and Mustache file types to IntelliJ IDEA:
    1. Open the Settings/Preferences dialog by choosing File | Settings for Windows and Linux or IntelliJ IDEA | 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, IntelliJ IDEA 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 Template-based Files.

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 IntelliJ IDEA | 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 IntelliJ IDEA 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.

      IntelliJ IDEA also recognizes triple stashes ({{{) that prevent escaping values inside expressions. In this case, IntelliJ IDEA 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, IntelliJ IDEA 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: 21 March 2017