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.
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.
You can use also the annotate the function to see who has made the laste changes in the line.
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 “ngcontroller”.
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.
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.