New WebStorm 7: everything you need to hand

Hi, Habr!

We have released WebStorm 7 - a new version of our JavaScript IDE, and we are happy to tell you about what's new in it.

Of course, in the new WebStorm 7 you can rejoice at the support of new and sought-after technologies, for example, JavaScript templates, Stylus, Web Components. In addition, we have significantly reworked and improved the internal IDE tools, which should have a positive effect on the usability of WebStorm and on your productivity.

Javascript templates

First, WebStorm 7 introduced support for EJS templates: highlighting and adding pairs of EJS tags (which, by the way, can be specified in the settings), path resolve and refactoring for the import statement. Separately, you can customize the font, colors and indents in the ejs files.
')


We also added support for the Mustache template engine and its advanced version of Handlebars . WebStorm 7 understands the .mustache and .hbs files, formats them, and highlights the {{}} tags.

In all templates, of course, autocompletion works for HTML and JavaScript and error detection during editing.

Secondly, the new version has basic support for Web Components . WebStorm understands the new DOM elements defined by the developer, and offers them in autocompletion in the HTML and CSS files of the project.

Stylus and Compass

Some of the most important updates to WebStorm 7 concern CSS pre-processors.

We want to please you with the fact that WebStorm has added support for Stylus (which was recently told on Habré).
For code written in Stylus, the editor now supports syntax highlighting, autocompletion and formatting and automatically compiles code in CSS using File Watcher.

Another important update is support for the Compass framework, without which it is difficult to imagine working with Sass. WebStorm understands the import of Compass files in .sass and .scss files, supports definition, autocompletion, and search for functions, mixins, and variables from Compass.

Javascript

WebStorm 7 supports the latest version of TypeScript 0.9 , in which Generics appeared, changed the syntax of enums, and much more.

Another great JavaScript update in WebStorm is the integration of the Karma JavaScript testing tool, created by the AngularJS developers. Now you can easily run tests and view reports on the results in a convenient format right in the IDE. Together with Karma, istanbul can be used to analyze code coverage with tests, which support has also been added to the new WebStorm.

IDE Tools

With one click, you can go to the npm package manager in the WebStorm node.js packets. With it, you can easily search for node packages right in the IDE window, install them locally in the project and monitor their updates. Also, a built-in terminal has appeared in WebStorm 7.



An important change was in Live Edit: Live Edit is now available only in JavaScript debugging mode (using Google Chrome). You need to run Debug for any HTML file, and then all the results of your changes in the file will be immediately visible in the browser without reloading the page.

The changes affected the JavaScript debugger itself . First, a new tab, Elements, has appeared in the debugger for viewing changes in the DOM. Secondly, the presentation of variables was improved when debugging via Google Chrome and for debugging Node.js. For example, large arrays are now presented in a convenient grouped form, and the colors for the values ​​of variables of different types in the debugger are the same as the colors in the editor.

What's next?

Download the free 30-day trial version of WebStorm 7 on the product page , where you can learn more about the new version if you wish.

Upgrading to version 7 is free for anyone who has acquired a license after September 26, 2012.

We will be happy to answer your questions in the comments.
As usual, we are also waiting for comments and suggestions on the new version in our bug tracker .

Program with pleasure!
Your JetBrains WebStorm Team