VSCode vs WebStorm

I've been switching back and forth between VSCode and WebStorm for web development purposes. I'll lay out some noteworthy differences between VSCode and WebStorm in this article.

Ultimately, if I had to choose one editor, I would lean towards WebStorm because it has better refactoring abilities such as moving function/variables to different files. However, I often switch between both editors based on what tool I find best for the job.

Here's the breakdown of different features compare in VSCode and WebStorm.

Auto importing

Auto importing works better in WebStorm. I can copy and paste some code from one file to another in WebStorm and WebStorm can automatically import any missing symbols that are not already imported in the file. This only happens if you have the appropriate setting configured in WebStorm.

Autocomplete

Autocomplete works well in both VSCode and WebStorm. I did hit one hiccup with WebStorm not showing the right suggestions and had to open up a support ticket to figure out how I could get the autocomplete suggestions showing up for express. However, that seems to be a rare edge case and it works in most cases.

Not necessarily "autocomplete", but VSCode recently introduced GitHub Copilot which uses AI to provide suggestions on what code to write. As of this writing, it's still in technical preview, but I've been able to use it and I've been impressed by the results.

Theming

WebStorm by default looks crummy, but if you install the Material Theme UI Lite plugin, you can pick a theme that looks great. VSCode also looks good and there is a much larger choice of themes built by the community for VSCode.

The only thing that bugs me about the WebStorm look is that you cannot change the color of the title bar's background.

Plugins & Extensions

WebStorm calls them plugins. VSCode calls them extensions.

VSCode has a much greater amount of extensions than WebStorm has plugins. This isn't a big deal for me since I don't rely on that many extensions/plugins anyways. Almost all of my extensions/plugins are "nice to have" things that I can live without. That being said, I'm probably not leveraging VSCode extensions as much as I could be.

Here are some of my favorite extensions and plugins:

VSCode

GitLens - Inline git blame + other git enhancements

Error Lens - Shows errors inline in your editor

Toggle Quotes - Easily toggle between different quote types

Better Comments - Syntax highlighting for comments (This is built-in to WebStorm)

WebStorm

GitToolbox - Inline git blame + other git enhancements

I don't use any other noteworthy plugins.

Refactoring

WebStorm is better at refactoring JavaScript/TypeScript code. You're able to move functions and variables from one file to another, which VSCode does not support. That being said, VSCode can meet the majority of my refactoring needs, such as renaming symbols or converting function parameters to a single object.

WebStorm can also extract a block of code into a function whereas VSCode can't. I tried using the Abracadabra extension for this in VSCode, but it didn't extract things properly.

WebStorm is also able to convert a block of JSX into a React component. It will oftentimes make some weird assumptions for the component props, but it still helps you quickly refactor things.

Select a block of JSX you would like to move into a new React component in WebStorm

The component WebStorm automatically generated based off of the JSX I wanted to extract. In this case, the generated props were what I would have picked myself. The only thing I would change is using object destructuring in the props parameter.

WebStorm dialog that allows for moving members from one file to another

Format on save

VSCode and WebStorm are both able to quickly format files on save. I usually have ESLint and Prettier set up in my projects and formatting is always done via ESLint's --fix argument. Both VSCode and WebStorm have good support to allow ESLint to run --fix on save.

See this article I wrote on how to set up ESLint + Prettier in a TypeScript project with VSCode.

Debugging

VSCode and WebStorm both have good debugging of Node.js and React applications with their integrated debuggers. There doesn't seem to be any major advantage in using one editor's debugger over the other. In both editors, you can specify debug configurations to run your apps. In one of my projects, I've got debug configurations set up to run a web app, run/debug a server, and debug a web app.

Code style and best practices

One thing I like about WebStorm is that it gives you hints related to any duplicated code it finds in your project which could be a good indication that things should be refactored for better re-usability.

Dead code hints

WebStorm will tell you if exported variables are not used anywhere in your project and can be safely deleted. VSCode can only tell you if a variable is not being used in the current file. This helps with removing unnecessary code in your project.

Monorepo support

Both editors seem to be able to handle opening projects at the root of a monorepo and still provide working autocompletion and formatting on save. The only thing I've noticed that WebStorm does better than VSCode is that WebStorm will switch to the correct TypeScript version based on which file you're editing in the monorepo, whereas VSCode doesn't do that.

My workflow and editor preference

The past couple of weeks I've been switching between both VSCode and WebStorm for the sake of being able to compare both editors accurately. If I had to pick a single editor, I would pick WebStorm due to its superior refactoring capabilities. I've found myself switching over to WebStorm while working in VSCode if I need to do some significant refactoring.

That being said, there are some times where I'm coding in WebStorm and want to benefit from a VSCode extension (e.g. the Prisma extension that can format prisma schema files on save). Also, I may find myself missing GitHub copilot suggestions when coding in WebStorm, but right now I don't feel that way (possibly because I haven't used GitHub copilot enough).

In reality, I usually have both IDEs open at the same time and switch to the one that meets my needs best for the particular task I'm working on. Switching IDEs can be a bit annoying (and a RAM hog if you have both open at the same time), but it allows me to use the best tool for the job, so I find it's worth it in the end.

I wouldn't say I'm well versed in all the available functionalities in both VSCode and WebStorm, so if you think there is an available feature that I should be aware of please feel free to DM me on Twitter @RobertCooper_RC.