WebStorm 9 beta, 139.12: inline variables view and fixes

WebStorm 9 release is around the corner, so it’s a perfect time for WebStorm 9 beta.
Go ahead and download WebStorm 9 beta (139.12), no active license required. If you find a new issue, please let us know by filing a bug.

This update brings lots of fixes and minor improvements covering basically every part of WebStorm.

To get a broad overview of all new features in WebStorm 9 please visit Coming in 9 page on the product website.

WebStorm 9 beta also brings one more great new feature – the Inline Variables View. This debugging feature integrates the Variables view right in the Editor, by showing variable values next to their usages.


Develop with pleasure!
– JetBrains WebStorm Team

Posted in Early Access Preview | 1 Comment

WebStorm 9 EAP, 138.2406: spy-js code completion, CSS3 enhancements, Scratch files and… JSX

It’s been some really busy weeks for the WebStorm team. And now it’s time for the next WebStorm 9 EAP build and more new features. And some of them are huge!
Here is just a quick overview:
- spy-js powered code completion and magnifier
- ES6 support in spy-js
- CSS3 support enhancements
- Scratch files
- new way of indexing project node modules
- Dart’s pub serve integration
- Web Starter Kit as a new project template

And one more thing: improved JSX support!

Go ahead and download WebStorm 9 EAP (138.2406).
We are waiting for your feedback in our issue tracker.

Continue reading

Posted in Early Access Preview | Tagged , , , , , | 14 Comments

Meteor Support in WebStorm 9

This post is part of a series of posts covering features in WebStorm 9 EAP:

One of the most requested features for WebStorm has been support for Meteor, a framework for building both the frontend and backend of web applications using JavaScript. If you’re not familiar with Meteor, make sure you check-out their screencast which gives a quick intro to what it is about.

With WebStorm 9, we provide support for Meteor.
Download the latest WebStorm 9 EAP build right now to give it a try. Check the screencast to see the new features available.

Continue reading

Posted in Cool Feature, Early Access Preview | Tagged | 58 Comments

WebStorm 9 EAP, 138.1988: Meteor support, Gulp and more

A couple of weeks ago we started the Early Access Program for WebStorm 9. Hopefully you are already enjoying WebStorm’s new features!

With the second EAP build we bring you more long-awaited features: support for Meteor, Gulp integration, and improved Polymer support.

Other updates include:
- support for tracing Karma tests with spy-js;
- saving and loading spy-js trace files;
- support for the latest Sass 3.4.

You can download WebStorm 9 EAP, 138.1988, from the Early Access Program page.

Meteor support

WebStorm now recognizes Meteor projects and helps you create them via the New project dialog. Code completion for Meteor API is provided thanks to a Meteor TypeScript definition file.


The key feature here is a special debug configuration for server-side Meteor code.


We’ll have a closer look at the workflow with Meteor in WebStorm in a later blog post, but feel free to try it right now and share your feedback with us.

Gulp integration


WebStorm 8 introduced Grunt support, but things are changing very fast in JavaScript world and now lots of projects are using Gulp as a build tool.

So, please welcome Gulp integration.

All tasks in your project gulpfile.js are listed in the Gulp tool window. Simply double-click the task name to start its execution.

However, unlike for Grunt integration, a new run configuration is created for every task, allowing you to run (Ctrl-Alt-R on Mac or Alt+Shift+F10 on Windows and Linux) or debug it with the familiar shortcuts.

Polymer support improvements

We’ve made improvements in Polymer support: now WebStorm better understands importing of custom elements, layout attributes and some of Polymer’s styling features. Also, the built-in debugger now stops on breakpoints inside element declaration.


For the full list of fixed issues please see the Release notes.

WebStorm 9 EAP (build 138.1988) is available for download from the Early Access Program page.

We’d really appreciate your feedback on these new features. You can post your comments here or in our issue tracker.

Please note that EAP builds do NOT require an active license and can be used for up to 30 days. To get notifications of new EAP builds as they become available, subscribe to the EAP channel in Settings | Updates.

To learn more about other WebStorm 9 features, please check these blog posts:

Develop with pleasure!
JetBrains WebStorm Team

Posted in Cool Feature | 45 Comments

JavaScript Postfix Completion

This post is part of a series of posts covering features in WebStorm 9 EAP:

It was bound to happen. Over a year ago we introduced the concept of Postfix code completion in ReSharper. A year later, it was introduced to IntelliJ IDEA 13, and today, we’re bringing Postfix code completion to JavaScript with WebStorm 9 EAP.

If you’re not familiar with it, here’s a glimpse into how it works:

Not Null

We are introducing a not null check after having typed the name of the argument. We do this by typing .notnull after the identifier.

Here is another example showing how we can do a for loop using .itin:

It In

The purpose behind Postfix completion is that often we realize that a certain construct has to be created when writing code, and this provides a more efficient way, as opposed to messing around with the cursors keys or mouse to position the caret in a specific place. If you think about it, it’s pretty similar to Live Templates, except that you’re invoking them after having written some code.

In addition to the above two completions, WebStorm provides the following postfix completions:

Postfix list

each of which can be activated or deactivated via Preferences | Editor | Postfix completion.

We can also invoke a list of completions available using the Cmd+J key (Ctrl+J on Windows), which invokes the Live Template insertion menu.

Try it out in the recently opened WebStorm 9 EAP and let us know what you think. If you have any suggestions on some completions you’d like, also let us know. You can either leave them as comments here or file in an issue in YouTrack.

Develop with pleasure!
JetBrains WebStorm Team

Posted in Cool Feature, Early Access Preview | 21 Comments

Tracing, debugging and profiling Node.js with spy-js

This post is part of a series of posts covering features in WebStorm 9 EAP:

spy-js for JavaScript and Node.js Spy-js, our “secret agent”, has done a great job at tracing, debugging and profiling front-end JavaScript code. With WebStorm 9 EAP, we’re expanding its job: there is no back-end Node.js code our 007 can’t infiltrate.

As a refresher, spy-js was introduced with WebStorm 8. It allows tracing our code without resorting to console.log, debugging it without breakpoints and profiling it without any specialized tools. When running our application with spy-js, it gathers intelligence which we can use to see exactly what was going on in our code, even if it’s no longer running.

Let’s pour a Vodka-Martini (shaken, not stirred) and see how we can use spy-js for tracing, debugging and profiling Node.js apps.

Continue reading

Posted in Cool Feature, Early Access Preview | Tagged , , , , , | 27 Comments

Live Edit Updates in WebStorm 9 — What’s New?

This post is part of a series of posts covering features in WebStorm 9 EAP:

WebStorm 9 brings a highly demanded new feature: Live Edit for Node.js. With this powerful functionality, WebStorm can now automatically update your Node.js application or restart Node.js server on any changes.
You can download WebStorm 9 EAP right now.

With changes in HTML, CSS and JavaScript code on the client side Live Edit updates the contents of your web page in the browser without reloading. When working with Node.js, Live Edit first tries to update the app incorporating your changes without restarting the Node.js server; if hotswap fails, the server is restarted.

To make Live Edit work consistently and transparently for both client-side and server-side code, we’ve significantly reworked Live Edit configurations.

Let’s have a closer look at new Live Edit.

To use Live Edit, start a JavaScript or Node.js debug session. Accordingly, all Live Edit configurations are available in Preferences | Debugger | Live Edit.

Live Edit can work in two different modes: Auto or Manual.


Continue reading

Posted in Cool Feature | 17 Comments

WebStorm 9 EAP is Open!

Please give a warm welcome to the Early Access Program for WebStorm 9!
Go ahead and download WebStorm 9 EAP right now.


As you may remember, back in May we published our development roadmap for the next version of WebStorm, featuring Meteor support, Gulp integration, spy-js for Node.js and other exciting new features.

While some of the features in that list are still cooking and going to be introduced in the following EAP builds, here is a list of new features you can already try:

- Updated Live Edit feature that can now automatically update your Node.js app on any changes
- Spy-js for Node.js applications
- PhoneGap/Cordova integration
- Postfix templates for JavaScript
- Improved Editorconfig plugin

Let’s have a closer look at some of these new features. Of course, later we’ll follow up with more blog posts to provide a more detailed overview of all new features.
Continue reading

Posted in Early Access Preview | Tagged , , , , , | 67 Comments

Code Quality Analysis in WebStorm

WebStorm comes with many powerful tools to assure the high quality of your code base.

Dozens of built-in inspections are enabled by default. These static code analysis tools help you find probable bugs, detect performance issues and improve the overall code structure right as you write the code. You can also use the integrated code quality tools: JSHint or JSLint.

Inspections are available for all languages supported by WebStorm, including JavaScript, Node.js, HTML, CSS, Less, Sass, TypeScript, CoffeeScript and Dart.

Built-in inspections help you detect errors and potential problems, from obvious ones like a missing semicolon to more complex issues like unresolved methods in JavaScript and mismatching types when type info is available.

On-the-fly code analysis

Here are several examples of inspections in JavaScript:



And in Less:


The description of the error shows up when you hover the mouse over the highlighted code.

Continue reading

Posted in Cool Feature, Tutorials | Tagged , , | Leave a comment

How WebStorm Works: Completion for JavaScript Libraries

One of the essential features of WebStorm’s editor is code completion. The way it is implemented in WebStorm is that it takes all JavaScript files in the project and goes through them, adding functions and methods to an internal index used for code completion suggestions. The index is automatically updated whenever existing files are changed or new files are added.


JSDoc, used for documenting code, also plays an important role in making your coding experience better. It powers WebStorm autocompletion with additional details about parameters and their types.


But what if you have only minified files included, or if all the libraries are loaded dynamically? In this case it would be impossible for the IDE to statically analyse them and provide the necessary level of code completion when you press Ctrl+Space, or to resolve functions and methods you use.

This is where we introduce the concept (or mechanism) of External libraries that we use in WebStorm.

External libraries

External libraries are files explicitly added to project’s index to be used only in enhancing coding assistance (i.e. code completion, syntax highlighting, navigation, and documentation lookup). They are not to be edited in the scope of this project.

To make this concept clearer, let’s see how it works on a real project. Here is a simple project using the Famous framework for UI (same as on the screenshots above).

Continue reading

Posted in Cool Feature, Tutorials | Tagged , | 18 Comments