WebStorm 2020.3 Help

File templates

File templates are specifications of the default contents for new files that you create. Depending on the type of file you are creating, templates provide initial code and formatting expected in all files of that type (according to industry or language standards, your corporate policy, or for other reasons).

WebStorm provides predefined templates for all supported file types suggested when you create a new file.

To manage and configure file templates, open the Editor | File and Code Templates page of the Settings/Preferences Ctrl+Alt+S.

  • The Default scope controls templates that apply to the entire workspace in any project. They are stored in the IDE configuration directory under fileTemplates.

  • The Project scope controls templates that apply only to the current project. They are stored in the project folder under .idea/fileTemplates. These templates can be shared among team members.

By default, the list of templates contains only predefined templates provided by WebStorm. Some of them are internal, which means they cannot be deleted or renamed. The names of internal templates are shown in bold. The names of templates that you modified, as well as custom templates that you created manually, are shown in blue.

WebStorm uses several types of templates, separated into the following tabs:

  • The Files tab contains file templates for creating new files.

  • The Includes tab contains pieces of reusable content for inserting into file templates (for example, if a specific header applies to multiple file templates).

  • The Code tab contains internal templates for code fragments (snippets) used by WebStorm to generate various constructs. You can edit the available snippets on this tab, but you cannot create new ones.

    To create custom code snippets, use Live templates.

The following procedures describe how to create file templates. Similar procedures can be used for creating include templates.

Create a new file template

  1. In the Settings/Preferences dialog Ctrl+Alt+S, select Editor | File and Code Templates.

  2. On the Files tab, click the Create Template button and specify the name, file extension, and body of the template.

  3. Apply the changes and close the dialog.

Copy an existing file template

  1. In the Settings/Preferences dialog Ctrl+Alt+S, select Editor | File and Code Templates.

  2. On the Files tab, click the Copy Template button and modify the name, file extension, and body of the template as necessary.

  3. Apply the changes and close the dialog.

Save a file as a template

  1. Open a file in the editor.

  2. Choose Tools | Save File as Template from the menu.

  3. In the Save File as Template dialog, specify the new template name and edit the body, if necessary.

  4. Apply the changes and close the dialog.

Syntax

File and code templates use the Velocity Template Language (VTL), which includes the following constructs:

  • Fixed text (markup, code, comments, and so on), which is rendered as-is.

  • Variables, which are replaced by their values.

  • Various directives, including #parse, #set, #if, and others.

Fore more information, see the VTL reference guide.

The following example shows the default template for creating a JavaScript class in WebStorm:

/** * Created by ${USER} on ${DATE} */

In this template, ${USER} and ${DATE} are template variables.

When you create a new JavaScript file, this template generates a file with contents similar to the following:

/** * Created by John.Smith on 6/7/11 */

The following example shows the default template for creating a Gherkin features file in WebStorm:

# Created by ${USER} at ${DATE} Feature: #Enter feature name here # Enter feature description here Scenario: # Enter scenario name here # Enter steps here

In this template, ${USER} and ${DATE} are template variables. When you create a new Gherkin file, this template generates a feature file with contents similar to the following:

# Created by jetbrains at 25.06.2018 Feature: #Enter feature name here # Enter feature description here Scenario: # Enter scenario name here # Enter steps here
Last modified: 08 March 2021