Creating a simple LiveTemplate in WebStorm

Share httpJunkie.com on..
Tweet about this on TwitterShare on FacebookShare on Google+Share on TumblrEmail this to someone

Live Templates are similar┬áto Snippets from other IDE’s but are very flexible and extensible in JetBrain’s WebStorm. And your Live Template can be a single line of code or few lines of code (like a control structure) or a very advanced template that takes up 50 lines on code. It’s really up to you, but you should refrain from putting site specific Templates in here, these should be global/generic templates.

We will be using WebStorm 9 for this brief tutorial. We are not going to create an advanced Live Template, instead we will just be creating a very simple one so that you have an idea on how to do it. Most of the Snippets we create are simple in nature and you can play around with editing the more complex Live Templates if you want to better understand variables, etc..

Go to File > Setting > Editor > Live Template and expand the template group where you want to create a new template. In this case we will be expanding the JavaScript group and clicking on the plus sign in the upper right hand corner of the Settings panel.

Ok, now we have a new Live Template. We could have also created our own group and called it something like “CustomSnippets”, but this is fine for an example. I do want to let you know the benefits of creating our own snippets folder and that is that we can easily export them to another WebStorm IDE, but I like having my snippets right along side the others. Another reason I don’t like creating my own group is because you can’t put groups inside a group. If I had my own CustomSnippets group I would also want to further break that down into “JavaScript”, “CSS”, etc.. but that gets to be a pain. I say put them right along side the other snippets, you can always describe your Snippet so that you know it is custom. If you ever want to migrate your Live Templates to another machine you just copy them all.

Next we want to give our LiveTemplate a name. In the Abbreviation field write “iife” and in the Description field write “Immediately-invoked function expression”.

What is an iife? It’s a simple design pattern which has also been referred to as a “self-executing anonymous function.” that provides encapsulation. It is also commonly called “function wrapping”. This is a way to ensure that anything you write inside the iife will be scoped locally to that function and not conflict with variables and objects in the global scope.

Next let’s add the code we need for our iife. But first I want you to look at the JavaScript LiveTemplate called “us” short for “use strict”, notice the variable they use in order to place the cursor at a certain point ($END$), we will use this same variable. It is one of two variables that you can use in Live Templates that is not editable.

You cannot edit the predefined live template variables $END$ and $SELECTION$. $END$ indicates the position of the cursor after the template is expanded. As you learn about Live Templates, $SELECTION$ would be the next logical variable to understand after $END$. You will need to explore that on your own time.

Lets place our code in the Template Text editor:

(function(){
  $END$
}());

Also to the right of the Template Text editor, there is a options section, let’s select to expand our “iife” with Tab. This means when you are typing and you hit Ctrl+J to bring up your Live Templates, and you select “iife” you will hit Tab to expand it (place it into your page). Once it is expanded your cursor will be left in the $END$ position.

Finally, Let’s also check the Reformat according to style checkbox. In short you would select this check box to have WebStorm automatically reformat the expanded text according to the
current style settings, defined on the Code Style page. But it’s default for all of WebStorm’s Live Templates so I do the same.

That’s it. Let’s test our Live Template snippet by creating a blank JavaScript page. Once your cursor is inside press Ctrl+J, type the first few letters “ii” and hit Tab. If you have any other Live Templates that start with “ii” you will have to type more, but you get the point. See below:

iife1

But you can also access that “iife” with less keystrokes. Clear out your JavaScript page and simply type “ii” instead of hitting Ctrl+J and you will get a prompt like you see below:

iife2

Just hit tab and it will expand your iife!

iife3

That is the easiest way to get to it. Just remember that as you start to add more Live Templates, your naming convention is important and may change the way you get to those Live Templates. You may have to type the whole thing out if you have other Live Templates that start with “iif”. But again, that should be understood. Think about the naming conventions you use and try to stay consistent with how WebStorm does their naming and it will make life easier in WebStorm.

Leave a Reply

You must be logged in to post a comment.