#JavaScript #WebStorm

This article will show you how to create code snippets, also known as live templates, in WebStorm. We will create a JavaScript Revealing Module Pattern live template.

Creating a new live template

In Webstorm, access the live templates editor:

  • Windows & Linux: File | Settings | Editor | Live Templates
  • OS X: WebStorm | Preferences | Editor | Live Templates

Press the + to add a new template.

Then use the following:

  • Abbreviation: revmod
  • Description: Revealing Module Pattern
  • Applicable context: Click the define button and choose JavaScript. This means the template will be usable

Editing the live template code

Let’s start with a basic template code for our revealing module pattern:

var myModule = (function() {

  function myMethod() {
    
  }
  
  return {
    myMethod : myMethod
  };
  
})();

Save it then go to any .js file and type revmod. Intellisense will show the live template, select it and press TAB or ENTER.

The code for our template will appear in your file. Let’s make it more interactive.

Improving the template

Template variables

Webstorm give you the option of declaring template variables. Use these variables to customize certain part of your template. In our example, we want to make the name of the module and the name of the function editable when using the template.

Declare template variables by starting and ending your variable name with a dollar sign: $<variable name>$.

Here is our improved template:

var $MODULE$ = (function() {

  function $METHOD$() {
    
  }
  
  return {
    $METHOD$ : $METHOD$
  };
  
})();

If you try your live template again, you will get a wizard like prompt to enter the name of the module and method.

Cursor position

After template insertion, the cursor position will be at the end of the code snippet. We would like it to be in our method, so we can start editing it.

You can do this by adding a special $END$ variable in our template:

var $MODULE$ = (function() {

  function $METHOD$() {
    
    $END$
  }
  
  return {
    $METHOD$ : $METHOD$
  };
  
})();

Try it again and notice the cursor position at the end.

#JavaScript #WebStorm