WebStorm 9.0.0 Web Help

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 dialog box.

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

On this page:

Preparing to use 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 not, enable the plugin.
  2. Add the Handlebars and Mustache file types to WebStorm:
    1. Open the Settings dialog by choosing File | Settings . Then select File Types. Find more on page Accessing the IDE Settings.
    2. On the File Types page that opens, click the Add button add.
    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 add 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

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 dialog box by choosing File | Settings or pressing Ctrl+Alt+SCtrl+Alt+SCtrl+Alt+SCtrl+Alt+SCtrl+Alt+SAlt+F7Ctrl+Alt+SCtrl+Alt+SCommand CommaCommand CommaCommand Comma. 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+LCtrl+Alt+LShift+Alt+LCtrl+Alt+LCtrl+Alt+LAlt+F8 or Ctrl+Alt+FShift+Alt+FCtrl+Alt+L or Ctrl+Shift+FAlt Command LAlt Command LShift Command F), 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+NumPad /Ctrl+Slash or Ctrl+NumPad /Ctrl+Slash or Ctrl+NumPad /Ctrl+Slash or Ctrl+NumPad /Alt+SemicolonCtrl+Slash, Ctrl+NumPad / or Ctrl+ColonCtrl+Slash or Ctrl+Shift+CCtrl+Slash or Ctrl+NumPad /Command Slash or Command NumPad /Command Slash or Command NumPad /Command Slash or Command NumPad / or Ctrl+Shift+Slash or Ctrl+Shift+NumPad /Ctrl+Shift+Slash or Ctrl+Shift+NumPad /Ctrl+Shift+Slash or Ctrl+Shift+NumPad /Ctrl+Shift+Slash or Ctrl+Shift+NumPad /Ctrl+Shift+Slash or Ctrl+Shift+NumPad /Ctrl+Shift+Slash, Ctrl+Shift+NumPad / or Ctrl+Shift+ColonCtrl+Shift+Slash or Ctrl+Shift+NumPad /Ctrl+Shift+SlashAlt Command Slash, Alt Command NumPad /, Control Shift Slash, Control Shift NumPad /, Shift Command Slash or Shift Command NumPad /Control Shift Slash, Control Shift NumPad /, Shift Command Slash or Shift Command NumPad /Control 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

Procedures:

Reference:

External Links:

Web Resources: