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.

About these ads

6 Comments on “Live Templates for angular.js in WebStorm”

  1. mystrdat says:

    Would you care enought to point me where I could easily and quickly dig the other “parts” of John’s mastery? Eg. some handy Webstorm tutorials about generic shortcut usage, code nav.. Something that I don’t have to dig up from the Webstorm help. You might want to link to such in the article as well.

  2. pkozlowskios says:

    @mystrdat, I would suggest starting with 2 things:

    (1) Install the “Key promoter” plugin (http://plugins.intellij.net/plugin/index?pr=idea&pluginId=4455) – it it _the_ way to learn keyboard shourtcuts.

    (2) Have a look at the build-in “Productivity guide”: http://tv.jetbrains.net/videocontent/productivity-guide

    Hope this helps!

  3. replicant says:

    maybe i’m completely missing something, but is there a way to import the xml files into webstorm’s live templates settings without having to create them all individually? thanks so much for saving us all time with creating these (hoping there is a way to import these 2 xml files)

    • pkozlowskios says:

      @replicant: AFAIK WebStorm doesn’t have any particular installation (or import) procedure for LiveTemplates. Instead just drop *.xml files from the repository into WebStorm’s folder where it stores LiveTemplates. Usually this is: [your home directory]/.WebIde40/config/templates.

  4. Sunny Shah says:

    Excellent Work!


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.