From WebStorm to VSCode: road to the freedom
Which IDE may help me the most throughout my JavaScript development as a fullstack JS developer?
This question represents the main question a fullstack JS developer may ask regarding the variety of IDEs that allow him to code in JavaScript. This story is not dedicated to do a comparison between these different IDEs. Indeed, I am going to share my story and why I have switched from WebStorm to Visual Studio Code.
Once I joined Linagora I found most of JS developers here were using WebStorm, so I have just started to use it as others. WebStorm is developed by JetBrains from which open source companies can ask for free licences. And this is the case of our company Linagora.
It was really cool to code in WebStorm, knowing the different number of plugins that are all available out-of-the-box. The killer-feature for me was the fact that I can write tests, run them and debug them directly from WebStorm. Such a feature helps any JS developer throughout the Test development development process.
However, as an open source lover, I was not really happy to use WebStorm. And each time I read the famous sentence about WebStorm mentioned on their site:
“WebStorm’s got you covered!” I am really confused.
If you are serious then why it is not open source. Why I should not see the code source so as to be sure that I am really get covered by WebStorm.
Meanwhile, I have heard a lot about VSCode so I decided to give it a try. The first impression I had once I started it the first time was: “OMG, it is so fast”. VSCode allows me to do the same operations I used to do with WebStorm but a way faster. So I decided to ensure that the killer-feature I look for in each IDE is supported by VSCode. Yes, you got it, I am speaking about testing and debugging directly from VSCode. To do so, I started to RTFM till I got everything configured. And it was really easy.
So if you are an open source lover like us, and you are using VSCode but you want to know how to configure it correctly, then you are welcome to continue on reading.
Configuring Mocha
To configure Mocha tests in VSCode, all what you have to do is to go to the Debug view and add a similar config into you .vscode/launch.json
Now you can run your Mocha tests directly from VSCode and you can add your lovely breakpoints directly in VSCode.
Configuring Karma
If you need to run your Karma tests and debug them directly from VSCode you should start by installing a Browser’s debugger from VSCode marketplace. I prefer using Debugger for Chrome extension. Once installed you can now configure a new type of configuration, called “Chrome” (see line 6 from the previous gist).
Add the following configuration to your .vscode/launch.json
You need also to add a new browser that supports debugging in your karma configuration file, as the following:
Finally, you should start your Karma server either from a terminal or as a VSCode task. Personally, I prefer running it as a VSCode task. To do so, you should add a task to your .vscode/tasks.json
That it is, run the task “karma debugger”, attach your debugger “Debug karma tests in Chrome”, add breakpoints, debug, feel the power and conquer the world.
Wrap up
IMHO, I think that each JS developer should give VSCode a try. Along the same lines, I really hope that this story could help you configuring VSCode to run tests and debug them directly from VSCode. Happy coding!
