Why I Switched From Visual Studio Code to JetBrains WebStorm
As Visual Studio Code became increasingly popular, I used it for my further web projects. I liked it because it was much faster, highly customizable, and free so I could use it for my private projects.
In my current project, I met a developer who was confused that I was using an editor and not an IDE to develop large business applications. First, I did not consider his concerns, but now I understand him.
In this article, I want to tell you why I now mainly use WebStorm instead of VS Code for development.
This is a scorching topic, and I know this will cause some controversy. In the following article, I talk about my experience using WebStorm in a sizeable Angular application which was mainly developed in VS Code.
WebStorm provides a robust, fast, and flexible static code analysis. This analysis detects language and runtime errors and suggests corrections and improvements. It also indexes your whole project and can, for example, detect all unused methods, variables, and more.
This can significantly impact the code quality of a sizeable 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 feature convinced me that using WebStorm results in a cleaner code base.
WebStorm has an integrated test runner, which I like. You can run your tests directly from the IDE and even debug them there.
My Angular unit test workflow in VS Code is typically to mark a
it test block with a
fdescribe) which tells Karma only to run this specific test block. Alternatively, I use the karma-jasmine-html-reporter, where you can also define to run only specific tests by clicking on them on 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.
Not waiting for promises can be tricky if you expect the following code to run only after the promise has been resolved. WebStorm shows if there are unresolved promises (in this case for a TypeScript application):
VS Code has currently no possibility to show this information:
WebStorm provides all the functionality for complex git workflow out of the box. You can commit files, review changes, and resolve conflicts with a visual diff/merge tool in the IDE.
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 protects you from accidentally losing these changes. You can inspect the history of files and directories and do rollbacks. This history can be useful if you, for example, did a git push force by accident and overwrote your files even on the remote branch.
VS Code can only debug web applications on Chrome by using the Debugger For Chrome extension you to configure for your application.
Using WebStorm, you already have everything available per default, and, for example, for Angular, you just need to click "Debug Application" and you can set breakpoints in the editor and watch variables, etc.
In my opinion, refactoring code is much better than using WebStorm. You can rename a component, and it updates all file names and usages both in the HTML and 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.
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 and provides code completion for variables, pipes, and template reference variables.
WebStorm is developed in Java, which generally feels slower than VS Code. I would not say 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.
WebStorm provides inspections that are based on recommendations from Web Content Accessibility Guidelines (WCAG), which help you to write more accessible HTML code.
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 that will be added to the next release. These versions are temporarily available before a new version of the software is released.
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.
VS Code is more of an editor than an IDE like WebStorm. WebStorm has more features in its standard installation than VS Code in its default installation without any additional extensions.
Microsoft has created a fantastic product with VS Code, which you can 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 any additional plugins.
- Much better code refactoring possibilities.
If you prioritize speed, prefer using open source software, or want to edit some configuration files quickly, 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!