My Webstorm Setup

I love the power of Webstorm. I use it to develop all my web projects. It has a lot of features that I like that I can't find in any other IDE that I think allow me to be better at my job.

But I also don't like the default UI settings at all. I think it's a bit too cluttered and confusing.

So I always tweak the settings to make it cleaner and easier to use.

Here is a quick summary of my setup:

• Hide tool windows bars
• Hidden Navigation Bar
• Install Material UI
• Customize identifier highlight color
• Fold all by default
• Add font size keymap shortcuts

How my Webstorm setup looks like

Hide Tool Windows Bars

Tool windows bars just make the UI look a little bit cluttered. I hide them by default. If we need them we can always do a CMD + E to show them.

Hide Navigation Bar

The navigation bar has some useful features, but it is not always needed. And it is easier to access them by keyboard shortcut or Find Action (CMD + Shift + A).

Install Material UI

Material UI provides a very nice set of themes for Intellij based IDEs. My favorite ones are:

• Night Owl
• Deep Ocean (with editor color scheme set to Material Darker)

Remove cruft from status bar

I like to have the bottom status bar as clean as possible. I usually only keep the branch name and the notifications.

Customize identifier highlight color

I like to have an easier way to see highlighted identifiers. I use a custom border color for that.

Fold all by default

One trick I find useful is to fold all files by default. This is especially useful when you are working on a large project.

Add font size keymap shortcuts

I like to easily change the font size of the editor. By default, Intellij doesn't have a keymap assigned to that, let's fix that.