Why I prefer WebStorm over VSCode for web dev
Tags: ide, productivity, webstorm, vscode
Published: 2020-10-10 16:34:31

The reason is short and simple: WebStorm fits my workflow better. It shows me information that I need when I need it, which improves my productivity.

I'm not sponsored by JetBrains to write this, I just got the feeling that people regard VSCode as the 'go-to' IDE for web development these days. I hope this article can give you some insight into the stuff you are missing out on if you have never used Webstorm before.

Recently I tried switching from WebStorm to VSCode for work when we started working from home, but I felt something was missing, even with plugins.

# In control of version control
WebStorm makes me feel in control of the changes that I'm making to the project that I'm working on. The differences between both IDEs are small, but they do add up. Both have great features for finding, editing and refactoring code. The main area where the developer experience of VSCode is lacking is version control.

Both editors show you which files were changed/added, but WebStorm offers some very useful additional features and a better overall developer experience:

![Change Log panel in Webstorm](https://dev-to-uploads.s3.amazonaws.com/i/os1ask088ef7ctc2qikp.png)
<figcaption>Change Log of the React repository in WebStorm</figcaption>

- I can organize my local changes in *multiple changesets*, which makes it easy to split my changes per feature or between client/server or isolate some experimental code that I want to revert later on.
- Both IDEs have great tools for comparing versions of a file (diff tools).
- WebStorm comes with a fantastic *change log panel*. It allows me to easily see the changed files of each commit and to get an overview of the state of all branches in the project. In VSCode, you need a plugin such as [Git History](https://marketplace.visualstudio.com/items?itemName=donjayamanne.githistory) to get the same overview, but it's just not as nice.
- Fixing mistakes in my commits (that have not yet been pushed) is as simple as right clicking the actual commit and either undoing or rewording the commit message. It's the tiny things like these that speed up my work.
- WebStorm has a dedicated panel for "*shelves*", which allows you to temporarily store uncommited code (useful for working with temporary changes). It's easy to manage multiple shelves and compare changes to the current version. VSCode only offers a basic implementation of Git stash.
- You can bundle up your changes into a *patch file* and send it to someone else or import it in another project, without checking in to version control. This should not be your standard process, but every now and then this can save a bit of time.
- Finally, when you are fixing a merge conflict, the 'magic wand' tool can automatically resolve all changes that do not cause any conflicts, so you can focus on the actual issues.

# VSCode
One can argue that there are tons of plugins available for VSCode that can fill up these gaps or you could use some external app like [Sourcetree](https://www.sourcetreeapp.com/) or [Git Kraken](https://www.gitkraken.com/), but that's the whole point: WebStorm feels like a complete package right out of the box, I never have to leave my IDE during the whole development process (OK, just for debugging in my browser).

# Conclusion
I prefer working with WebStorm over VSCode, because it speeds up my work and has great features that show me useful information when I need it most. VSCode feels lacking in this aspect.

It does come at a price for individual developers, but you should ask yourself if such a small investment is worth the time you save in everyday tasks such as version control. However, WebStorm is free for students of most universities.