WebStorm 2016.1 Help

Template Text Area

File | Settings | Editor | Live Templates for Windows and Linux
WebStorm | Preferences | Editor | Live Templates for OS X

The dialog box opens when you click the Add, Edit, or Copy button in the Live Templates dialog box. Use this dialog box to create new live templates and edit settings of the existing ones.

AbbreviationIn this text box, specify the template abbreviation.
GroupUse this field to specify which group the template belongs to. Choose one of the existing groups from the list, or type the name of a new one.
DescriptionIn this text box, provide optional description of a template.
Template TextIn this text box, type the template body that 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$.

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:


Edit VariablesClick this button to open the Edit Template Variables dialog box, where you can define how WebStorm should process template variables upon template expansion.

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$.

OptionsIn this area, define the behavior of the editor when a template is expanded.
  • Expand with: from this drop-down list, choose the key to invoke the template.
  • Reformat according to style: select this check box to have WebStorm automatically reformat the expanded text according to the current style settings, defined in the Code Style dialog box.
Applicable in: This read-only field shows the languages and/or pieces of code where the editor should be sensitive to the template. Upon pressing Ctrl+J in such context, WebStorm displays a list of templates that are valid for this context.
Change Click this link to modify the set of contexts where the current template is enabled. Upon clicking the link, displays a list of supported language contexts is displayed. To make WebStorm consider a context sensitive to the template, select a check box next to the context name.

See Also

Last modified: 11 July 2016