Live templates is another great feature of WebStorm which can really make your development very interesting. I personally find these to be very useful. You can utilize this feature to inject your favorite or very frequently used code snippets and make your life little easier. 🙂 You can utilize the live templates to inject any kind of code, be it html, java-script etc.

Let me give you some examples:

Live template can be created using the Live Templates page on the File -> Settings dialog Or by pressing Alt + F7 keyboard combination.

When the Settings dialog opens, search for live template by tying in the search field:

And you will see the live templates box as below. You will notice that there are tons of templates that are already predefined by WebStorm for you.

The highlighted template example shows that by typing ‘ngdl’, the code snipped defined in the template text will be injected into your code at the same position where you type ‘ngdl’ followed by a tab key.

Creating a new template

Now let’s understand this further by creating a simple template. Clicking on the ‘+’ icon on the top right of the dialog and choose Template Group. It is better to put your custom templates under your custom group. Give your group a name and press OK.

Next click on ‘+’ icon again and this time select first option to create a live template. Type your desired abbreviation (shortcut to your template) and provide a meaningful description to your template. In the template text box enter the code template/snippet that you would like to inject. In this example I have specified a template to generate an angular controller.

Please make sure to choose a valid context for your template as below. Since the given template is a JavaScript code so I’d choose JavaScript option here.

Now let’s try to use it. Go to your project and create a new JavsScript file and open it. Now start typing the ‘myctrl’ abbreviation you have given in previous step. You will note that WebStorm gives you a hint that it found your template.

Now press tab and you will see your code snipped injected into productsCtrl.js file.

(function() {
     'use strict';
     angular.module('my-app')
     .controller('myCtrl', function() {
         var vm = this;
         Object.defineProperties(vm, {
             ctrlProperty: {
                 value: 1, writable: true
             }
         });
     });
 })();

@w3s0m3! 🙂

But! I still want to enhance this template further to make it more dynamic, I mean currently it is going to inject the controller code with name myCtrl every time, which isn’t of much help. So let’s try to make use of variables which is another feature live template provides. So go back to live templates settings dialog and modify your template as below:

Notice that there are bunch of words surrounded with ‘$’ signs. Live templates use this syntax to indicate a variable in the template which you can re-use or use to format and populate other variables.  Click on ‘Edit variables’ button and ensure you have following settings:

Basically there are four variables:

• moduleName – It takes whatever you type.
• ctrlName – It takes whatever you type.
• friendlyCtrlName – Notice that it has a custom expression. It would call certain predefined functions to format the string that it receives in ctrlName variable. Since you are defining the value of this variable from within the template, check the ‘Skip if defined’ box.
• END – This is a predefined live template variable that indicates where should the cursor be when your template gets fully expanded.

Now go back to your js file, delete entire content and type ‘myctrl’ again and press tab key.

Notice the positioning of your keyboard caret is where your first variable ($moduleName$) was defined.

Type my-app and press tab. The focus will be now on the controller name. Start typing your controller name, notice that while you are typing the name of the controller the comment gets created automatically. Also because of the capitalize and spaceSeparated functions we used, ‘myProduct’ got converted into ‘My Product’ for us.

Press tab and now the cursor is set where you had defined $END$ in the template. I had set it at this position if you would like to define more properties to the controller so you are at correct position to do so:

Another Template

Similarly I have defined a useful template to generate the code for defining the object properties. Here is the template:

And here is the output when I type ‘prval’ followed by tab key. Property name and the assigned value, both are used to generate a user friendly comment.

Similarly you can define various such templates in your code to generate your html, JavasScript code components and it enhances your code quality and consistency.

I hope you find this article useful!