WebStorm 2022.3 Help

Create 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. Press Ctrl+Alt+S to open the IDE settings and select Editor | Live Templates.

  2. Select the template group where you want to create a new live template (for example, other).

    If you do not select a template group, the live template will be added to the user group.

  3. Click the Add button and select Live Template.

  4. Specify the context in which the template will be available. By default, no context is specified and WebStorm displays a message at the bottom of the dialog:

    No available context message

    Click Define below the message and select the checkboxes next to applicable contexts:

    Create live template: specify the applicable context
  5. In the Abbreviation field, specify the characters that will be used to expand the template. For example: todo. You can also define the languages to apply the newly added template.

  6. (Optional) In the Description field, describe the template for reference in the future.

    For example: 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.

  7. In the Template text field, specify the body of the template with variables.

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

  8. Click Edit variables to define the variables using functions:

    Name

    Expression

    Default value

    Skip if defined

    DATE

    date()

    None

    Yes

    USER

    user()

    None

    Yes

    You can set a default value for cases when the expression fails to evaluate, although these particular functions should always return a valid value. You can also disable the Skip if defined option for a variable to highlight the expanded value and let the user modify it if necessary.

  9. Apply all your changes.

  10. In the editor, type todo and press Tab.

Create a new template from a fragment of code

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

  2. Select Code | Save as Live Template... from the main menu. The list of the live templates opens. In this list, the newly created template has been added to the user group.

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

  4. Click OK to apply the changes.

Copy an existing template

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.

  1. On the Editor | Live Templates page of the Settings dialog (Ctrl+Alt+S), select the template 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 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 them.

  4. Click OK to apply the changes.

Last modified: 17 January 2023