New WebStorm 7: everything you need at your fingertips

Hello, 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 enjoy the support of new and popular technologies, for example, JavaScript templates, Stylus, Web Components . In addition, we have significantly redesigned and improved the internal IDE tools, which should have a positive effect on the usability of WebStorm and your productivity.

JavaScript templates

Firstly, support for EJS templates has appeared in WebStorm 7 : highlighting and addition of pairs of EJS tags (the appearance of which can be set in the settings, by the way), path resolve and refactoring for import statement. Separately, you can customize the font, colors and indents in ejs files.


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

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

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

Stylus and Compass

Some of the most important WebStorm 7 updates concern CSS preprocessors.

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

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


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

Another great JavaScript update to WebStorm is the integration of Karma's JavaScript testing utility , created by AngularJS developers. Now you can easily run tests and view results reports in a convenient format right in the IDE. Together with Karma, to analyze code coverage with tests, you can use istanbul , whose support is also added to the new WebStorm.

IDE Tools

With a single click, you can go to the node.js- npm package manager integrated into WebStorm . With it, you can easily search for node packages directly in the IDE window, install them locally in the project and monitor their updates. WebStorm 7 also has a built-in terminal.

An important change was Live Edit: Live Edit is now only available 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.

Changes affected JavaScript debugger itself . First, a new Elements tab has been added to the debugger to view changes in the DOM. Secondly, the presentation of variables was improved when debugging through 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 match 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 find out more about the new version if you wish.

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

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

Program with pleasure!
Your JetBrains WebStorm Team