JavaScript Postfix Completion

Hadi Hariri

This post is part of a series of posts covering features in WebStorm 9 EAP:

It was bound to happen. Over a year ago we introduced the concept of Postfix code completion in ReSharper. A year later, it was introduced to IntelliJ IDEA 13, and today, we’re bringing Postfix code completion to JavaScript with WebStorm 9 EAP.

If you’re not familiar with it, here’s a glimpse into how it works:

Not Null

We are introducing a not null check after having typed the name of the argument. We do this by typing .notnull after the identifier.

Here is another example showing how we can do a for loop using .itin:

It In

The purpose behind Postfix completion is that often we realize that a certain construct has to be created when writing code, and this provides a more efficient way, as opposed to messing around with the cursors keys or mouse to position the caret in a specific place. If you think about it, it’s pretty similar to Live Templates, except that you’re invoking them after having written some code.

In addition to the above two completions, WebStorm provides the following postfix completions:

Postfix list

each of which can be activated or deactivated via Preferences | Editor | Postfix completion.

We can also invoke a list of completions available using the Cmd+J key (Ctrl+J on Windows), which invokes the Live Template insertion menu.

Try it out in the recently opened WebStorm 9 EAP and let us know what you think. If you have any suggestions on some completions you’d like, also let us know. You can either leave them as comments here or file in an issue in YouTrack.

Develop with pleasure!
JetBrains WebStorm Team

Comments below can no longer be edited.

26 Responses to JavaScript Postfix Completion

  1. WebStorm 9 EAP is Open! | JetBrains WebStorm Blog says:

    August 20, 2014

    […] JavaScript Postfix Completion […]

  2. Mikhail Krasilnikov says:

    August 21, 2014

    Any plans to fix OLD usability problems? Like 2 years old http://youtrack.jetbrains.com/issue/IDEA-85255, or http://youtrack.jetbrains.com/issue/IDEA-106966.

    • Ekaterina Prigara says:

      August 21, 2014

      At the moment I’m not aware of any plans to fix these issues for the upcoming release, however, right now out Platform team is working on some UX improvements in the project configuration including inspection profiles, so hopefully we’ll be able to see some positive changes in the nearest future.

    • Strajk says:

      August 23, 2014

      Agree…

      As dev, I understand that making new features is more fun than bugfixing, but there is a really lot of bugs which should deserve more attention :/

      • Ekaterina Prigara says:

        August 25, 2014

        Feel free to vote for the most critical issues in your opinion on our issue tracker: http://youtrack.jetbrains.com/issues/WEB
        Votes help our dev team to prioritise the issues.

        • Charles Scalfani says:

          October 14, 2014

          If only voting for things mattered.

          • Ekaterina Prigara says:

            October 15, 2014

            It does matter.

        • Terence Martin says:

          October 25, 2014

          There is a disconnect between having the issues prioritized and having them actually addressed. See for example https://youtrack.jetbrains.com/issue/IDEABKL-6427 created February 2005, still outstanding (not closed), lots of votes (121, I think) but?

          It also doesn’t seem fair that if I encounter a bug, the only hope I have of getting it fixed is to report it and hope that enough other people also happen to notice the same bug, realize I reported it, and then vote, so that it filters to the top of the priority list for possible fixing. Or, failing that, run some sort of social media campaign to raise awareness. I just want to write code.

          To be honest? As a result of this, I don’t bother reporting anything I see any longer. There are too many reports already and it seems as if zero attention is paid unless enough people vote and bring it to someone’s attention.

          I’m working under the theory that if someone else hasn’t already noticed it, there’s no way in hell anything *I* do is going to have any effect on anything, so why bother?

          I just do my best to work around the bugs as best I can and cross my fingers that some day they might be fixed.

          • Ekaterina Prigara says:

            October 25, 2014

            Dear Terence,
            there is a difference between features and bugs. When the teams (IntelliJ IDEA platform core team, WebStorm team and others) decide on the new features to work on lots of factors are considered and number of votes is one of them. For the bug reports, of course, number of votes and feedback is the strongest signal, however, to tell the truth, some issues take more time to fix than we would like to, but still votes help us better prioritize.

  3. Martin Hochel says:

    August 22, 2014

    actually the shipped notnull postfix macro is wrong from javascript perspective 🙂
    It should translate to if ( id !== null ) { ... }

    I know it’s editable , but you know, just sayin… 😉

    • Jerry Stonesbergs says:

      August 25, 2014

      Actually, that depends. != null matches for both null and undefined, which more often than not is what you want.

      But it depends. Which is why it’s absolute essential that they are editable/configurable!

      The trigger should also be configurable; e.g. I’d prefer the trigger to be “.nn” (“not null”).

      And creating your own postfix completions would be very useful as well. When working with jasmine, it is a great bit of hassle wrapping your expression in expect(___).toBe($END$); I make custom live templates all the time – it’s incredibly useful. So being able to make your own postfix completions is a HUGE deal for me.

      Sincerely,
      Jerry 🙂

      • Andrey Starovoyt says:

        August 25, 2014

        @Martin.Hochel , @Jerry.Stonesbergs Hi,
        > Actually, that depends. != null matches for both null and undefined, which more often than not is what you want.
        It is true, so we implemented just ‘!= null’. Of course the other form ‘ id !== null’ is popular and matches to the best js practices. If you think that both forms can be useful at the same time we can consider possibility of adding a postfix template for the form ‘id !== null’.

        Now there is no way to change postfix templates but we have thoughts to make templates customizable. You can vote for the feature: http://youtrack.jetbrains.com/issue/IDEA-122443

        If you have ideas what kinds js postfix templates can be added to webstorm please share your opinion!

  4. IntelliJ IDEA 14 パブリックプレビュー | JetBrains ブログ says:

    September 26, 2014

    […] 前のバージョンより導入されたPostfix CompletionがJavaScriptでも利用出来るようになりました。より詳しく » […]

  5. Jordan says:

    October 16, 2014

    Looks like you’re missing a VERY common and REALLY important postfix – the IIFE (Immediately Invoked Function Expression, or a.k.a. “self-executing function”):

    (function (arg) {

    })(arg);

    • Andrey Starovoyt says:

      October 17, 2014

      Hi. Thanks for the feedback.
      I am not sure that you want Postfix Template. I think Live Template is more applicable here. Postfix Template always is called to some expressions. On the other hand Live Template just generates code-snippet. You can add custom Live Template (and there is no way to add custom Postfix Template). Is the Live Template http://goo.gl/DYY9v3 what you need?

  6. Oleg Taranenko says:

    October 19, 2014

    Perfect extension, but sad there is not possible to add a new (or maybe remove) postfix completion.
    Ie. I’m using console .log and console.warn and console.error functions.

    Should I file a new wish or it already exists?

    thanks, Oleg

  7. IntelliJ IDEA 14 is Released! | JetBrains IntelliJ IDEA Blog says:

    November 5, 2014

    […] Support for trending JavaScript frameworks such as React, spy-js, Node.js and Grunt, announced earlier in WebStorm 9, is now available in IntelliJ IDEA 14. In addition to these improvements, the IDE offers two brand-new plugins: for Meteor, and for PhoneGap, Cordova and Ionic frameworks. Following Java, JavaScript also gets the postfix code completion feature. […]

  8. Mihai says:

    December 16, 2014

    It would be great if you could add this for actionscript as well. Not much different to javascript, I imagine. Thanks.

    • Ekaterina Prigara says:

      December 17, 2014

      It works in ActionScript, try IntelliJ IDEA 14.

  9. Meteor Support in WebStorm 9 | JetBrains WebStorm Blog says:

    December 19, 2014

    […] JavaScript Postfix Completion […]

  10. Tracing, debugging and profiling Node.js with spy-js | JetBrains WebStorm Blog says:

    January 13, 2015

    […] ← Live Edit Updates in WebStorm 9 — What’s New? JavaScript Postfix Completion → […]

  11. Baoxin says:

    July 21, 2015

    If you can add custom suffix completion, will be a very great function,thx

  12. kyle j rebstock says:

    November 20, 2017

    I would love to see a custom option to build my own. Build it and we will build them. XD

    I use this daily for logging because I hate typing out that info over and over, but I want as much insight as possible.

    const verbose = function(…value) {
    if (arguments.length === 0) {
    return false;
    }
    Object.keys(arguments).forEach(function(argument) {
    console.log(“Verbose: “, ” ———— Type:”, typeof argument, “, Value: “, argument);
    });
    };