Small Nice Things in WebStorm

JetBrains were kind enough to give the wavesurfer.js team a license for WebStorm, so I started exploring all the nice JavaScript-specific features in WebStorm. Since WebStorm is so polised, it is something to learn from when comparing with JavaScript packages for Emacs.

Comparing Emacs

Having said that, even though Emacs packages are written by single individuals, mostly, in their free time, they are still quite comparable with the commercial product developed by a company (and sometimes Emacs modes are better).

Here’s the full list of JavaScript-related packages I use in Emacs:

I don’t use any Emacs-based JavaScript debuggers (preferring Chrome devtools and node-inspector), but there are plenty of them: Kite, swank-js etc.

Attention to Details

So, back to WebStorm.

  • First, I like how it highlights variables in current scope. You can totally do this with Emacs (e.g. with tern-highlight-refs), but WebStorm also highlights the assignment a little differently than usages of the variable:

highlight variables

Of course, Emacs’ highlighting of variables can be tweaked the same way, easilly.

  • On the same screenshot you can see another nice feature–WebStorm underlines function arguments and their usages. This let’s you immediatelly understand function’s signature.

  • Intentation level cues

indentation

This is not so important for JavaScript, but for CoffeeScript it is really helpful. In Emacs you cannot display them as nicely and subtly.

  • WebStorm has this UI concept of overlays, showing you a distant, but relevant part of the document without scrolling to it. This is especially handy to quickly view the beginning of a large block, that is somewhere beyond the viewport.

displaying the beginning of a block

  • Another use for these overlays is to preview search terms and linting warnings.

scrollbar overlay

Fork me on GitHub