WebStorm 2018.2 Help

Creating Live Templates

The following example procedure illustrates how to create a template for a TODO comment with the current date, user name, and two user-defined variables that expand into input fields:

  1. On the Live Templates page of the Settings / Preferences Dialog, select the template group where you want to create the new live template (for example, other).

  2. Click Add icons general add svg on the toolbar. A new template item is added and selected.

  3. Specify the following values:

    Text box

    Description

    Example value

    Abbreviation

    Specify the characters to expand the template

    todo

    Description

    Specify an optional description to identify what the template is for

    Insert TODO comment with the current date, user, and two input fields for the TODO suggestion and for the name of the project where it is relevant.

    Template text

    Specify the body of the template with variables

    //TODO added on $DATE$ by $USER$: consider $todo$ for project $project$

  4. Click Define at the bottom to select the applicable contexts (for example, JavaScript if it should apply to source files).

  5. Click Edit Variables and select the date() function for $DATE$ and user() for $USER$. If necessary, change the order of variables in the list using icons general comboUpPassive and icons general comboBoxButtonArrow. This order determines the order in which the cursor will jump between the variables in the expanded template. For example, if you move the $todo$ variable down, the cursor will jump to its input field after the $project$ input field is completed.

    Click OK to close the dialog.

  6. Click OK to apply the changes.

Depending on the current system date and user name, the newly created todo template will expand as follows::

If you want to reuse the same template in multiple groups, or you want to create a new template based on another one, you can duplicate an existing template.

To copy an existing template:

  1. On the Live Templates page of the Settings / Preferences Dialog, select the template which you want to copy.

  2. Click Duplicate (The Duplicate button) on the toolbar. A new template item is added to the same group as the original, and is selected.

  3. Specify a new abbreviation for the template, an optional description (to identify what the template is for), and modify the template body if necessary. If the template has variables defined, click Edit Variables to configure the variables.

  4. Click OK to apply the changes.

To create a new template from a fragment of code:

  1. In the editor, select the text fragment to create a live template from.

  2. On the Tools menu, click Save as Live Template. The Live Templates page opens, with the new template created and selected.

  3. Specify an abbreviation for the template, an optional description (to identify what the template is for), and modify the template body. If the template has variables defined, click Edit Variables to configure the variables.

  4. Click OK to apply the changes.

Last modified: 2 October 2018