Meet WebStorm 8: AngularJS support, spy-js, Grunt integration, and more.
So it's time for the WebStorm Spring Update, our IDE for front-end development and Node.js.
The new WebStorm 8 has support for the AngularJS framework , JavaScript tracer spy-js , long-awaited multiple cursors in the editor, integration of Grunt and Bower, and many more interesting innovations and improvements.
Now about everything in order.
Experienced WebStorm users and AngularJS fans probably know that a plugin has been available in WebStorm before for this framework. Seeing the growing interest in AngularJS, we decided to take on our own support.
Now in projects with AngularJS in HTML-files auto-completion has been added for AngularJS directives, names of declared controllers and applications, as well as for data bindings inside curly braces.
')
In this case, WebStorm will check if the use of the directive in this tag is correct in accordance with the documentation of AngularJS.
By the way, AngularJS documentation can be easily accessed without leaving WebStorm using the Quick Documentation Lookup ( ctrl-J on Mac, Ctrl + Q on Windows and Linux) or, on the contrary, by going to the AngularJS website using Shift + F1 .
Controller name navigation works both from the HTML file and through Search everywhere (the search string is available by double-clicking 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 for the AngularJS plugin is available on GitHub . We hope that it can serve as an example for creating new plug-ins to support other frameworks.
Spy-js is a powerful tool for tracing and profiling JavaScript.
Spy-js is useful for a better understanding of code execution, error detection, as well as code fragments, which took a particularly long time to complete.
By running the spy-js run-configuration, in the appeared window you can view the full list of events occurring on the site opened in any browser on the computer (or even on a mobile device ). For the event list, filters by event name or file name are available.
For each event, you can view the full event call stack and see in the editor window the highlighted path in the code indicating how exactly this script was executed.
For spy-js to work, you need to 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 introduced the ability to edit code using multiple cursors , as well as the function of multiple selection .
It works like this (there are slight differences in the Shotcats from IntelliJ IDEA):
- cursor placement: Alt + Click ;
- add the following match to the selection: Alt + J for Windows and Ctrl-G for Mac;
- remove coincidence from selection: Alt + Shift + J for Windows and Ctrl - Shift - G for Mac;
- delete all selections and cursors: Esc ;
- clone the cursor above / below (hot keys have not yet been assigned).
We decided to start integrating systems for building JavaScript projects with Grunt support.
In the special console you can see a list of all tasks declared in the grunt files of the project. By double clicking you can start any task or group of tasks.
Integration of Bower , a dependency manager for web projects, allows you to search for and install new packages right in the IDE, automatically updating the bower.json project file. Bower is available in Setting | Javascript
The console in JavaScript and Node.js debugger now works similarly to the console in the browser, now it can execute JavaScript code.
Another new feature in WebStorm 8: CucumberJS support - BDD testing utilities. WebStorm understands the Gherkin language and allows you to easily create new steps to implement the planned functionality ( step definitions ). Test results will be presented in a convenient format in the IDE window.
In this update, we tried to improve the support of technologies for working with the modular structure of JavaScript: RequireJS, AMD and EcmaScript 6 Harmony modules , by adding navigation to the associated files.
In this update, we supported all the innovations and changes in LESS , including the most recent version 1.7, released recently.
From the version of Sass 3.3 in WebStorm 8 is now supported: the @ at-root directive, @each on several collections and the ! Global flag for variables. Full support for Sass 3.3 will be in the next WebStorm update.
Learn more about the new version and download a free 30-day trial version of WebStorm 8, as well as watch a video about new features on the product page .
Upgrading to version 8 is free for anyone who purchased a license after March 26, 2013.
We will be happy to answer your questions in the comments.
Remarks and suggestions for the new version are also waiting for us in our bug tracker .
The new WebStorm 8 has support for the AngularJS framework , JavaScript tracer spy-js , long-awaited multiple cursors in the editor, integration of Grunt and Bower, and many more interesting innovations and improvements.
Now about everything in order.
AngularJS support
Experienced WebStorm users and AngularJS fans probably know that a plugin has been available in WebStorm before for this framework. Seeing the growing interest in AngularJS, we decided to take on our own support.
Now in projects with AngularJS in HTML-files auto-completion has been added for AngularJS directives, names of declared controllers and applications, as well as for data bindings inside curly braces.
')
In this case, WebStorm will check if the use of the directive in this tag is correct in accordance with the documentation of AngularJS.
By the way, AngularJS documentation can be easily accessed without leaving WebStorm using the Quick Documentation Lookup ( ctrl-J on Mac, Ctrl + Q on Windows and Linux) or, on the contrary, by going to the AngularJS website using Shift + F1 .
Controller name navigation works both from the HTML file and through Search everywhere (the search string is available by double-clicking 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 for the AngularJS plugin is available on GitHub . We hope that it can serve as an example for creating new plug-ins to support other frameworks.
Spy js
Spy-js is a powerful tool for tracing and profiling JavaScript.
Spy-js is useful for a better understanding of code execution, error detection, as well as code fragments, which took a particularly long time to complete.
By running the spy-js run-configuration, in the appeared window you can view the full list of events occurring on the site opened in any browser on the computer (or even on a mobile device ). For the event list, filters by event name or file name are available.
For each event, you can view the full event call stack and see in the editor window the highlighted path in the code indicating how exactly this script was executed.
For spy-js to work, you need to 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 introduced the ability to edit code using multiple cursors , as well as the function of multiple selection .
It works like this (there are slight differences in the Shotcats from IntelliJ IDEA):
- cursor placement: Alt + Click ;
- add the following match to the selection: Alt + J for Windows and Ctrl-G for Mac;
- remove coincidence from selection: Alt + Shift + J for Windows and Ctrl - Shift - G for Mac;
- delete all selections and cursors: Esc ;
- clone the cursor above / below (hot keys have not yet been assigned).
Grunt integration
We decided to start integrating systems for building JavaScript projects with Grunt support.
In the special console you can see a list of all tasks declared in the grunt files of the project. By double clicking you can start any task or group of tasks.
Bower Integration
Integration of Bower , a dependency manager for web projects, allows you to search for and install new packages right in the IDE, automatically updating the bower.json project file. Bower is available in Setting | Javascript
Updated console in debugger
The console in JavaScript and Node.js debugger now works similarly to the console in the browser, now it can execute JavaScript code.
BDD testing with CucumberJS
Another new feature in WebStorm 8: CucumberJS support - BDD testing utilities. WebStorm understands the Gherkin language and allows you to easily create new steps to implement the planned functionality ( step definitions ). Test results will be presented in a convenient format in the IDE window.
Javascript
In this update, we tried to improve the support of technologies for working with the modular structure of JavaScript: RequireJS, AMD and EcmaScript 6 Harmony modules , by adding navigation to the associated files.
LESS and Sass
In this update, we supported all the innovations and changes in LESS , including the most recent version 1.7, released recently.
From the version of Sass 3.3 in WebStorm 8 is now supported: the @ at-root directive, @each on several collections and the ! Global flag for variables. Full support for Sass 3.3 will be in the next WebStorm update.
What's next?
Learn more about the new version and download a free 30-day trial version of WebStorm 8, as well as watch a video about new features on the product page .
Upgrading to version 8 is free for anyone who purchased a license after March 26, 2013.
We will be happy to answer your questions in the comments.
Remarks and suggestions for the new version are also waiting for us in our bug tracker .
Source: https://habr.com/ru/post/217447/
All Articles