WebStorm 2016.3 Help

Creating and Editing Live Templates

On this page:

Introduction

WebStorm comes with a set of the predefined Live Templates. You can use them as is, or modify them to suit your needs. If you want to create a new live template, you can do it from scratch, on the base of the copy of an existing template, or from a fragment of source code.

If a template has been changed, it is always possible to restore its default settings.

Modifying existing templates

To modify an existing template

  1. In the Settings/Prefereces dialog, open the Live Templates page.
  2. Expand the desired template group, and select the template you want to change.
  3. In the Template Text area, change the template abbreviation as required.
  4. In the Template Text field, edit the template body which may contain plain text and variables in the format $<variable name>$.

    When editing the live template variables, mind the following helpful hints:

    • If you need a dollar sign ($) in the template text, escape it by duplicating this character ($$).
    • To change the variables in a template, click the Edit Variables button and configure the variables as described in Creating and Editing Template Variables.

    The Edit Variables button is enabled only if the template body contains at least one user-defined variable, that is, a variable different from $END$ or $SELECTION$.

    Side note about predefined template variables

    WebStorm supports two predefined live template variables: $END$ and $SELECTION$.

    You cannot edit the predefined live template variables $END$ and $SELECTION$.

    • $END$ indicates the position of the cursor after the template is expanded. For example, the template return $END$; will be expanded into
      return ;

      with the cursor positioned right before the semicolon.

    • $SELECTION$ is used in surround templates and stands for the code fragment to be wrapped. After the template is expanded, the selected text is wrapped as specified in the template.

      For example, if you select EXAMPLE in your code and invoke the "$SELECTION$" template via the assigned abbreviation or by pressing Ctrl+Alt+T and selecting the desired template from the list, WebStorm will wrap the selection in double quotes as follows:

      "EXAMPLE"

  5. In the Options section, specify how the template will be expanded and reformatted.
  6. In the Available in section, specify the languages and places of code where the editor should be sensitive to the template abbreviation.
  7. Click OK when ready.

Creating a new live template from scratch

To create a new template from scratch

  1. In the Settings dialog, open the Live Templates page, and expand the template group where you want to create a new template.
  2. Click add.png. A new template item is added to the group and the focus moves to the Template Text area.
  3. Specify the new template abbreviation, type the template body, define the variables and the template group, configure the options, as described in the template modification procedure.
  4. Click OK when ready.

Creating a new live template from a text fragment

To create a live template from a text fragment

  1. In the editor, select the text fragment to create a live template from.
  2. On the main menu, choose Tools | Save as Live Template. The Live Templates page opens, with the Template Text area in focus.
  3. In the Abbreviation field, type abbreviation to identify your new live template.
  4. Specify the new template abbreviation, type the template body, define the variables and the template group, configure the options, as described in the template modification procedure.
  5. Click OK when ready.

Searching through the list of live templates

To search through the list of live templates

  • In the Live Templates page, start typing any string, which you expect to exist in the template abbreviation, body, or description.

    WebStorm shows all matching templates:

    /help/img/idea/2016.3/SpeedSearchInLiveTemplates.png

Restoring defaults

To restore default settings of a template

Note that a modified template is color-coded - it is shown blue.

  1. In the Live Templates page, right-click a modified template to reveal its context menu.
  2. Choose Restore defaults on the context menu of the modified template.

See Also

Last modified: 22 March 2017