Visual Studio Code vs WebStorm

 One of the most important tools for a programmer is an IDE. Sure, we can use a text editor (Notepad, Vim or Emacs to name a few), but realistically it is difficult to work on a modern project without the help provided by IDE: IntelliSense, support for build automation and test frameworks, debugger, version control tools and many more. In my current project frontend developers are using WebStorm form JetBrains.

As front-end developers we try to be up to date with all the new web technologies and tools. One of the most popular is Visual Studio Code and when version 1.0 was released (April 2016) we decided it was a good time to check how it would perform in our project and what the differences between this new IDE and WebStorm would be.

We work mainly with:

• JavaScript
• TypeScript
• AngularJS 1.x
• Bootstrap 3
• LESS
• Grunt

This post is a summary of our research and shows a result of comparing Visual Studio Code (version 1.1) and WebStorm (version 2016.1.2) while working on a relatively big frontend project: running for almost two years now, currently with four frontend developers.

#1 Project Setup

Setting up the project for Visual Studio Code is easy and very similar to WebStorm, but there are a few points where the latter surpass the former.

One of the biggest differences is the ability to run tasks:

• Visual Studio Code allows you to run tasks but only of one “type”, e. g. Grunt tasks. Apparently, there is no option to configure task runner so it uses different tools. It may not be a big issue in most cases but sometimes, depending on a project, it may be required. An example can be a setup with Grunt task for watching changes in *.js files and TypeScript compiler task for watching *.ts files. There is also no possibility to run more than one task at a time.
• WebStorm has integrated task runner that is highly customizable with predefined settings for all popular tools and it allows you to specify many configurations. An important feature is the ability to run more than one task simultaneously.

JetBrains’ IDE has also many useful features, like for example code linters (JSlint, TSlint),  while in Visual Studio Code it needs to be installed as a plugin and not all of them are installed by default. It’s not really an issue, after installing those plugins they work fine, but some additional work is required to setup a project.

In WebStorm there is an option to set watchers, e.g. for transpiling LESS files to CSS, without the need to run specific task. Visual Studio Code doesn’t have that option yet but it can be achieved by installing a plugin (Easy LESS) and creating configuration file. Not as easy but possible.

When creating a new project there is one more difference between those editors. In WebStorm a new project can be created using built in generators that will download needed libraries and frameworks chosen by the user, version can be specified too. Again it’s not a big problem, the same can be done using external tools or manually, but it’s easier here and saves some time.

#2 TypeScript

Not surprisingly TypeScript is very well supported in Visual Studio Code. It is Microsoft’s technology after all.

There is no need to setup anything in the editor, everything is working great out of the box. If the project has a configuration for TypeScript in file “tsconfig.json” it is detected automatically. TS linter marks all errors while typing code.

One really big advantage of Visual Studio Code in regards to TypeScript is speed. Linting and compiling happens almost immediately, while in WebStorm in can take a moment, even up to several seconds. In bigger projects it can be really noticeable.

On the other hand, Microsoft’s editor lacks very a helpful feature that is present in JetBrains’ alternative – an integrated TypeScript compiler which shows a list of all errors ordered by files, and clicking on the error opens that file in the position of a problem. Saves a lot of time, especially when there are many files in the project.

WebStorm has also more ways to configure TypeScript options than just “tsconfig.json” file. For example there is a possibility to choose the compiler version. It can be the one bundled with IDE but also any other version, only adding the path to its directory is needed.

#3 Testing

We use Karma to run tests in our project and it is really well supported in WebStorm by default. Unfortunately Visual Studio Code lacks some of that functionality:

• It just runs tests using task runner, there are no additional options in editor itself e.g. interactive list of all tests.
• It is not possible to quickly jump to a failed test file. There is only text output from Karma like when run from console.
• Code coverage for tests is not supported in the IDE.

#4 Performance

That can be one of the biggest advantages of Visual Studio Code. The truth is WebStorm is not the fastest IDE on the market. In smaller projects it’s usually fine, however noticeably slower than VSC. If the project is bigger it starts to slow down. For instance updating information from linters, after correcting a code error, can take more than several seconds. Another example can be the integrated TypeScript compiler which is a great tool but may need a few extra seconds to finish its job.

Visual Studio Code doesn’t seem to have those problems. It’s simply fast, there are no delays and everything gets updated almost immediately. Sure, one of the reasons for its fastness is probably the lack of some functionalities like the integrated TypeScript compiler, but even considering this it feels like Microsoft’s IDE is much faster.

#5 Other

• Debugging works similar, one difference is that in Visual Studio Code it needs to be configured manually by editing the configuration file, while in WebStorm it’s all done using GUI.
• Code completion works very similar in both IDEs, some shortcuts may be different but the more popular ones are the same (e.g. CTRL + Space opens list of suggestions). Emmet is supported and works the same.
• There are keyboard shortcuts for all important functions. Some of them are of course different, as those are different applications, but for people who would like to switch from WebStorm to Visual Studio Code there is even a plugin for the latter (“intellij-idea-keybindings”). Unfortunately some shortcuts (e.g. one of my favorites – CTRL + W for extending selection) works fine in JS or TypeScript files but not in HTML. Hopefully it will be improved.
• Many, if not all, advanced features of the editor, like multiple cursors or refactoring variables’ names, are supported in Visual Studio Code. It is fully featured editor.
• Both applications have support for GIT, though in WebStorm it’s easier to use. Almost every command has a GUI equivalent, however in some cases using the terminal is still necessary. One of the most useful tools is in my opinion the tool for solving merge conflicts.
• WebStorm offers project management support. It can for instance be integrated with JIRA, which can help switch tasks, register time spent on a specific task, etc. There are no such options in Visual Studio Code.
• All VSC settings have to be edited manually. Choosing the settings option from the menu simply opens the configuration file in the JSON format. WebStorm can be fully customized through GUI and has much more settings to play with.
• Currently in Visual Studio Code only up to three files can be open simultaneously and only as side by side view. Showing files in tabs, like in many other IDEs, is not supported but, according to the official website, the work on this feature has already started. WebStorm opens files in tabs and has some useful shortcuts to navigate through them.

To sum up, Visual Studio Code is a very interesting IDE with really good support for modern web technologies. If you’re working on a smaller project it may be the right tool for you. And it’s free! 🙂

WebStorm is definitely the more advanced of the two and has many useful features that not only make your work much easier but also save a lot of time. At the moment it is our IDE of choice but we’re looking forward to learning how Visual Studio Code will change in the near future and what new features it will have.

For now we are watching its development and looking at every new release with great interest.

Tags: Gdansk