WebStorm 2018.2 Help

Live Templates

Live templates can be used to insert frequently-used constructs into your source code, for example, loops, conditions, various declarations, print statements, tags, and so on. To expand a code snippet, type the corresponding template abbreviation and press Tab. Keep pressing Tab to jump from one variable in the template to the next one. Press Shift+Tab to move to the previous variable. For more information, see Live Template Variables.

The following types of live templates are distinguished:

  • Simple templates contain only fixed plain text. When you expand a simple template, the text is automatically inserted into your source code, replacing the abbreviation. For example, flow inserts a @flow annotation, vbase expands into a stub for a Vue single file component, etc.

  • Parameterized templates contain variables that enable user input. When you expand a parameterized template, variables are either replaced by input fields for the user to specify manually, or calculated by WebStorm automatically. For example, importitems expands into an import statement where you can first specify the path and then the imported members as parameters.

  • Surround templates wrap a block of selected code with text specified by the user. For example, T expands into a pair of tags, for which you can specify a name. You can also select a block of code, then press Ctrl+Alt+J to open the Select Template popup and select the T template to wrap the selection with a pair of tags.

To configure live templates, open the Settings / Preferences Dialog (Ctrl+Alt+S), click Editor and then click Live Templates. This dialog lists the available live templates, enables you to edit them and create new ones. To make finding and editing templates easier, they are split into groups. To move a template to another group, right-click the template, select Move, and then select the necessary group name.

Each live template is defined by an abbreviation containing alphanumeric characters, dots, and hyphens. The abbreviation must be unique within a group, but the same abbreviation may be used in different groups and expand to different constructs according to the context of the corresponding group. Abbreviations of modified default templates are shown in the list with blue font.

To restore a modified template to the default settings

Last modified: 19 November 2018