WebStorm 2023.1 Help

Templates with multiple files

Some programming patterns and frameworks require a set of related files, usually with a very specific structure. For example, for a component, you often need a bunch of files - one for the template, another for logic, and the third one for styles.

In WebStorm, you can create sets of related files by adding child templates to a file template. When you create a file from such a template, it will also create files from child templates.

Create a template with multiple files

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

  2. Create the main file template.

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

  3. Select the new template in the list and click The Create Child Template File button on the toolbar. Specify the name, file extension, and body of the child template.

Example: Template for component files

Suppose you want to create a Header folder with a bunch of component files, for example, Header.js, Header.test.js, and Header.css.

  1. Open the Settings dialog (Ctrl+Alt+S) and go to Editor | File and Code Templates.

  2. First create a template for a JavaScript component file.

    1. In the Files tab, click the Create Template button on the toolbar. A new, Unnamed, template is added to the list.

    2. In the right-hand pane, specify the template name, let it be Component folder, and js as the file extension.

    3. In the File name field, type $NAME/$NAME.

    4. Optionally, add a code template, for example, a timestamp.

      /** * Created by ${USER} on ${DATE} */
    Create parent template

  3. Create a child template for the related test file.

    1. Select the parent template Component folder and click the Create Child Template File on the toolbar. A child template is added below the Component folder template.

    2. In the right-hand pane, type $NAME/$NAME in the File name field and specify the test.js extension.

    Create child template: test

  4. Create a child template for the related Style Sheet.

    1. Select the parent template Component folder and click the Create Child Template File on the toolbar. A child template is added below the Component folder template.

    2. In the right-hand pane, type $NAME/$NAME in the File name field and specify the css extension.

    Create child template: style

  5. Click OK to save the templates.

  6. Create the component files.

    From the context menu of the folder where you want to store the component files, select New | Component folder. In the dialog that opens, specify the name that will be used for the folder and for the component files in it (Header in this example).

    Create a component from a multiple files template in a separate folder
Last modified: 19 May 2022
Reusable content in templates Live templates