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.
Latest comments (131)
You forgot visual blocks. I've found that Vim fans like to think only Vim supports visual blocks :). Middle-click drag, and then End or Home. Or, Alt+Click to insert a single block.
i want to like webstorm, but i just can't. the interface of VSCode is tidier, even the new one of Webstorm doesn't come close. Auto tag completion in HTML doesn't always work well with Webstorm. Vscode is sometimes not so clever, but with extentions it is almost as good. But no matter how often I try with Webstorm, their complicated menu navigation, buggy plugins etc. cost me more time than I want to spend on it. vscode simply runs without any problems.
Translated with DeepL.com/Translator (free version)
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.
No IDE or Editors can match JetBrain's products. I tried Atom, Sublime, and unfortunately VSCode (just because of the hype), they were like primitive tools. Required frustating setups with unstable plugins choosing from tens of plugins for single purpose. Autocomplete unsuable. Forget about showing API documents. User experience quite confusing.
What about memory consumption? It would be interesting to compare against VS Code with a few large files opened, a workspace with a ton of small files opened, a couple workspaces concurrently opened with thousands of files in each, etc.
I am pretty sure WebStorm has a higher memory consumption due to the whole indexing and more
And now in 2021, VS Code has caught up. And if someone still thinks they NEED the fancy features of WebStorm beyond what VS Code can do, then it's a showing of weakness. j/k.
I still think so. WebStorm is still an IDE and VS Code is still an editor. But I have no problem if you think I am therefore weak :-D
Well as you may have noticed, I was just being silly.
Ah sorry, I did nit notice ;-) There are too many comments which are serious about that
I was trying to find the best emoji to convey it, but just gave up.
If you used webstorm it would have done it for you 🤓
I wanna to get licence for WebStorm better than Visual Studio Code
I wrote similar articles to compare them(chinise): blog.rxliuli.com/p/0c417ba5085d476...
1+ years later: Are you still using Webstorm?
Meanwhile I am using IntelliJ Ultimate which includes all the functionalities of WebStorm but can also be used to for many other programming languages, database inspections and many more. I use VSCode only as basic text editor
Until you start using it, you don't know. It's like eating low-quality and junk food, it seems fine to you until you eat real good and organic good.
I had the same point of view before. For instance, I was using Geany and Sublime for PHP for several years (and I thought they were really handy...), until my CTO suggested us to move to PHPStorm, and now I can't life without it.
Still my case, I had even the same thought for Java IDE with Eclipse. I thought it was great until I moved IntelliJ! 🙃
Frederico, you remind me myself but 10 years ago. 😀 Passionate!
My life circumstances have changed since. I have a family now, obligations, and about 0 minutes of spare time. Setting up my work environment is a work time activity for me (it wasn't before). I want to be paid for it now.
Also, you remind me the people who don't like Tailwind.css until they write a project using it.
Time flies. 😀 I miss my mostly free weekends and semi freedom. 😀
Well, if someone works for you and having fun tinkering instead of coding, you might change your opinion on the day you pay extra 100 USD to the developer.
That is the point Vasyl is talking about, his employer pays 50 buck per year for a webstorm, and Vasyl is focused on his work, not on setting up vs code.
Personally I am using both phpstorm and vscode with high proficiency, I have set my VScode per my liking, I keep my settings on gist, and whenever I need to change dev machine, its a matter of minutes to get all my settings back.
So no wasting time, pure productivity.
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.
I've used JetBrain products (IntelliJ and WebStorm) for many years, recently I've given VSCode a good try but it just doesn't match up to the convenience of having a full IDE.
Sure you can do the same tasks with plugins and playing around with the settings.json but its fiddly and not as intuitive (I think)
Nice post. I'm actually about testing out Webstorm's features cos I've been using VScode for years and I'm kinda addicted to it.