Live Templates for angular.js in WebStorm

John Lindquist is a WebStorm master

Many angularians watched and loved John Lindquist’s video tutorials (if you haven’t seen them I would highly suggest checking them out: http://tv.jetbrains.net/channel/webstorm/angularjs). Those tutorials are excellent introduction to angular.js and directives writing but we can get out of them: WebStorm mastery.

One thing that was striking me while watching John’s video tutorials was how productive he was with the IDE. He would write code at the remarkable speed, using very few keystrokes. Earlier today I’ve decided to watch the mentioned videos once again,  focusing on productivity tips. This blog post is trying to decipher some of the trick played by John.

WebStorm plugin for AngularJS

John Lindquist is the author of the angularjs-plugin for WebStorm. For now the plugins add support for angularJS attributes inside HTML templates but is is well worth checking out as the plugin itself highly increases productivity while editing angular templates.

Black magic with Live Templates

While watching very carefully the video tutorials (sometimes re-playing 10 seconds fragments over and over again) I’ve realized that most of the productivity speed ups are result of the IDE mastery (code navigation, effective shortcuts and code-completion usage) and the extensive use of Live Templates.

Your first Live Template

Live Templates is the future in the JetBrains products that allows us to define … well, code templates. Of course there is more into it than just simple ability to pre-define code fragments so please check the full documentation at http://www.jetbrains.com/idea/webhelp/live-templates.html.

If you are not into reading JetBrains documentation, don’t worry – we are going to create our first Live Template just now. As an example lets use the ‘ngm‘ template: it will produce a module’s skeleton for angular.js.

To start creating a Live Template we need to select File -> Settings… in WebStorm (or use Ctrl+Alt+s) and then select the Live Templates. By default WebStorm is pre-installed with some templates grouped into different sections (HTML, JavaScript, …). I think that angular.js deserves its own section, so let’s create one. As soon as it is done we can start creating our Live Template with the following properties:

  • Abbreviation: ngm
  • Description: A new angular module without a config function

Then comes the most important part: a template itself. Let’s type in this:

var $moduleName$ = angular.module('$moduleName$',[]);
$END$

We can see that WebStorm is using dollar signs to introduce variables (like $moduleName$ in the above example). You can define as many variables as you like, but there are also built-in variables available (the $END$ variable indicates where the cursor will end up after we are done with filling-in other variables).

To have our first Live Template ready to use we need to remember to define a context for this template: in our case it is JavaScript. The screenshot below shows the effect of our efforts:

The new shiny ngm is ready to use, it is enough to go back to a JavaScript editor, type ngm, press TAB and here you go:

Live Templates for AngularJS

All templates described here are hosted on GitHub

Based on John’s video and my own experience I’ve combined a list of useful Live Templates and put them in the GitHub repository. Below is the full list of available templates (names and abbreviations might have changed!) .

The basics

ngc – a controller function

var $controllerName$ = function($scope) {
$END$
}

ngf – a function in a scope (to be used in a controller)

$scope.$functionName$ = function() {
    $END$
}

ngm – a module

var $moduleName$ = angular.module('$moduleName$',[]);
$END$

Directives

ngdl – a directive with the link function

.directive('$directiveName$', function($directiveDeps$) {

    return function(scope, element, attrs) {
        $END$
    }
});

ngdc – a directive with  the compile function

.directive('$directiveName$', function factory($injectables$) {
  var directiveDefinitionObject = {
    $directiveAttrs$
    compile: function compile(tElement, tAttrs, transclude) {
      $END$
      return function (scope, element, attrs) {
      }
    }
  };
  return directiveDefinitionObject;
})

lf – a link function

function (scope, element, attrs$ctrl$) {
$END$
}

cf – a compile function

function compile(tElement, tAttrs, transclude) {
      $END$
      return function (scope, element, attrs) {
      }
}

sem – scope, element, attrs arguments in the linking function

scope, element, attrs$END$

There is more

I’m sure that there are more useful Live Templates to be defined so please, share your ideas! On my side I will keep updating the GitHub repository with any new useful templates.

Advertisements