DEV Community 👩‍💻👨‍💻

Cover image for Why I Switched From Visual Studio Code To JetBrains WebStorm
Michael Hoffmann
Michael Hoffmann

Posted on • Originally published at mokkapps.de on

Why I Switched From Visual Studio Code To JetBrains WebStorm

As I started my first JavaScript project in 2015 I used JetBrains WebStorm which is an IDE (integrated development environment) for JavaScript development. I was already used to JetBrains IDEs as I worked before with Android Studio which is based on IntelliJ IDEA. Additionally, I got a WebStorm license from my company and could, therefore, use it without any restrictions.

As Visual Studio Code got more and more popular I used it for my further web projects. I really liked it because it was much faster, highly customizable and free so that I could also use it for my private projects.

In my current project, I met a developer who was really confused that I was using an editor and not an IDE for the development of large business applications. First, I did not really consider his concerns but meanwhile, I understand him.

In this blog post, I want to tell you why I now mainly use WebStorm instead of VS Code for development.

Preamble

This is a very hot topic and I know this will cause some controversy. In the following article, I talk about my experience using WebStorm in a large Angular application which was mainly developed in VS Code.

Code Inspection

WebStorm provides a robust, fast, and flexible static code analysis. This analysis detects language and runtime errors, suggests corrections and improvements. It also indexes your whole project and can, for example, detect all unused methods, variables and more.

You can also detect unused methods in JavaScript methods using VS Code and ESLint with the rules no-unused-vars and no-unreachable. But if you are, for example, using a TypeScript project (like Angular) VS Code does not detect unused public methods. See this simple example:

VS Code

WebStorm

This can have a huge impact on the code quality of a large Angular code base which was mainly developed using VS Code.

To see the difference open your project which was developed in VS Code with WebStorm and run the code inspection. This was basically what convinced me that using WebStorm results in a cleaner code base.

Integrated Karma Tests

WebStorm has an integrated test runner which I really like. This way you can run your tests directly from the IDE and even debug them there.

Running my jasmine & Karma tests in WebStorm I can easily jump to the failed test code and rerun only this specific test. The following image shows such a test run:

My Angular unit test workflow in VS Code is normally to mark a describe or it test block with a f (e.g. fdescribe) which tells Karma to only run this certain test block. Alternatively, I use the karma-jasmine-html-reporter where you can also define to run only certain tests by clicking on them in the HTML page.

There is currently also a VS Code Karma Test Adapter in development which should provide a similar integrated Karma test functionality for VS Code.

Unused Promises

Not waiting for promises can be really tricky if you expect the subsequent code to run only after the promise has been resolved. WebStorm shows if there are unresolved promises (in this case for a TypeScript application):

WebStorm

VS Code has currently no possibility to show this information:

VS Code

Source Control / Git Integration

VS Code has per default a pretty basic git integration. You can either use extensions like GitLens or use additional tools like Sourcetree if you like to use a GUI for complex git work.

WebStorm provides all the functionality for complex git work out of the box. You can commit files, review changes, and resolve conflicts with a visual diff/merge tool right in the IDE.

Local History

VS Code does not save a local history of your changes but you can use extensions like Local History.

WebStorm automatically tracks all the changes you made to your files and therefore protects you from accidentally losing these changes. You can inspect the history of files and directories and do rollbacks. This can be useful if you, for example, did a git push force by accident and overwrite your files even on the remote branch.

Debugging

VS Code can only debug web application on Chrome by using the Debugger For Chrome extension which you then need to configure for your application.

Using WebStorm you already have everything available per-default and, for example, for Angular just need to click "Debug Application" and you can set breakpoints in the editor and watch variables etc.

Code Refactoring

In my opinion, refactoring code is much better using WebStorm. You can rename a component and it updates all file names and usages both in the HTML as well as in the TypeScript files. In general, all the JetBrains IDEs are well known for their refactoring features:

A well-known feature of the JetBrain IDEs is Safe Delete. Using this functionality you can safely remove files from your source code during refactoring. The IDE will first search for usages of the files and if they are found, you can check them and make necessary before the files are deleted.

Unfortunately, VS Code is not that powerful at the moment.

Angular CLI Integration

WebStorm provides a good Angular CLI integration by the so-called Angular Schematics:

In total, WebStorm has great Angular support as it assists in editing Angular templates, provides code completion for variables, pipes, and template reference variables.

Speed

VS Code is based on Electron and is powered by HTML & JavaScript.

WebStorm is developed in Java and it feels in general slower than VS Code. I would not say that it is critically slower but the speed difference is noticeable.

VS Code has a faster startup time but if you are working on a project your IDE or editor is always open and startup time does not play a crucial role.

Accessibility Inspections For HTML

WebStorm provides inspections which are based on recommendations from Web Content Accessibility Guidelines (WCAG) which help you to write more accessible HTML code.

Price

VS Code is open source and free to use.

You need to pay for a WebStorm license unless you choose one of the free licenses available for open source projects, students, teachers, classroom assistance or training courses, coding schools and boot camps.

Another option is to use the EAP (Early Access Program). These pre-release versions include features which will be added to the next release. These versions are temporarily available before a new version of the software will be released.

This is the official disclaimer for the EAP:

This is an early access version of the product. You expressly acknowledge that this version of the product may not be reliable, may not work as intended and may contain errors. Any use of the EAP product is at your own risk.

Conclusion

VS Code is more of an editor than an IDE like WebStorm is categorized as. WebStorm has in its standard installation more features than VS Code has in its default installation without any additionally installed extensions.

Microsoft has created an amazing product with VS Code which you can of course use for larger business applications. Generally, I would prefer and recommend using WebStorm due to these reasons:

  • Better code analysis functionalities
  • All-in-one IDE with good basic functionality without the need to install many additional plugins
  • Much better code refactoring possibilities

If you prioritize speed, prefer using open source software or just want to quickly edit some configuration files then you should go for VS Code.

What are your experiences using VS Code and WebStorm? Let me know in the comments what you use to develop your application!

My VS Code & WebStorm Setup

The screenshots in this article show VS Code using the Material Dark Theme and WebStorm using the Material UI with Material Darker theme.

Top comments (137)

Collapse
 
pringels profile image
Peter Ringelmann

Good comparison, although I wouldn't agree with you that VScode is not as well suited to large projects. I can do all the things you mentioned VScode lacks. (Eg running karma tests in IDE with wallabyJS)

To me it comes down to preference between "out of the box" functionality versus building your own feature set with plugins.

Collapse
 
schollii profile image
schollii • Edited on

Refactoring, search/replace, widening selection, and regression testing, in jetbrains IDE (whether webstorm or pycharm etc) blow the doors off vs code. But you have to experience these features first-hand in jetbrains IDE because just comparing "on the page" feature for feature misses important differences that have huge impact on productivity.

The only real advantages of VS code are startup time, memory and price, ie I have yet to find a feature that I use daily and that is truly better than jetbrains product. Im guessing most of us start our GUI once every few weeks, so for quick edits and minimal UI I use vs code or even vi. Re price: Most can afford the cost of quality (ie a jetbrains IDE) but don't want to out of some strabge notion that free is best. Memory is the biggest problem for me jetbrains IDE, when GUI stays open for weeks, but after using vs code for 6 months I'm going back to pycharm as I'm just missing its Ferrari features too much, on a daily basis. I'll keep VS code for quick edits.

Collapse
 
jwluiten profile image
Jan Willem Luiten

I have been using IDE's by JetBrains for many years now and in my opinion there is no contest.

Collapse
 
jaycverg profile image
Jayrome

I primarily work on IntelliJ as a Java developer. I have also used VS Code for frontend tasks. My experience is that IntelliJ (or IntelliJ-based IDEs) is quicker in terms of searching, refactoring, static analysis, etc. due to the fact that it indexes your project. Opening our monorepo project in VS Code, finding files/symbols/methods is much slower compared to IntelliJ.

Collapse
 
stevensacks profile image
Steven Sacks • Edited on

Thanks for the write up! Here are my thoughts.

It isn’t fair to compare Webstorm and VSCode out of the box. Both use many extensions and you always install more in both (or uninstall some of the defaults). If the end result is similar functionality, then there is no practical difference.

The above notwithstanding, Webstorm is a far superior IDE than VSCode when it comes to coding for many reasons but there is one major one that you also mentioned: Refactoring.

VSCode doesn’t hold a candle to Webstorm when it comes to refactoring which is such a big and important part of coding. Its refactoring is the #1 reason why, despite spending a month using only VSCode to give it a fair shot, I came back to Webstorm.

One thing you didn’t mention that I think is one of, if not the biggest feature differentiator, the “Find/Replace In Files” modal. It was a GAME CHANGER when it was released a couple of years ago. I simply cannot live without it. I've never seen a tool like it. VSCode's "Find/Replace In Files" panel is significantly worse than Webstorm's previous Find/Replace in files panel, which was great in its own right.

In Webstorm, you can rename folders and files and they will update throughout the project. You can drag files and folders to new locations and your entire codebase will update every reference to them. There is an extension in VSCode that is supposed to do this, but it's buggy and doesn't work as expected. One of its worst bugs is it changes all of you node_modules imports into their full paths like "../../../node_modules/path/to/the-libs/file.js" in every affected file. It's unusable.

A lot of other nice features make coding in Webstorm a much better experience, as well. Unused function dimming, automatic import injection on paste, import autocomplete, automatic conversion of HTML class to React’s className on paste, and numerous small but useful features that make working in Webstorm a joy.

However, to be fair VSCode has some really great extensions that Webstorm does not.

The biggest feature is VS Live Share, which keeps getting better and better with each release. However, I can use it and still code in Webstorm. I host a Live Share session, and the changes automatically update in VSCode so the person on the other end sees those changes. It's not perfect because you can't take advantage of the "follow along" features, but it's still useful.

The Git extensions are simply better. Gitlens and Git History are full of great features that Webstorm does not have. I primarily use Git on the command line, though, so I don't miss these that much.

This might seem minor, but the customization that you can do to the application frame is much better than Webstorm. I tried installing the Webstorm Material Plugin and it made Webstorm run like molasses and it took a fair bit of googling to figure out how to completely uninstall it because it left all kinds of changes in its wake. Webstorm is stuck with the Darcula color frame. Not a deal breaker, but VSCode has a more cohesive look to its themes.

The clear winner is Webstorm. I just don’t see VSCode getting feature parity with some of Webstorm’s most important differentiators, and so I’m sticking with it. My only feature request is something like VS Live Share, but honestly, everyone else I know seems to use VSCode so there wouldn't be anyone to share with. #lonelywebstormer #worth

Collapse
 
caruso profile image
Giuseppe Caruso • Edited on

That's unbelievable. Those are just my thoughts when reading the article condensed in your comment. 😳
I would just add that Vim mode is, IMHO, better in VsCode. That's what makes me go back to it from time to time.

Search in sidebar is just unusable compared to Search window in WebStorm.

And themes... OMG. I don't know how many comments, tweets, or emails I wrote to JetBrains asking for better themes or, at least, a better API to build them. It seems super minor but you'll tend not to use something you don't like.

Onr last thing, I'd like to mention is code inference. It's probably just a personal preference but I like more VsCode pop ups VS. WebStorm ones. I find them easier to be readen. Could be its just code formatting, but params, function signatures, typescripts annotations are way better in VsCode.

Im conclusion I like better VsCode but use WebStorm for Search and Refactoring featutes.

Collapse
 
derskeal profile image
Comical DERSKEAL

Great comment! Although I enjoy using Webstorms's Git menu wayyyyyyy more than that of VSCode's extensions.

Collapse
 
stevensacks profile image
Steven Sacks

Yeah, I primarily use git on the command line so I’m not exactly the best judge. I do like the inline blame vs the annotation bar in Webstorm, but no biggie.

Collapse
 
qm3ster profile image
Mihail Malo

Update-imports-on-move and find-and replace-in-files work great out of the box for me.
When did you try Code?

Collapse
 
stevensacks profile image
Steven Sacks

The Update Imports On Move extension only works properly if you use TypeScript and even then still has bugs.

Have you used WebStorm’s Find In Files?

Thread Thread
 
qm3ster profile image
Mihail Malo

No, I hoped you'd tell us what's exciting about it.

Maybe I'll try out a EAP. Someday...

Thread Thread
 
stevensacks profile image
Steven Sacks

You just have to use it. I have never used anything like it. It’s next level. So powerful. I use it constantly. It’s just amazing.

Collapse
 
klauseverwalkingdev profile image
Klaus Ferreira

The biggest feature is VS Live Share, which keeps getting better and better with each release. However, I can use it and still code in Webstorm. I host a Live Share session, and the changes automatically update in VSCode so the person on the other end sees those changes. It's not perfect because you can't take advantage of the "follow along" features, but it's still useful.

I haven't thought about that before. Thanks for this great tip :)

Collapse
 
mokkapps profile image
Michael Hoffmann

IntelliJ now also supports that feature: jetbrains.com/help/idea/code-with-...

Collapse
 
akainth015 profile image
Aanand Kainth

You can change the color theme back to normal by changing Editor > Color Scheme to "Default"

Collapse
 
jordyvandomselaar profile image
jordyvandomselaar

Late to the party…

I agree with you. I mean, I love VSCode but it has this void that even extensions cannot fill.

Using my currently open Chrome to debug JS? Can't do it.
Autocompletions inside a debugging console? Can't do it.
Running phpunit tests with xdebug? Should be possible but after tinkering for more than an hour it still doesn't work.

All of these things work out of the box without any effort at all in PHPStorm.

What I do love about VSCode is the plugins that do work though. Easy development in React, Flutter, Laravel in one editor? Check.
It sometimes has better autocompletions because of the abundance of plugins.
It's really fast and typing feels snappy as well.

I wish I could use VSCode full time but I use these missing features all the time and I cannot live without them.

Collapse
 
nikoheikkila profile image
Niko Heikkilä

Hot take: If you need a full-blown IDE to refactor your application it probably has grown into such a monolith you should consider splitting the logic to smaller and more focused modules.

Collapse
 
tracker1 profile image
Michael J. Ryan • Edited on

It can happen though. I'm pretty good at not letting it and enforcing a structure and sure that limits it. That said I've jumped into a number of projects that are so much spaghetti it isn't funny.

That's about the only saying grace of typescript, which I credit more than the ide. I still prefer vs code though.

Collapse
 
rcollette profile image
Richard Collette

And it happens because they either were not using Webstorm, or they simply choose to ignore the recommendations in the first place.

Thread Thread
 
scottadamsmith profile image
Scott Smith

I may have misread, but are you saying that not using Webstorm could be the reason an app has grown into a monolith full of spaghetti code?

Collapse
 
romulopbenedetti profile image
Romulo Pulcinelli Benedetti

Even a monolith does not need a full-blown IDE, but both working on them and small and more focused modules can be more productive with a full-blown IDE if you can take advantage of the extra task automation and visual exploration tools that the full-blown IDE offer.

Collapse
 
sekmun profile image
Sek-Mun

Sometimes we don't have the luxury of working on our own code I guess...

Collapse
 
nikoheikkila profile image
Niko Heikkilä

Majority of my professional career has involved working with someone other's code. Hasn't affected my editor of choice, though.

Collapse
 
lampewebdev profile image
Michael "lampe" Lazarski

My thought exactly.

If you have so many dependencies that you cant refactor a part of your code then maybe there is something wrong with your architecture.

Collapse
 
strahinjalak profile image
Strahinja Laktovic

Thanks for the post ! I, myself, also went for the JetBrains products, and never looked back. Though I work in PHPStorm, firstly because I started with Symfony, but now also for Express/ React applications because PHPStorm has integrated Database tab which can work with MySQL and PostgreSQL very well and with almost no configuration. It is quite good for basic tasks with tables.

Collapse
 
derskeal profile image
Comical DERSKEAL

That Database tab. Boyyyyyy! 😍

Collapse
 
thejacer87 profile image
Jace Bennest

if anyone can point to an actual comparable in vscode, i would love it. none of the sql extension even came close.

main reason i haven't fully switched to vscode

Collapse
 
lscarneiro profile image
Luiz Carneiro

I pay for WebStorm (and PhpStorm) with a smile on my face. But I do see value in VSCode too.

As Steven Sacks mentioned, when it comes to refactoring a large application, WebStorm really shows its power.

I defend that everybody should use the tool that makes you more happy and productive, in my case it's WebStorm, but I recognize that for others don't, YMMV.

Collapse
 
rattanakchea profile image
Rattanak Chea

Pricing, startup time, extensions and open source, easy configuration are the reasons I use VS Code. But I like to try new tools that make job easier.

Collapse
 
alekstheod profile image
Alex

Paid by jetbrains to advetise their expensive product? I wouldn't spend a penny for an "IDE".

Collapse
 
koresar profile image
Vasyl Boroviak • Edited on

I used to spend 4-8 hours a month to configure or keep updated my VS Code / Atom. That's roughly $100 MONTHLY.

The WebStorm costs my employer $50 YEARLY. I don't waste that time any more.

WebStorm is CHEAPER than VS Code.

Collapse
 
defman profile image
Sergey Kislyakov

It's not expensive.

Collapse
 
stewieandro profile image
Stuart Slaugh

Expensive? 89$ per year? You better get a better job lol! Would you use VSCode if it wasn't free? Jetbrains makes great software and you're probably working twice as hard as you need to if you never use an IDE.

Collapse
 
onetom profile image
Tamas Herman

To be fair, you should spend a few hundred extra dollars on your computer to enjoy a snappy JetBrains IDE experience, because you will need a few extra gigs of memory, fast SSD and i7 with lots of L3 cache to speed up code indexing...

You might need to invest every 2-3 years into your machine too keep it up with the hunger of your IDE (and the wasteful projects you might be working with...), so that cost amortizes quite well, IMHO...

I was paying for IntelliJ Ultimate monthly for 2 years but last year I've upgraded to the yearly All Pack version, since they offer substantial discounts for continuous subscribers and they do a really great job! It cost me 190 USD/year, which is ~16 USD/month. That's pretty reasonable for a tool I use daily for work...

Collapse
 
mokkapps profile image
Michael Hoffmann

Nope I am not sponsored and currently using the EAP version

Collapse
 
manpenaloza profile image
Manuel Penaloza

Had the quite the same experiences and thus switched to Webstorm. What convinced me most about Webstorm:

  • its awesome (imho much better-working compared to vs code) possibilities to do code navigation/inspection (i.e. 'go to declaration' or 'show usage' features)
  • Webstorm's quick search improved a lot the last few months and from current perspective it surpasses the vs code equivalent

Those two points represent major aspects of my dev process. As a result the editor switch to Webstorm also led to more fun and convenience during development for me.

Collapse
 
emilpi profile image
Emil P

codesubmit.io/blog/software-engine...
My personal opinion is that EVERY developer should spend 0.01% - 0.3% of their salary on JetBrains products, instead of VS Code. JetBrains refactoring, type hints, autocompletion, usage hints speed up development as much as twice, I think.
This is something plugins can not catch up with.

Collapse
 
moniuch profile image
moniuch

WebStorm comes helpful with a lot of small bits of intelligence where one would assume the work has to be done manually. Not only does it have a separate menu labeled Refactor, packed with all kinds of extractions, moving, etc. but it also watches your coding and helps you (like for example when working in Angular/TS) to keep the file name in sync with class name. Most of renaming jobs can be done without using global search/replace without turning your app crashing be it for a second.

But WebStorm has also a great set of code inspections, some of them simply amazing. One time I was using .scrollTo(leftPos, topPos) where topPos was passed using a variable called lastYPos. When the thing was refusing to work as expected, in my desperation I became interested in squiggles that appeared around the statement. WebStorm politely asked me whether I was sure passing lastYPos as leftPos was a good idea. It knew that Y could probably mean something vertical. Turned out, I inadvertently mixed the order (blame CSS conventions for that!) and WS got me covered.

For those who are not so fluent using Git in command line, WebStorm has a great UI, allowing you to select files that should be included in a commit. But not only files - you can also select individual changes through checkboxes! During rebase interactive that UI is just a time saver. You can view changes of each and every commit in a diff mode.

I really encourage everyone to at least give WS a spin.

Collapse
 
nicolaerario profile image
Nicola Erario

Vscode is an editor;
WebStorm is an IDE;
You can’t compare them directly;
You can compare vscode vs sublime text for example;
or, maybe, visual studio 2017 with webstorm

Collapse
 
alexdwhite profile image
Alex White

This was exactly what I was thinking the whole read.

Collapse
 
jcklpe profile image
Aslan French

I think vscode is more of a hybrid because of how robust its plugin scene is. It's a defacto ide once you extend it enough. That's what makes it so good though. You can really pick and choose what you find important.

Collapse
 
qzsg profile image
Adrian

I am too lazy to read configuration options and search for good free extensions so I am switching back to an expensive ide that has everything preset for me because I am lazy that way /s

Collapse
 
jcklpe profile image
Aslan French

Really don't understand the flaming here. I like vscode a lot but y'all are taking this personally in such a silly way

Collapse
 
qzsg profile image
Adrian

I wouldn't call it flaming as in my daily work I use both of them. Just felt that while your article has it good points against vscode and for webstorm, it kinds of feels like a comparison that should not have been there in the first place. I understand where you are coming from, and that the other comments may me too harsh, personally it is just some naughty jab at the actual flaming comments. Sorry if you felt like I was flaming

Thread Thread
 
jcklpe profile image
Aslan French

just FYI but I didn't write the article. I'm just commenting on the story.

Thread Thread
 
qzsg profile image
Adrian

Oops I though you were op, wasn't really awake yesterday but well comment still stands

Collapse
 
peterwitham profile image
Peter Witham

Thanks for this post, a very well thought out evaluation of both sides I think. I often find myself pondering which app I'm going to use (almost monthly) for certain projects.

I feel it is a wonderful time to be a developer with so many tool options, we are afforded the opportunity to switch tools anytime one 'feels' better than another for particular scenarios.

Collapse
 
dskuratovich profile image
Dmitry

I wouldn't agree to all the points, but in generally from my point of view IDE is always better than just code editor; so in certainly I think WebStorm is a good choice against VS Code.
Thanks for this good comparation

Become a ModeratorHey! We would love your help!

Fill out this survey and help us moderate our community by becoming a tag moderator here at DEV.