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 | 77 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 | 50 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 | 23 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 | 21 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 , , | 2 Comments

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 , | 22 Comments

The Brunch Build Tool

This is a guest post by Michael Schmatz, Lead Developer at CodeCombat

One of the most important parts of CodeCombat’s development workflow is Brunch. In this post I’ll tell you why CodeCombat chose Brunch, run through setting up a basic Brunch project, explain CodeCombat’s Brunch configuration, and compare Brunch to several popular alternative build systems.

CodeCombat loves Brunch

Why CodeCombat uses Brunch

In early 2013, CodeCombat was just getting started. One of the cofounders, Nick, wanted a workflow skeleton to kickstart development. After examining several different tools, including Brunch and Yeoman, he ended up choosing Brunch, mainly because of the awesome project skeletons available.

As time went on and the build times grew and grew, we appreciated one design choice of Brunch more and more: incremental rebuilding and caching. For small projects, the time difference between partial and complete rebuilds isn’t very significant. However, for large projects, long build times can be very detrimental to developer efficiency and happiness. Doing a complete rebuild of CodeCombat can take a few minutes on older computers, whereas partial rebuilds only take a few seconds, if that. Such responsiveness is integral to our development process.

Setting up a basic Brunch project

First, we need to install Brunch. Once you have npm installed, just run:

To get us started, we can use Brunch’s built in skeleton installer. There are many skeletons to choose from; I chose one of the more popular ones that includes AngularJS, CoffeeScript, LESS, and Jade.

All we have to do now is start Brunch. Move into the new directory, and then start the Brunch watcher/server.

Now any time we make a change to our app, Brunch will automatically recompile the files that changed, rebuild the app, and refresh the page. On my machine, this takes only about 70ms.

Let’s change the header on the front page. Open up your favorite IDE and start editing app/partials/todo.jade. In addition, open a web browser to the URL Brunch provided, in my case, http://localhost:3333.


Notice how, if you change something, for instance the <h2>, the app automatically is rebuilt and the page refreshes.

Continue reading

Posted in Cool Feature | Tagged , , | 2 Comments