Blog Blog
Home
Home/WebStorm/Using and Creating Code Snippets

Using and Creating Code Snippets

Posted on by Ekaterina Prigara

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 – just a line of code like a method definition, or a skeleton for a whole file.

There are two ways to use a snippet: either type its designated abbreviation and hit Tab, or select it from the code completion suggestions.

What makes Live templates particularly useful is that you can customize them with variables. To move from one variable inside the template to the next one, press Enter or Tab.

Here’s an example. We’ve created and used a Live Template for a new React stateless component, in which a component name is a variable that we can specify when using the template. (We’ll talk about creating custom templates in a second.)

Simple Live Template in action

A template can have multiple variables and they can depend on each other. Here the variable for the selector name is a dashed-case version of the class name.

Live Template a-component with two variables

WebStorm has several collections of Live Templates that are available out of the box, including code snippets for development with Vue, Angular, and AngularJS. You can find then under Preferences/Settings | Editor | Live Templates.

By the way, Live Templates can be used not only in JavaScript or TypeScript, but in any language that WebStorm supports.

Creating a custom Live Template

Let’s now see how we can create our very own Live Template. For this example, we’ll create a template for an Angular component, similar to the default a-component. This is a simple one!

  1. Select the code you want to use in the template in the editor, press Cmd/Ctrl-Shift-A, and search for the action Save as Live Template…
    Save code as a 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.
  4. Optionally, add variables to the code of the template.
    Variable names should start and end with $. In our example, we need only one variable for the component name. Of course you can have multiple variables, as long as each one has a unique name.
  5. Add $END$ to where the cursor should be at the end.
    Add variables to a Live Template
  6. Click the Change link below to select the parts of code the template will be available in. For our ngcomp, we want it to be available in any part of a TypeScript file.
    Specify where the Live Template should be availbale
  7. Click OK to save the template. That’s it!

Let’s do one more, this time a little more complex.

We’ll have 2 variables: the name of the component class and the name of the component selector.

Adding a second variable to a Live Template

Logically we want to first specify the component name and only then the selector, even though the selector comes first in the code. To do this, we click Edit variables and using the arrow icons to adjust the order of variables.

Change the order of the variables in the Live Template

Now, according to the Angular Style Guide, selector names are usually a dashed-case version of the component name. This means we can just specify the class name in our template and get the selector name automatically through its transformation.

To do this, we click the Expression field next to the selector variable and select the function we need – lowercaseAndDash, and then add the variable name as parameter.

Add variable transformation

Let’s see our new template in action:

Custom Live Template in action

We can also select “Skip if defined” next to our selector variable. In that case, after we’ve edited the component name and pressed Enter, the cursor will go to the end position and not to the selector.

With the many functions available in WebStorm, you can do any variable transformations you need to create really powerful Live Templates. Try them out and see if they save you some time coding!

The WebStorm team

Comments below can no longer be edited.

23 Responses to Using and Creating Code Snippets

  1. 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.

  2. Marcel says:

    May 7, 2018

    Doesnt work. That field as descripted above dosn appear in that way when typing “CMD-Shift-A”. Its then a field looks similar like that but with fewer options. Typing there something will disappear in the nirvana. It 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!

  3. Steve Rogers says:

    June 5, 2018

    Nicely done. I learned a few things about Webstorm I didn’t really give much attention to before.

  4. 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.

  5. 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:

  6. 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.

  7. 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$}).

  8. 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

  9. 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.

  10. 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.

  11. 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

Latest Tweets

Related posts