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.

spyjs-express-simple

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

spyjs-express-fs

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

spyjs-angular

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.

spyjs-magnifier

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.

css-mismatched-param

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.

newscratch

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.

npmindex

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).

jsx-tags

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

jsx-tags

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

jsx-js-completion

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

refactor-react-component

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

About Ekaterina Prigara

Ekaterina Prigara is WebStorm product marketing manager at JetBrains. She's passionate about new technologies, UX and coffee.
This entry was posted in Early Access Preview and tagged , , , , , . Bookmark the permalink.

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

  1. m.e. says:

    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 says:

      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. Anthony says:

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

  3. KSJ says:

    Happily trying out release as well. Keep on going with Polymer enhancements please! ;-)

  4. Vladimir Varankin says:

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

  5. steve says:

    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.

    • 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.

      • steve says:

        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.

        • 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. Ferran Negre says:

    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. arcseldon says:

    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!

Leave a Reply

Your email address will not be published. Required fields are marked *