Create live templates

Press CtrlAlt0S to open the IDE settings and then select Editor | Live Templates.
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.
Click and select Live Template.
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:
Click Define below the message and select the checkboxes next to applicable contexts:
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.
(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.
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$
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.
Apply all your changes.
In the editor, type todo and press Tab.

Name	Expression	Default value	Skip if defined
DATE	date()	None	Yes
USER	user()	None	Yes

In the editor, select the text fragment to create a live template from.
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.
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.
Click OK to apply the changes.

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.

On the Editor | Live Templates page of the Settings dialog (CtrlAlt0S), select the template you want to copy.
Click Duplicate on the toolbar. A new template item is added to the same group as the original, and selected.
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.
Click OK to apply the changes.

Create live templates﻿

Create a new template from a fragment of code﻿

Copy an existing template﻿

Create a new template from a fragment of code

Copy an existing template