March 28, 2014 at 16:38Meet WebStorm 8: AngularJS support, spy-js, Grunt integration, and more
So it's time for the spring update of WebStorm, our IDE for front-end development and Node.js.
The new WebStorm 8 includes support for the AngularJS framework , spy-js JavaScript tracer , long-awaited multiple cursor cursors in the editor, Grunt and Bower integration, and many more interesting innovations and improvements.
Now, first things first.
Experienced WebStorm users and fans of AngularJS probably know that a plug-in for this framework was previously available in WebStorm. Seeing the growing interest in AngularJS, we decided to take up its support ourselves.
Now in projects with AngularJS, HTML completion has added auto-completion for AngularJS directives, the names of declared controllers and applications, as well as for data bindings inside curly brackets.
At the same time, WebStorm will check whether the use of the directive in this tag is correct in accordance with the AngularJS documentation.
By the way, AngularJS documentation can be easily accessed without leaving WebStorm using Quick Documentation Lookup ( ctrl-J on Mac, Ctrl + Qon Windows and Linux) or, conversely, by going to the AngularJS website using the combination of Shift + F1 .
Navigating controller names works both from an HTML file and through Search everywhere (the search bar is available by double-pressing Shift) and Go to symbol ( alt-cmd-O on Mac or Ctrl + Alt + Shift + N on Windows and Linux) . For ngView and $ routeProvider , navigation to the template file works.
The source code of the plugin for AngularJS is available on GitHub . We hope that it can serve as an example for creating new plugins to support other frameworks.
Spy-js is a powerful tool for tracing and profiling JavaScript.
Spy-js comes in handy for a better understanding of code execution, error detection, as well as code fragments that took a particularly long time to complete.
By running spy-js run-configuration, in the window that appears, you can view the full list of events occurring on the site open in any browser on the computer (or even on the mobile device ). Filters are available for the list of events by event name or by file name.
For each event, you can view the full event call stack and see in the editor window a highlighted path in the code indicating exactly how this script was executed.
For spy-js to work, you must configure the system proxy on your computer, but spy-js can do this automatically . You can see spy-js in action in this video demo .
WebStorm 8 introduces the ability to edit code using multiple cursors , as well as a multiple selection function .
It works like this (there are slight differences in shortcuts from IntelliJ IDEA):
- placement of cursors: Alt + Click ;
- add the following match to the selection: Alt + J for Windows and Ctrl - G for Mac;
- remove the match from the selection: Alt + Shift + J for Windows and Ctrl - Shift - G for Mac;
- delete all selections and cursors: Esc ;
- clone the cursor higher / lower (hot keys have not been assigned yet).
We decided to start integration of build systems for JavaScript projects with support for Grunt .
In a special console, you can see a list of all tasks declared in the project grunt- files. By double-clicking, you can start any task or group of tasks.
The integration of Bower , a dependency manager for web projects, allows you to search for and install new packages directly in the IDE, automatically updating the bower.json project file . Bower Available at Setting | JavaScript .
The console in JavaScript and Node.js debugger now works similarly to the console in the browser, now you can execute JavaScript code in it.
Another innovation in WebStorm 8: support for CucumberJS - utilities for BDD testing. WebStorm understands the Gherkin language and makes it easy to create new steps for implementing the intended functionality ( step definitions ). Test results will be presented in a convenient format in the IDE window.
In this update, we tried to improve support for technologies for working with the modular JavaScript structure: RequireJS, AMD and EcmaScript 6 Harmony modules , adding navigation to the associated files.
In this update, we have supported all the innovations and changes in LESS , including the latest version 1.7, released recently.
From Sass 3.3 , WebStorm 8 is now supported: the @ at-root directive , @each for several collections and the ! Global flag for variables. Full support for Sass 3.3 will be in the upcoming WebStorm update.
You can learn more about the new version and download the free 30-day trial version of WebStorm 8, as well as watch the video about new features on the product page .
Upgrading to version 8 is free for anyone who has purchased a license after March 26, 2013.
We will be happy to answer your questions in the comments.
We are waiting for comments and suggestions on the new version in our bug tracker .
The new WebStorm 8 includes support for the AngularJS framework , spy-js JavaScript tracer , long-awaited multiple cursor cursors in the editor, Grunt and Bower integration, and many more interesting innovations and improvements.
Now, first things first.
AngularJS Support
Experienced WebStorm users and fans of AngularJS probably know that a plug-in for this framework was previously available in WebStorm. Seeing the growing interest in AngularJS, we decided to take up its support ourselves.
Now in projects with AngularJS, HTML completion has added auto-completion for AngularJS directives, the names of declared controllers and applications, as well as for data bindings inside curly brackets.
At the same time, WebStorm will check whether the use of the directive in this tag is correct in accordance with the AngularJS documentation.
By the way, AngularJS documentation can be easily accessed without leaving WebStorm using Quick Documentation Lookup ( ctrl-J on Mac, Ctrl + Qon Windows and Linux) or, conversely, by going to the AngularJS website using the combination of Shift + F1 .
Navigating controller names works both from an HTML file and through Search everywhere (the search bar is available by double-pressing Shift) and Go to symbol ( alt-cmd-O on Mac or Ctrl + Alt + Shift + N on Windows and Linux) . For ngView and $ routeProvider , navigation to the template file works.
The source code of the plugin for AngularJS is available on GitHub . We hope that it can serve as an example for creating new plugins to support other frameworks.
Spy-js
Spy-js is a powerful tool for tracing and profiling JavaScript.
Spy-js comes in handy for a better understanding of code execution, error detection, as well as code fragments that took a particularly long time to complete.
By running spy-js run-configuration, in the window that appears, you can view the full list of events occurring on the site open in any browser on the computer (or even on the mobile device ). Filters are available for the list of events by event name or by file name.
For each event, you can view the full event call stack and see in the editor window a highlighted path in the code indicating exactly how this script was executed.
For spy-js to work, you must configure the system proxy on your computer, but spy-js can do this automatically . You can see spy-js in action in this video demo .
Multiple Cursors and Multiple Selection
WebStorm 8 introduces the ability to edit code using multiple cursors , as well as a multiple selection function .
It works like this (there are slight differences in shortcuts from IntelliJ IDEA):
- placement of cursors: Alt + Click ;
- add the following match to the selection: Alt + J for Windows and Ctrl - G for Mac;
- remove the match from the selection: Alt + Shift + J for Windows and Ctrl - Shift - G for Mac;
- delete all selections and cursors: Esc ;
- clone the cursor higher / lower (hot keys have not been assigned yet).
Grunt Integration
We decided to start integration of build systems for JavaScript projects with support for Grunt .
In a special console, you can see a list of all tasks declared in the project grunt- files. By double-clicking, you can start any task or group of tasks.
Bower Integration
The integration of Bower , a dependency manager for web projects, allows you to search for and install new packages directly in the IDE, automatically updating the bower.json project file . Bower Available at Setting | JavaScript .
Updated console in the debugger
The console in JavaScript and Node.js debugger now works similarly to the console in the browser, now you can execute JavaScript code in it.
BDD testing with CucumberJS
Another innovation in WebStorm 8: support for CucumberJS - utilities for BDD testing. WebStorm understands the Gherkin language and makes it easy to create new steps for implementing the intended functionality ( step definitions ). Test results will be presented in a convenient format in the IDE window.
Javascript
In this update, we tried to improve support for technologies for working with the modular JavaScript structure: RequireJS, AMD and EcmaScript 6 Harmony modules , adding navigation to the associated files.
LESS and Sass
In this update, we have supported all the innovations and changes in LESS , including the latest version 1.7, released recently.
From Sass 3.3 , WebStorm 8 is now supported: the @ at-root directive , @each for several collections and the ! Global flag for variables. Full support for Sass 3.3 will be in the upcoming WebStorm update.
What's next?
You can learn more about the new version and download the free 30-day trial version of WebStorm 8, as well as watch the video about new features on the product page .
Upgrading to version 8 is free for anyone who has purchased a license after March 26, 2013.
We will be happy to answer your questions in the comments.
We are waiting for comments and suggestions on the new version in our bug tracker .