Why I use Webstorm as my primary IDE for Javascript development

Note before I begin I will say the following also applies to the Jetbrains IDEA flagship product as it contains a superset of the functionality of webstorm.

TypeScript support

While I use gulp TypeScript tasks to compile the actual TypeScript into JavaScript and source maps, it is still useful to have the IDE understand the code and highlight errors, which I found to work great in Webstorm. Its on a par with the TypeScript editor inside visual studio.

IDE debugging without the need for sourcemaps.

Source maps are great for languages like typescript and coffee script but Jetbrains allows breakpoints to be hit in the browser and then capturing the line hit for IDE debugging, which gives a better debugging experience than the likes of chrome (still a great debugger I might add). However you will need to install some browser plugins for both Firefox and chrome to allow this to work.

Modern JavaScript frameworks and tooling support

Version 8 of Webstorm has a whole host of support for Js best practices, including angular support, bower, jasmine, cucumber, yomen and grunt to name a few. For large angular projects navigating directly to the source location of modules by clicking on the code is a great time saver as well as angular code completion.

Karma Unit testing integration

While you can follow the output of the karma test runner from the command line and browser output, I much prefer viewing the results in the IDE. Webstorm outputs Kamra results in a tool window and errors and failed tests allow click navigation to the relevant source files, saving time.

Indexing

Webstorm indexes all the folders that you want the IDE to include in your project. I’ve found thats JavaScript indexing is excellent and often understands what variables are defined and also has satisfactory code completion/tips for external JavaScript libraries (for example karma-jasmine) if you include it as a library in your project.

Eye pleasing syntax coloring and formating

Webstorm has around 8 web code themes which just make your JavaScript code a pleasure to look at. Also the inbuilt JavaScript code formatter works great and even works with .editorConfig files.

Eclipse keybaord shortcut themes

Having used Eclipse for most of my career I’ve gotten used to the Eclipse shortcuts. Jetbrains have a internal macro to apply the vast majority of useful eclipse shortcuts to the matching commands in Webstorm.

Git integration

Although you will still need to be familiar with the git command line commands to use git productively, Webstorm has lots of cool features which assist using git. The git log viewer is really handy and accurately shows the git branch and commit history in a tree view. Its also pretty smart about suggesting new git files to add and allows to click select multiple file to git add or commit. Although you will still need to use the command line for certain commands.