Early Access Program

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.

Spy-js powered code completion

Spy-js, our almighty JavaScript tracing tool, gains even more powers.

Now spy-js uses the collected data from the code execution to enhance code completion when you start editing your code. Autocomplete information reflects the reality of executed code, so that it tells you very precisely what is available, even when the standard autocompletion cannot do it for whatever reason.


Here is an example where spy-js autocomplete lists all the properties of the function execution result:


Here’s another example showing how spy-js works with your client-side JavaScript:


This is just a quick overview, and we’ll talk more about this new feature in a follow-up blog post.

Please note that you need to have a running spy-js session for that, and spy-js enhances completion only for the scopes that were already executed. Also, to use this feature and spy-js magnifier, you’ll need to enable both (just once) by selecting “Enable spy-js autocomplete and magnifier” action in the Event pane toolbar menu before starting the session.

Spy-js magnifier

Spy-js magnifier allows you to evaluate any expression from any context of the opened source file without breakpoints while a spy-js session is running. Just hover the mouse over any expression in any executed context/scope (or press cmd-alt-F8 on Mac or Ctrl+Alt+F8 on Windows or Linux) to get the current (latest) value for the expression.


Support for ES6 in spy-js

Spy-js can now work with EcmaScript 6 features including generators, yield and other features available in Node.js v0.11.x (with –harmony flag) and some browsers.

CSS3 support enhancements

WebStorm now supports the latest CSS3 specifications. This means that now you’ll get advanced coding assistance for CSS3 properties and values including autocompletion and lots of on-the-fly inspections.


Scratch files

The so-called Scratch Files is a very handy feature that helps you experiment and prototype. Use it to sketch something really quick right in the editor, without modifying your project or creating any files, while WebStorm provides all of the coding assistance features available.

Go to the Tools menu and select Create Scratch file with the language you need or simply press shift-cmd-N on Mac or Ctrl+Alt+Shift+Insert on Windows or Linux.


Indexing node modules

With having a Node.js module for basically everything now, the average size of a project node_modules folder has increased significantly. So, WebStorm now indexes only top level modules in node_modules folder which leads to faster project startup.

The downside is that now you won’t be able to get full coding assistance and navigation deeply through module’s sources. You can always enable full indexing in Preferences | Languages and Frameworks | Node.js and npmIndex internal node modules.


Dart’s pub serve integration

For Dart projects we’ve added seamless integration with pub serve. Now when you open your Dart app in the browser from the IDE or start a debug session, WebStorm will automatically run pub serve command first.

The WebStorm’s built-in web-server will behave like a proxy. Any messages from the pub serve execution will be shown in the corresponding tool window.

Improved JSX support

We are really happy to announce that we’ve made some improvements in JSX support in WebStorm. Yeah, we did it!

If you’re working with a React project in WebStorm, note that to get JSX support you need to change the JavaScript version in Preferences | Languages and Frameworks | JavaScript to JSX Harmony (that should work if you’re using ES5.1 or ES6 features).


From now on you can enjoy coding assistance for JSX including syntax highlighting, code completion and inspections.


Code completion works for JavaScript expressions in JSX as well as:


You can navigate to the component definition from the code and even do some refactoring:


Please note this area if still a work in progress and there are some known limitations like unresolved component names for the JSX code inside <script/> tag in HTML files and debugging issues.

Download WebStorm 9 EAP (138.2406) or install an update available for the previous EAP build, look through the release notes and try the new features. We’re waiting for your feedback, bug reports and issue requests on our issue tracker.

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

Develop with pleasure!
JetBrains WebStorm Team

Comments below can no longer be edited.

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

  1. Avatar

    m.e. says:

    September 22, 2014

    You are a way ahead your time (we already know…). From the Webstorm EAP dowload page:

    Download WebStorm 9 (build 138.2406, October, 22nd 2014)

    Happily trying out the new release.

    • Ekaterina Prigara

      Ekaterina Prigara says:

      September 22, 2014

      Oh, yeah, time travel is the only way to add all these new features in a such limited time)
      I’ll fix that, thanks!

  2. Avatar

    Anthony says:

    September 22, 2014

    You guys are rocking it, keep up the great work!

  3. Avatar

    KSJ says:

    September 22, 2014

    Happily trying out release as well. Keep on going with Polymer enhancements please! 😉

    • Ekaterina Prigara

      Ekaterina Prigara says:

      September 22, 2014

      Let us know about features missing or any bugs on the issue tracker.

  4. Avatar

    Vladimir Varankin says:

    September 22, 2014

    A separate code style for JSON files?–I love you WebStorm Team! <3

  5. Avatar

    steve says:

    September 23, 2014

    How do I bring up a command line on an execution context in the code? I’d like to be able to type in JS code inside functions to see what is going on in there.

    • Avatar

      Artem Govorov says:

      September 23, 2014

      Not exactly a command line – but after the code executed via running spy-js session, you can start typing/editing any code in any executed function and use magnifier to execute new code by selecting it and pressing Cmd-Alt-F8 on Mac or Ctrl+Alt+F8 on Windows or Linux. You can later delete the code if you don’t need it.

      • Avatar

        steve says:

        September 23, 2014

        Gonna need a video of that, I think… I’m running express then a spy-js proxy. Connected, got traces, can view events and execution paths.

        But trace files are read-only, and hovering in source shows no variable information. Evaluate expression seems to be in global scope.

        • Avatar

          Artem Govorov says:

          September 23, 2014

          There’ll be a blog post with some more details later. Trace files are read-only, but magnifier (and autocomplete) are supposed to work in source files (try keyboard shortcuts if hovering doesn’t work). Does spy-js powered autocomplete work for you in executed scopes or both magnifier and autocomplete don’t work? Did you select “Enable spy-js autocomplete and magnifier” in the Event pane toolbar menu before starting the session?

  6. Avatar

    Ferran Negre says:

    September 29, 2014

    Hello! Thank you for more JSX/React support. However, the way you comment a component children in React: http://facebook.github.io/react/docs/jsx-in-depth.html “{/* child comment, put {} around */}” , Webstorm is still saying that it is an error. Is there any story open for this issue?

  7. Avatar

    arcseldon says:

    October 24, 2014

    Awesome work on Webstorm 9. As an engineer, there is a short list of tools that you must be rabid about. Rabid. Foaming at the mouth crazy. For me, Webstorm is right up there. Thank you!

    • Ekaterina Prigara

      Ekaterina Prigara says:

      October 24, 2014