Awesome features of WebStorm that speed up our development workflow

WebStorm

We are mainly using WebStorm for our Projects at M­-Way Solutions, because it gives us the power to create new and maintain existing web projects fast and efficiently. Most of the projects are produced in teams using GIT for Version control and AngularJS as core framework. For a better collaboration and faster workflow we need a good code editor. In the following example we want to show, how we at M­-Way Solutions are profit from the WebStorm AngularJS and GIT support and how we are using it to improve our code quality by using WebStorm 9.0.

1. Jshint/JSCS

When it comes to larger projects with multiple team members it is important to have coding conventions. The most easiest way to improve code quality is to define some jshint rules. To enforce the rules to all team members you can use a grunt jshint task that will be run before you build the project or a pre commit hook so nobody can commit code that has not passed the jshint test.
Besides the build task or pre commit hook you want to have immediate feedback during programming that your code complies to your coding conventions. Sure you could set up a watch task that runs the jshint task every time a file changes. But the more your project grows and the more files are involved the longer it takes to check all your files and at certain point it will break your workflow.
The more convenient way to check your files against jshint/jscs conventions is to use the WebStorm internal code inspector. It is not only capable to check if your code contains javascript errors it can also check your files against defined jshint/jscss rules. You can even use the .jsconfig file to set the rules how the WebStorm jshint tool should validate our files. The following gif shows you how to setup the jshint tool in WebStorm.

enable_jshint

2. Git Support

Another important feature of WebStorm for team collaboration are the tools for version control systems like SVN and GIT. We are using mainly GIT so i’m going to go into the GIT tools mainly but for SVN it works quite similar.
For code review the show history function is very good.

show_history

You can use also the annotate the function to see who has made the laste changes in the line.

annotate

It is even possible to directly navigate to the Github page of that file to write comments in case it is a Github project. Of course you can do all the other git stuff as well like commiting changes, compare changes with a specific branch, revert files, merge conflicts, etc. It is very handy when you are working in a larger team.

3. Angular Support

Since version 8.0 WebStorm provides integration with AngularJS by default. Besides the code completion for Angular’s own “ng” directives, WebStorm also suggests names of your own custom directives which is quite helpful if you write a lot of them or if you use third party modules. Code completion also works for controller names when they are included with “ng­controller”.

autosuggest

The probably most time saving feature when working with AngularJS in WebStorm is the quick navigation between components. By holding down the ‘cmd’ key on Mac or ‘ctrl’ on Windows machines WebStorm transforms directives, templates, and service functions in clickable links which let you jump directly to the components code. For example, if you use a directive in one of your templates and want to know which parameters the directive exposes and how the template of the directive looks like, you can simply press ’cmd’/’ctrl’ and click on the directive’s name. This will open the directives definition. Another click on the templateUrl property of your directive (again with ‘cmd) opens the template file. In combination with the previous cursor position shortcut (‘alt’ + ‘cmd’ + arrow left) you get a powerful tool to navigate through your angular components without searching for a single file name. The quick navigation feature also works for templateUrl and controller names in route definitions.

quicknavigation

All in all they guys at WebStorm did a decent job to speed up the daily development workflow and we are looking forward for the next version update of WebStorm.

Leave a Reply

Your email address will not be published. Required fields are marked *