PhpStorm 8.0.0 Web Help

With PhpStorm, you can use Handlebars expressions and Mustache templates in dedicated Handlebars and Mustache files that have the extension .hbs or .mustache respectively. PhpStorm distinguishes these file types and processes their contents according to default or custom settings specified on the Handlebars/Mustache 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 PhpStorm, install and activate the Handlebars/Mustache repository plugin.

    The plugin is not bundled with PhpStorm, but it is available from the PhpStorm plugin repository. Once enabled, the plugin is available at the IDE level, that is, you can use it in all your PhpStorm projects. See Installing, Updating and Uninstalling Repository Plugins and Enabling and Disabling Plugins for details.

  2. Add the Handlebars and Mustache file types to PhpStorm:
    1. Open the IDE Settings by choosing File | Settings | IDE 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, PhpStorm 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 IDE Settings by choosing File | Settings | IDE Settings . Then select Handlebars/Mustache. The Handlebars/Mustache page opens.
  2. Enable or disable tag completion.
    • To have PhpStorm 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.

      PhpStorm also recognizes triple stashes ({{{) that prevent escaping values inside expressions. In this case, PhpStorm 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, Ctrl+NumPad / 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 /Alt Command Slash, Alt Command NumPad /, Control Shift Slash, Control Shift NumPad /, Shift Command Slash or Shift Command NumPad /Control Shift Slash, PhpStorm 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: