WebStorm Logo

Speeding up coding with Live Templates in WebStorm

By Tyler Crammond, published Tuesday, January 20th, 2015


There’s a feature commonly called “snippets” or “templates” in most modern IDEs or text editors that allows you to save a small block of frequently used code and type a shortcut to insert it into a file.

I use the Jetbrains WebStorm IDE for coding in Javascript and recently started using an increasing number of Live Templates (i.e. snippets).

Here’s a quick guide on how to get them up and running (the same should apply for most other software by JetBrains).

1. Write the code you want to use as a template

I’ll be doing a loop template for this example:

for(var i = 0; i < 10; i++) { 
  // do something 
}

2. Open the Live Templates config window

Pro tip: highlight the code and tap shift twice to open the Search Everywhere menu. Then search for ‘Save As Live Template’.

Alternatively this can be found in File > Settings > Editor > Live Templates. You’ll need to hit add at the top right of the window and paste in your template code.

3. Enter an abbreviation and description

The abbreviation is the shortcut you’ll be able to type in your code before pressing TAB to insert the template. Choose something short and easy to type – you’ll figure out your own naming scheme once you’ve created a few templates.

For the sake of this example I’m just using “for” as my abbreviation.

4. (Optional) Create template variables

This is the awesome part. You can add variables into your template which, after inserting the template into your code, you can easily tab through and replace.

For my loop template I’m going to add variables for the variable declaration, loop condition and increment. The syntax for a live template variable is $variable$.

Couple of things to note:

  • If you use the same variable more than once, the same value will be used throughout the template. Pretty neat! I have taken advantage of this for the $var variable in my example.
  • The special variable $end$ denotes where the cursor will be placed after the template variables have been entered.

4a. (Optional) Select applicable use cases

By default the template will be available in files matching the file type you have open. If you hit ‘change’ next to ‘Applicable in: …‘ at the bottom of the Live Templates window, you will be able to change this. You are also able to limit it to particular types of declaration.

5. Hit save and try it out!

If you’ve followed this example, type for in a JavaScript file and then hit TAB. You should see the skeleton of a for loop – now you can enter a value for and tab between each template variable we set up.

Summary

Live Templates in WebStorm can be a huge asset to your coding efficiency. I have a few custom templates set up for working with AngularJS as well as general JavaScript.

Some quick ideas for templates:

  • Frequently used framework components
  • Custom components
  • Any frequently used code, all the way down to variable initialization or function declaration.

You can dive into the more advanced functionality of Live Templates on the official docs.


This post was originally featured on the author’s personal blog at tylercrammond.com.