Intellij Live Templates for Javascript Development

Update 2017-08-01

Updated "Behavior-Driven Development (BDD) and Test-Driven Development (TDD)" section, adding bddblock template

I'm a IntelliJ IDEA user since late 2013. After a long (and not without problems) liaison with Eclipse IDE, and before that with the glorious Borland JBuilder, I wanted to try something new. Not that Eclipse was bad per se, it was just getting heavier and buggier release after release, and the plugin ecosystem wasn't anymore something you could rely on. I remember also giving NetBeans a last chance: NO WAY. So I thought "What's all this fuss around JetBrain IntelliJ IDEA?"

Since then, even if I truly missed the "workspace" concept of Eclipse, it has been a pleasure to work with IntelliJ IDEA. It has all the tools in the right place, it gives you plenty of assistance, its performance is good enough. Oh, and it has (drum roll...) a Dark theme for UI!

At first I've used it mainly for Java projects, but it quickly turned out to be a great tool to write JavaScript / EcmaScript code and for web development in general.

Live templates

Almost any IDE has some kind of templating mechanism built-in that works more or less like this:

• you choose an abbreviation: a mnemonic code that identifies the template
• start typing it, or use a key combination
• the IDE inserts the template in your code.

IntelliJ's Live Templates are very similar to Eclipse Templates, as they let you parametrize your templates and filter them based on context information:

• language used: Java, JavaScript, HTML, SQL, etc.
• context: class or method declaration (Java), function declaration (JavaScript), comments, expressions, statements, and many more.

This context-sensitive filter at first looks like an over-complication, but it is very useful when you start having lots and lots of templates, as it prevents the display of a very long list of available choices in the template pop-up. Live Templates can also be customized using variables to pre-fill parts of the template and for cursor positioning.

Templates for JavaScript development

Working on huge Node.js and AngularJS projects I immediately noticed that, while JavaScript is a (mostly) fun language to use, it has a somewhat verbose syntax. When code is hard or tedious to write, developers tend to cultivate two kind of bad habits:

• mindless copy-n-paste
• in case of tests: do not write code at all. Or, worse, Copy-n-Paste existing test code without thinking much.

To prevent these problems I've come up with a set of templates that foster development speed without -hopefully- sacrificing quality.

Function definition

Since JavaScript is a functional programming language it's no surprise that you, as a developer, will spend a lot of time declaring functions. There's a default function built-in template for this, that lets you declare a function and places the cursor right in the body of it. Here's a typical sequence:

Since EcmaScript 6 we have another possibility, the so-called "fat" arrow functions. The syntax (and semantics!) of this new type of functions is a bit different, e.g. the function from the above example would be written as:

const myNewFunction = (param1, param2) => {
    return `Hello ${param1} ${param2} !`;
};

We can use this code to create a brand new Live Template for the definition of fat-arrow functions. The process is quite easy:

• create a brand new file and enter the code above (the definition of myNewFunction)
• select the code from (param1, param2) to }; as in figure 6
• enter farrow in the Abbreviation field (or choose another abbreviation of your choice)
• change applicability context, adding Statement in addition to Expression
• enter this Template Text:

($PARAMS$) => {
    $BODY$
}$END$

The $PARAMS$, $BODY$ and $END$ template variables are used to aid cursor positioning.

Now, simply writing farrow in a JavaScript file will kick-in the template:

You can move through the various template parts using the TAB key:

Behavior-Driven Development (BDD) and Test-Driven Development (TDD)

As I stated above, when it comes to testing many developers choose not to do any testing at all. This is simply unacceptable, but I kind of understand their position. Sometimes the boilerplate needed to run a simple test is so unnecessary lengthy! Live Templates can be used to effectively solve this problem by providing an automated way to create that boilerplate code on the fly.

In the JavaScript world there's a very common testing style called BDD - Behavior-Driven Development which structures tests nesting describe() and it() calls. Mocha and Jasmine are popular examples.

Here are some templates I use extensively for this type of code:

describe()

Creates a describe() block

describe('$DESCRIPTION/pre>, function () {
    $END$
});

Note that, instead of fat-arrow syntax, I'm using a traditional function declaration. This is because many test frameworks such as Mocha discourage the use of fat-arrow functions, as these constructs alter the semantic of the this reference inside the function blocks.

it()

Creates a it() block

it('$DESCRIPTION/pre>, function () {
    $END$
});

Generic BDD Block: bddblock

As you can see, the structure of the BDD-Style blocks is always the same. Instead of copy/pasting it for the whole set of BDD functions (it(), describe(), before(), beforeEach() and so on) you could create just a bddblock template

$KIND$('$DESCRIPTION/pre>, function () {
    $END$
});

Promises

Another area where EcmaScript is (still) too verbose is Promises. But fear not, we have templates for them, too!

resolve - Start Promise Chain

I use this template a lot as Promise Chain Generator, i.e. to start a chain of promises for asynchronous calls:

Promise.resolve()
    .then(function() {
        return $END$
    })

XXthen Promise fullfillment

To fullfill promises there are actually two options, for which I use separate templates.

For use with a traditional function I use a "fnthen" template:

.then(function($PARAMS$) {
    return $END$
})

For fat-arrow function blocks instead I've created the "fathen" (fat-arrow then) template:

.then(($PARAMS$) => {
    return $END$
})

XXcatch - Promise rejection

The same happens for Promise rejection.

"fncatch", for functions:

.catch(function(err) {
    return $END$
})

"facatch"(fat-arrow catch), for fat-arrow functions:

.catch(err => {
    return $END$
})

Conclusions

The "Live Templates" concept is quite powerful and can help you (and your team) achieve a much higher productivity during development, letting you concentrate on the business value of your code.