WebStorm 2016.3 Help

Sharing Live Templates

On this page:

Configuration files with definitions of custom live templates

WebStorm stores definitions of custom live template groups and templates added to predefined template groups in automatically generated configuration files <group_name>.xml.

  • For a custom group, the file contains definitions of all the templates the group includes.
  • For a customized predefined group, the file contains definitions of the added templates only.
Depending on the operating system you are using, the <group_name>.xml files are stored at the following locations:

  • Windows: <your_user_home_directory>\.WebStorm<version_number>\config\templates
  • Linux: ~WebStorm<version>/config/templates
  • OS X: ~/Library/Preferences/WebStorm<version>/templates

Sharing live templates manually through configuration files

  1. Open the Settings / Preferences Dialog by pressing Ctrl+Alt+S or by choosing File | Settings for Windows and Linux or WebStorm | Preferences for OS X, and click Live Templates under Editor.
  2. Create the required custom template groups and update the relevant predefined groups as necessary and click OK. Based on these changes, WebStorm generates the <group_name>.xml files, see Location of Custom Live Templates Definitions above.
  3. Locate the generated <group_name>.xml files and do one of the following:
    • To share the templates among your teammates, send the relevant files to them with the instruction to save the files in the templates folder.
    • To use the templates in another WebStorm installation on your computer, copy the relevant files to the templates folder under the relevant WebStorm<version> folder.

Sharing live templates through export/import

WebStorm allows you to easily share live templates among your team members, numerous WebStorm installations, and even different IDE by using the standard Export/Import functionality. You can share custom template groups and updates to predefined groups.

  1. Open the Settings / Preferences Dialog by pressing Ctrl+Alt+S or by choosing File | Settings for Windows and Linux or WebStorm | Preferences for OS X, and click Live Templates under Editor.
  2. Create the required custom template groups and update the relevant predefined groups as necessary and click OK. Based on these changes, WebStorm generates the <group_name>.xml files, see Location of Custom Live Templates Definitions above.
  3. On the main menu, choose File | export Settings.
  4. In the Export Settings dialog box that opens, select the Live Template check box and specify the name of the .jar file where the exported settings will be stored. When you click OK, WebStorm generates a file with the specified named based on the .xml configuration files stored in the templates folder.
  5. Do one of the following:
    • To share the templates among your teammates, pass the generated .jar file to them with the following instructions:
      1. Save the received .jar file on your computer.
      2. Choose File | Import Settings on the main menu and and specify the location of the received .jar file.
      3. In the Select Components to Import dialog box that opens, select the Live Templates check box and click OK.
      WebStorm restarts whereupon the imported templates are displayed on the Live Templates page.
    • To use the templates in another WebStorm installation or in another IDE on your computer, open the required installation, choose File | Import Settings on the main menu, and specify the location of the generated .jar file.

Example of sharing templates among different IDE

Be careful when sharing templates among different IDE. If you import custom templates (updates) from a group which is predefined in the source IDE but is not predefined in the target IDE, such group will be created but will contain only the custom templates. The example below shows what happens if we add a template to a predefined group in WebStorm and then reuse it in PhpStorm.

In WebStorm, the Dart template group is predefined. If we add the t (tag pair) template to it, this update will be saved in the Dart.xml file:

ws_sharing_templates_source_ide.png

In PhpStorm, there is no predefined template group Dart. So when we export the live templates from WebStorm and them import them into PhpStorm, a Dart group is created but it contains only one template t (tag pair), which we added to the group in WebStorm before export:

ws_sharing_templates_target_ide.png

Sharing live templates among template groups

You can copy and move templates from one group to another.

  1. Open the Settings / Preferences Dialog by pressing Ctrl+Alt+S or by choosing File | Settings for Windows and Linux or WebStorm | Preferences for OS X, and click Live Templates under Editor.
  2. Do one of the following:
    • To copy a template to another group:
      1. Select the template in interest. Use Ctrl and Shift keys for multiple selection.
      2. Choose Copy on the context menu of the selection.
      3. Select the group to copy the template to and choose Padte on the context menu of the selection.
    • To move a template to another group, select the required template, choose Move on the context menu of the selection and choose the group to move the template to.

See Also

```

Reference:

Last modified: 22 March 2017