What I like about WebStorm

— 4 minute read

WebStorm code editor

More than once in my career I have been talking to colleagues about code editors or IDE’s. Stuff like what’s the best one and why? What features are need-to-haves? What is it that makes the editor feel so good?

So now I decided that I actually wanted to document some of my thoughts and preferences around this very opinionated topic. I’ll try and keep this post updated as time goes by.

A bit of background

I started out as a backend developer working with C#, so I’ve been using Visual Studio quite a bit over the years. Moving into doing fulltime frontend development, I decided to try out WebStorm, and I haven’t looked back since. It keeps on growing on me, and I just like it even more the better I get to know it. Yes, I have tried out VS Code a couple of times - and no, it didn’t last very long each time. There simply were some awesome need-to-have features (in my opinion) that was missing. So yeah, my favourite editor is WebStorm.

Features

I’ve listed all my favourite features of WebStorm, and then split them into two categories: Expected features and Awesome features.

Expected features

These are features that you would expect from a modern IDE (like VS Code), to be available by default or through a plugin/extension.

Awesome features

These are features that I personally think are really awesome, and not necessarily something that every editor has (WebStorm does, of course)

  • Searching - Find in Files ⌘⇧F (Mac) CTRL+F (Windows) - this is by all means my most favourite feature of WebStorm. Compared to VS Code, this is to me 100 times better.

    • I like that you have the search results in a modal window (instead of it being hidden away in a sidebar 🙄).
    • I like that you get a preview pane showing the selected file/search result. You can even select text and copy it, you can even edit the file in the preview pane.
    • In new projects, it's very common that the search results are polluted with too many results from dist-folders and minified files and so on. WebStorm makes it easy to exclude entire folders by right-clicking a folder and choosing "Mark Directory As", "Excluded". Easy peasy!

  • Searching everywhere Double ⇧

  • TODO tree

  • Test runner

  • Auto import

  • Optimize imports

  • Reformat file

  • Resolve git conflicts

  • Keymap aka. shortcuts

Extras

Font

I use JetBrains own free JetBrains Mono font in WebStorm, it’s really nice and it also supports ligatures which I like. Heres how to enable ligatures in WebStorm.

Theme

Currently I use the Night Owl theme.

My preferred custom settings

  • I have enabled “Mark modified (*)”, because I like to see which files have unsaved changes.
  • For Prettier, I use this Run for files pattern: {**/*,*}.{js,ts,jsx,tsx}. I also enable both the “On ‘Reformat Code’ action” checkmark and the “On save” checkmark.
  • I like to add “*.cshtml” to the HTML filetype, under Settings, Editor, File Types, Recognized File Types. This makes WebStorm work better with HTML in a cshtml file, which is a huge improvement. This tip should work for most filetypes that are close to being HTML.
  • I have added an extra keyboard shortcut using Keymap so that I can use ⌘+i (Mac) to "Comment with Line Comment". The default is ⌘+/ (Mac) CTRL+/ (Windows).

My WebStorm extensions

The end

I hope you liked this post, if you did please share it with a friend 🙂

If you know of any tips I missed or have a question, feel free to hit me up at @mikkelrom