Having used both VS Code and WebStorm, here are my opinions of how they compare, mainly in regards to TypeScript and React development. This is a fast moving field, but I’ll try to update this as I gather more information.
IDE vs Editor
WebStorm is categorised as an IDE (integrated development environment) and VS Code is more of an editor, although VS Code has has some features you might associate with an IDE.
Price
VS Code is open source and free to use. WebStorm is a paid IDE unless you are able to take advantage of something like their free open source license. JetBrains changed their pricing structure in 2015 to have a subscription model and there was quite a lot of discussion around the change. There are monthly/yearly pricing options and also package deals where you can access all their tools (which can be a large saving if you use many of JetBrains products).
Developers
JetBrains have been headquartered in Prague, Czech Republic since 2000. JetBrains specialise in tools for software development.
VS Code is by this small American company you may have heard of named Microsoft, who have their fingers in a number of areas ;).
IntelliJ IDEA vs WebStorm
IntelliJ IDEA is the original premier Java IDE product from JetBrains, often just called IntelliJ. IntelliJ has grown to include many other programming languages over the years. Some of these languages have been broken out into cut down and more specific versions that can be sold at a cheaper price.
Given IntelliJ and WebStorm share the same underlying platform, most of the features from WebStorm are available in IntelliJ and the other JetBrains products. WebStorm seems to be able to sometimes tweak things like project setup due to its narrower focus and features.
WebStorm seems to get some updates first and these might not turn up in other products until later as described on StackOverflow. Unfortunately if you own IntelliJ, you cannot use WebStorm unless you have a licence that includes WebStorm, like the “All Products Pack”. In the past, it seems WebStorm users have been able to use features IntelliJ users could not, even though IntelliJ is the premium product.
Visual Studio vs Visual Studio Code
These two products from Microsoft have a similar name, but are very different beasts. Visual Studio is Microsoft’s premier IDE and has been around for a long time.
Visual Studio has many more features than VS Code and is highly integrated to the Microsoft Windows ecoystem. Visual Studio uses a lot of GUIs and specific project configuration and is only available on the Windows platform, whereas VS Code can deploy to many environments because it is developed with web technology.
Visual Studio has a number of different versions, ranging from very expensive enterprise versions, to the feature cut down community version. VS Code is free and only has one version. Both support additional features via their own plugin mechanisms.
Out of the box
I think WebStorm has more features than VS Code when you first install it. I find the WebStorm project setup will often help you find features you might find useful.
Extensions/Plugins
WebStorm has plugins and VS Code has extensions to add functionality to the core product. You can also create your own modifications using their respective APIs. Both have repositories to browse extensions or submit them. There can be free or commercial options.
It is possible to disable these extra features, which may make the product run faster and use less memory. WebStorm shares the same plugin API with their other products, meaning the same plugin can be available in their different IDEs.
Speed
WebStorm seems to generally be regarded as slower than VS Code. WebStorm is developed in Java and VS Code uses the browser/HTML/JavaScript based Electron platform. Some of this will depend on how many features you are using and the size of your projects, but I also feel VS Code is normally faster. WebStorm I think is a bit heavier, but I ran it on a fast machine and it didn’t overly bother me. I have seen a number of people find the speed of WebStorm frustrating and prefer VS Code for this reason.
The main feature I tend to wait on is auto import (creates import statements) of TypeScript code. If you are working on really large projects, it is worth making sure WebStorm runs at an acceptable speed before you buy it.
Project File
WebStorm requires you to use a project file.
VS Code is great for browsing code as you can load a directory without configuration, but does have a concept of workspaces to allow project specific settings.
Configuration
VS Code does have some settings for workspace settings and is configured mainly by editing a JSON file. WebStorm seems to have more features and provides a GUI to change them. I find WebStorm easier to use and discover settings (you can search for text in the settings area). You can also sync your WebStorm settings to a repository. VS Code has a popular third party extension, Settings Sync.
Updates and Development
I am not sure who is progressing faster, but it feels like VS Code. I believe VS Code tries to have monthly releases while WebStorm has around 2 or 3 per year.
VS Code is a younger product, so it had some catching up to do. You can check the progress of VS Code here. I find it pretty impressive how much commitment Microsoft have shown to VS Code and how fast it is bringing new features to the table. Check out their GitHub for issues and feedback. Because the core of VS Code is open source, they receive community commits to source as well as third party add ons.
WebStorm also seem to listen to their customers and allow feature requests and voting if you sign up to the tracking software. Both provide nice blog posts about new features in their products.
Source Control/Git Integration
VS Code has pretty basic git integration and keeps things simple. You might want to look at other tools like SourceTree or GitHub Desktop if you like using a GUI for more complex git work.
WebStorm has a lot more source control features built into the IDE and I find it nicer to use. I find the diff UI of WebStorm has more features and quickly allows me to visualise source code differences by moving back and forth between diff files.
TypeScript
Microsoft are the developers of TypeScript and VS Code, so they have a strong relationship.
WebStorm have also been working hard on TypeScript integration.
TypeScript is a relatively new language and changing quickly, so both are adding new features. JetBrain’s other IDEs I feel have stronger features for older languages, like Java and C#, as they have been working on them for a longer period of time.
WebStorm seems to be able to automatically compile TypeScript, whereas VS Code seems to require a task runner to be configured and run each time you load VS Code. VS Code 1.13 previews VS Code Tasks 2 API and some tasks will be auto detected.
TypeScript Auto Import
Auto imports can be a little slow due to it scanning the code and it can take a second or so as it processes the code. VS Code seems like it will eventually have proper support for this via the TypeScript language service, but I haven’t seen it properly integrated yet. A number of VS Code extensions try implement auto import and they seem to have improved, although I found the WebStorm version works in more situations and it is part of the core IDE. I found this a great time saver. Manually adding imports is such a distraction to my coding flow.
Refactoring
I think JetBrains have been at the forefront of refactoring code. TypeScript has pretty basic refactoring suport compared to their Java and C# products I have used before.
VS Code is also pretty light on refactoring for TypeScript and I feel has less refactoring features than WebStorm. For example, I had a case where renaming a class worked fine in WebStorm, but VS Code said there were no results.
Neither seemed capable of extracting an interface from a class as in other JetBrain’s products. There are also a number of VS Code extensions that support refactoring TypeScript, so you could try your luck with these. Refactoring features should improve with time.
Debugging
Both products have integrated debuggers where you can set breakpoints in the editor and watch variables etc. I found WebStorm easier to configure debugging.
Testing
I think WebStorm has more built in features for testing, for example, they recently added Jest support to the GUI.
Live Templates/Snippets
WebStorm has a big win here for me. You can select code and create Live Templates. The Live Templates are edited in a GUI and it looks much closer to code and is easier to copy and paste. You can also create new files based on Live Templates. Editing snippets in VS Code I found rather clunky as I believe you have to edit a JSON file and convert indentation to use /t for tabs.
WebStorm is based on Velocity templates and VS Code an adaptation of TextMate snippets.
Emmet
Both tools support Emmet (a system for quick creation of tags). One thing I found useful in WebStorm is being able to modify the Emmet trigger, as it was interfering with my snippets trigger.
WebStorm Emmet works with JSX/TSX and I believe also in VS Code.
Formatting
I get the feeling WebStorm has more options for formatting/reformatting code (choosing ’ or ” in languages, reformatting, etc), but VS Code has been adding more of these lately, so it is worth comparing to see if you can configure the setup how you prefer.
Markdown
Both have some support for Markdown. One issue I found was WebStorm has no setting for word wrap on markdown files, see StackOverflow
Running npm Scripts
I quite like the built in WebStorm npm window that allows you to quickly run scripts in WebStorm via the GUI.
VS Code has an npm extension that can run npm scripts via a shortcut.
Conclusion
Generally I prefer WebStorm for larger projects and coding. I have used IntelliJ around the time if first came out and have found JetBrains products very impressive. VS Code I find great for quick browsing. I think Microsoft are doing a fantastic job as they add features at what I feel is an impressive rate.
At the moment, I think people who like GUIs, extra guidance and more features are probably going to be more comfortable with WebStorm. VS Code will be attractive to people who prioritise speed, editing config files and free and open source software.
I feel these are both great products and definitely worth checking out to see if they work for you. WebStorm has trial and early access versions and VS Code is free, so it is easy to try either. It will be interesting to see how they develop in the future.
I had some problems with the Logitech MX Master 3S Mouse with an M1 MacBook Pro, but I had better luck with a Logitech G502 X Mouse