The WebStorm Blog

The Smartest JavaScript IDE

Tips & Tricks

Using and Creating Code Snippets

Ekaterina Prigara

Note: This post was updated in June, 2021.

Code snippets, or live templates as they are called in WebStorm, can help you save and reuse code. This can be any code fragment that you find yourself using often – it could be something little and simple, for instance, a line of code like a method definition, or something big and complex like a skeleton for a whole file.

From this blog post, you’ll learn how to use predefined live templates as well as how to create new ones and share them with your team.

Work with live templates

WebStorm comes with a number of ready-to-use live templates for JavaScript, TypeScript, style sheets, and other supported languages and frameworks, including Vue, Angular, and React. Here’s how you can create a new React stateless component from an rsc predefined template.

Create a React stateless component from a predefined rsc template.

A template can have multiple variables and they can depend on each other. In this example, the variable for the selector name is a dashed-case version of the class name, according to the Angular Style Guide.

Expand a predefined template with several related variables.

To see the list of predefined templates, go to Preferences / Settings | Editor | Live Templates.

For each template, WebStorm provides an abbreviation. To insert the template, just type its abbreviation and press ⇥ / Tab.

Expand a simple template

Have you forgotten what the abbreviation is? Press ⌘J / Ctrl+J, and WebStorm will show you all the templates that are applicable in the current context. Just select the one you want to use.

View available templates with CmdJ/Ctrl+J

With ⇥ / Tab you can also jump between the variables within an expanded template. For example, when you expand a fori template into an iteration loop stub.

Move between variables on template expansion

Create your own live templates

What if a template you need is not on the predefined list? You can create your own.

In Preferences / Settings | Editor | Live Templates, select the group where you want to add your template, click +, and select Live Template.

Add a custom template
Alternatively, you can create a new group and add your templates there: click +, select Template Group, and create a new group.

Add a template group

You can also duplicate an existing template by clicking the Duplicate toolbar icon, modify it as needed, and save it with a different name. The following example shows how you can modify a predefined template that encloses a selected code fragment in a tag so the selection turns into a paragraph.

Copy a template and update it

If you already have a suitable code fragment, you can convert it into a live template right in the editor. Let’s create a template for an Angular component, similar to the default a-component.

Unlike the example above, where we just replaced the tag, in this template, we will need two variables.

The first one, $ComponentName$, will become a placeholder for the name of the new component.

The second one is $END$, which indicates where the cursor should be at the end after the template is expanded and you fill in the $ComponentName$ placeholder.

1. Select the code you want to use in the template in the editor, press ⇧⌘A / Ctrl+Shift+A, and search for the action Save as Live Template…
2. Enter the abbreviation that you’ll be using to invoke the template. We’ll go with ngcomp.
3. Add a template description, for example, New Angular component.

Save code fragment as live template: description and abbreviation added

1. Now it’s time to add the variables to our template. Replace SearchComponent with $ComponentName$ and add $END$ to ngOnInit(){}.

Save code fragment as live template: variables added

Let’s tell WebStorm that we want our ngcomp to be available in any part of a TypeScript file. Click the Change link below and select the TypeScript checkbox.
Click OK to save the template. That’s it!

Share your live templates

Once you’ve created some custom templates, you may want to share them with your teammates. To do this, select File | Manage IDE Settings | Export Settings from the main menu. In the dialog that opens, click Select None to clear everything, select Live templates, and specify the folder where you want to save the settings.zip.

Share templates

To import the templates, go to File | Manage IDE Settings | Import Settings and select the saved settings.zip file. Then restart WebStorm to apply the imported settings.

Alternatively, you can use the IDE Settings Sync plugin or the settings repository to share the IDE settings, including live templates. You can learn more about this in the Share IDE settings help article.

The WebStorm team

Debugging Client-Side JavaScript with WebStorm 2017.3 WebStorm 2017.3.3 is now available

Comments below can no longer be edited.

23 Responses to Using and Creating Code Snippets

kjr says:
January 16, 2018
The one live template function I want is to get rid of all extensions from a filename – e.g. “SomeComponent.spec.js” to “SomeComponent”

This would be really handy for test templates!
- Ekaterina Prigara says:
  January 17, 2018
  Thanks for the idea. I’ve reported a feature request for a more general new macro that will help not only with test names like component.spec.js, but also component-test.js: https://youtrack.jetbrains.com/issue/WEB-30691
  - kjr says:
    January 24, 2018
    Awesome, I look forward to using this in 2018.1!
    - Ekaterina Prigara says:
      January 24, 2018
      WebStorm 2018.1 Early Access build with this new macro will be available this week.
Marcel says:
May 7, 2018
Doesn`t work. That field as descripted above dosn`t appear in that way when typing “CMD-Shift-A”. It`s then a field looks similar like that but with fewer options. Typing there something will disappear in the nirvana. It`s only possible to add own code snippets via “settings/Live templates”. Waste of time: one hour.
- Ekaterina Prigara says:
  May 7, 2018
  Hello Marcel,
  Can you please provide more details? What file type was that? What was the code that you’ve selected (note that it is required to select the code in the editor to see this action)? Thank you!
Steve Rogers says:
June 5, 2018
Nicely done. I learned a few things about Webstorm I didn’t really give much attention to before.
Nippun Kumar says:
July 11, 2018
How to edit or delete snippet created?
- Ekaterina Prigara says:
  July 16, 2018
  To remove a snippet, select it in the list of snippets (Preferences | Editor | Live Template) and press the `-` icon next to the list. To edit a template, select it in the list and follow the same steps as for creating a template described in this blog post.
Daaran says:
August 6, 2018
Hi,
Is it possible to define a list of options for a variable?
for example:

fieldType: “$fieldType$”
…
fieldTypes = [“text”, “number”, “password” ]
- Ekaterina Prigara says:
  August 6, 2018
  Hi,
  Please press the Edit variables button and use the enum macro like this:
Qaiser Saeed says:
February 19, 2019
good its work but i want cursor on specific location in snippet
- julia.mochenkova says:
  February 19, 2019
  Hi,
  Have you tried step 5 of the “Creating a custom Live Template” part?
  You can add $END$ to where the cursor should be when a snippet will be invoked and created.
Govind says:
April 25, 2019
How can I have multiple cursors using $END$? I want to be able to type the same text in multiple locations inside my snippet. It only works for the first $END$.
- Ekaterina Prigara says:
  April 26, 2019
  If you want to have the same value in multiple locations in your snippet, you need to use a variable (e.g. function $NAME$() {return $NAME$;$END$}).
Harsh Panchal says:
June 20, 2019
If I want to create a template with multiple files in one folder, then how can I create that?

For Ex.
projectName
— src (Folder)
— First.js
— Second.js
- Ekaterina Prigara says:
  June 20, 2019
  Hello,
  Unfortunately, you can’t create folder templates. Please vote for this feature request: https://youtrack.jetbrains.com/issue/IDEA-91565
Giorgio Franceschetti says:
August 15, 2019
It guess that a “lowercaseAndUnderscore” function would be helpful.
- Ekaterina Prigara says:
  August 19, 2019
  Hi,
  I think what you are looking for is the `snakeCase` function.
Dirk Olten says:
September 16, 2019
Sorry, this is all too complicated. Why must I know abbreviations to access my snippets?
Isn’t there a menue, where one can find and create snippets – kind of “palette” in NetBeans?

I suggest, to easify this.
A code-snippet functionality must be much more efficient in creation and access.

Your documentation above is not understandable. i.e: “press Cmd-Shift-A” -> there’s no CMD-Key on Windows. CTRL-Shift-A doesn’t show up the menue as described above 🙁

I cannot spend a day or more on understanding this, translating MAC-commands to windows and building up a snippet-library with ie: code fragments for Twitter-Bootstrap and not having a menue to access the possibly hundreds of bootstrap-snippets.
- Ekaterina Ryabukha says:
  September 16, 2019
  Hi, we’re sorry that we failed to make the instructions in this article clear enough. To save and access code snippets, you may go to Tools | Save as Live Template from the main menu instead of using shortcuts. If you simply want to take a look at the list of existing snippets, you can also do it from Settings | Editor | Live Templates.
  
  Cmd-Shift-A is indeed for macOS users. For Windows, it should be possible to invoke the same popup with Ctrl-Shift-A. As Ctrl-Shift-A didn’t work for you, we’d recommend checking whether this shortcut has not been removed/used for another action by any chance: for this, you may go to Settings | Keymap and look for Find Action in the search bar. Also, you may be using another keymap, not the default one for Windows.
  
  If you don’t like how this topic is covered in this blog post, you may want to take a look at our web help to learn more about Live Templates: https://www.jetbrains.com/help/webstorm/using-live-templates.html?keymap=primary_default_for_windows.
  
  Should you have any other questions, please let us know.
Toni says:
June 24, 2020
I really love PHPStorm, but working with live templates is much mor complicated than with a list like the “code snippets” in Zend Studio. I have hundrets of snippets there and i dont must remember hundrets shortcuts to have access to my code snippets.

Please make there a list (tool window) like in Zend Studio!

Anyway great work! PHPStorm is the best!

Best Regards Toni
- Ekaterina Ryabukha says:
  June 25, 2020
  Hello Toni,
  Thanks for sharing your thoughts with us. You can use a shortcut to see all available live templates in the current context (Cmd+J on macOS/Ctrl+J on Windows/Linux): https://www.jetbrains.com/help/phpstorm/generate-custom-code-constructs-using-live-templates.html. If you want to see what a live template from that list does, press F1/Ctrl+Q while going through the list with suggestions (just press F1/Ctrl+Q and use arrows to move up and down and see previews).
  
  If it doesn’t work for you, feel free to file a new feature request on our issue tracker: https://youtrack.jetbrains.com/issues/IDEA.