Live templates
Expand a live template: Tab
Configure: CtrlAlt0S Settings | Editor | Live Templates
Use live templates to insert common constructs into your code, such as loops, conditions, declarations, or print statements.
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 ShiftTab to move to the previous variable.
![https://resources.jetbrains.com/help/img/idea/2024.3/ws_react_live_template.png](https://resources.jetbrains.com/help/img/idea/2024.3/ws_react_live_template.png)
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, and so on.GifParameterized 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 animport
statement where you can first specify the path and then the imported members as parameters.GifSurround templates wrap a block of the selected code with the 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 CtrlAlt0J to open the Select Template popup and select theT
template to wrap the selection with a pair of tags.
JavaScript postfix templates are live templates, but create constructs for existing code. For example, you can type .if
after an expression to invoke the corresponding postfix completion and wrap the expression with an if
statement.
To configure live templates, open the Editor | Live Templates settings page CtrlAlt0S. On the Live Templates page, you can see all the available live templates, edit them and create new templates.
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.
note
If you set a dialect for a live template, this live template will work only in this dialect.
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 live template. Abbreviations of modified default templates are shown in the list with blue font.
Thanks for your feedback!