I’ve been using IntelliJ’s suite of developer tools for nearly 10 years and love how approachable they make complex development tasks. WebStorm’s features tend to fill gaps in my workflow and help boost my productivity. From source control to debugging, WebStorm is a complex piece of software with an immense amount of features - so I wanted to help shed some of the complexity for you and share some of the features I use most often. This definitely isn’t meant to be an exhaustive list, but does include the essentials I use that I hope can help you with your own development.

Searching and finding files

A task we all do constantly, WebStorm makes finding what you’re looking for simple. A quick double tap of will search everywhere in your project for a file, class, action, and even through the WebStorm settings. If you already know the name of the file you’re looking for, Ctrl+Shift+N (⇧⌘O) will open a search window specifically by filename.

Search

Another useful way to search, is within a specific directory. This is great if you’re using a monorepo or if you’re working within a route and/or component and just want to search in that specific section of the app. To do this, select a directory in your project view sidebar and then use Ctrl+⇧+F (⇧⌘F) to open a window filtered to search within the selected directory.

Find and replace are two other essential tools developers use daily, and WebStorm includes support for some advanced features such as case sensitivity and regex. Using a regex can make your life much easier when trying to capture and preserve certain unique phrases in a find and replace (such as changing a function name but keeping unique params for each). When using regex, capture groups can then be referenced in your replace string with $1, $2, etc. to map the captured text to your new string.

Source code navigation

WebStorm makes reading through existing code and following code paths a breeze. You can Ctrl+Click (⌘+Click) on a variable or function name to easily trace its definition, even if it’s in another file. This is great for debugging, especially when traversing libraries or other code you might not be familiar with, as you can follow the code path right from where you’re reading.

Source code navigation

Code reformat and optimize imports

I can be a bit of a perfectionist when it comes to my code formatting, especially when working within larger teams. Luckily WebStorm makes it easy to keep code formatted with automatic reformatting. You can do this by either selecting Code | Reformat Code or pressing Ctrl+Alt+L (⌥⌘L). This feature is also customizable through the Code Style settings or with a .editorconfig file to match the code formatting style your team is using.

Another tool that I often utilize is automatic optimizing of imports. This can be done with either Code | Optimize Imports or Ctrl+Alt+O (⌥⌘O). This feature will remove any unused imports, merge multiple imports from the same file, and sort imported members by name. Another very useful hack to keeping code more readable and maintainable.

Prettier

Speaking of code reformatting, you may want to utilize a library like Prettier, which has become pretty popular recently. Prettier is an opinionated code formatter so you, and your team, don’t have to argue about single vs. double quotes and can just focus on your project. The best part is WebStorm has integrated support for Prettier that can be triggered on code reformat and/or on save. To add Prettier support, install it to your project with npm install --save-dev --save-exact prettier and then enable it in WebStorm via Preferences | Languages & Frameworks | JavaScript | Prettier. While it might not be for everyone, Prettier allows me to focus more on the project and forget about formatting.

Prettier

Running scripts from package.json

Setting up WebStorm run configurations is usually more confusing that it needs to be. You can simply open your package.json and click the green arrow(s) next to a script and WebStorm will automatically create a run configuration for you. This makes setting up your configurations, running, debugging, and stopping your app from the top right of WebStorm easy. No need to worry about creating configuration as WebStorm handles it for you.

Run

Viewing git diff, changed files, and rollback

WebStorm’s git handling is one place it really shines. While I still mostly use terminal for commits, pushing, and pulling - things like viewing diff history, merging, and showing changes are vastly easier inside WebStorm. Allowing you to do things like compare file changes without the need to open to a pull request.

Viewing all the currently changed files in your project is as simple as changing the dropdown in the project sidebar from “Project” to “All Changed Files”. This is great for seeing if you left debug code in other files that you don’t want to commit, especially when a lot of files have been changed.

git

Another great tool is Show Diff, which allows you to compare your local file changes to the original version. It is available by right clicking on a changed file and then selecting Git | Show Diff. Another similar tool is Git | Show History showing a more in depth view of your git file changes over time - which you can even use to compare a previous git version of a file against your local changes. The final git history tool I use regularly is Git | Show History for Selection which is very similar to Show History, but allows you to view changes to a particular section of code; great if you’re running into an issue stemming from a change inside a specific block. Just highlight the suspect section and right click to see the menu option.

And my final essential git tool is Git | Rollback - for those times you want to reset changes you’ve made to a file without resetting all changes to your local, just right click a file and roll it back.

Refactor function and variable names

When working on code there’s sure to be times you’d like to rename a variable or function. And while find/replace can usually handle this, sometimes your names overlap with each other and find/replace can become messy. Luckily WebStorm provides an easy way to refractor a name by right clicking on it and then selecting Refactor | Rename… which will intelligently change the name of your variable/function and all references to it.

Scratch files

If you’re ever working on something that you don’t want to save or just copy/pasting temporary data for reference, scratch files are a simple addition to your workflow. Scratch files are temporary files that maintain language formatting but aren’t saved (unless you want them to be), allowing you to maintain simple code snippets while you work. This is great for comparing JSON data or simply moving code around. To create a scratch file using either File | New | Scratch File or the hotkey Ctrl+Alt+Shift+Insert (⇧⌘N) and then pick your filetype.

Scratch files

Multi-cursor editing

What IDE would be complete without muli-cursor editing in 2021? Using Alt+Click (⌥+Click) you can create multiple cursors to allow for quick editing of multiple locations simultaneously. While this is not something I use daily, I think it’s a trick definitely worth keeping in your back pocket.

Conclusion

And that’s it! WebStorm is an incredibly powerful IDE and this list barely scratches the surface of what it’s capable of. Hopefully you learned something you didn’t know and these tips can help speed up your development cycle. The best thing I’ve found is if you find yourself repeatedly running into any annoying situation, just Google “WebStorm + [your issue here]” and there’s probably a solution waiting for you.