WebStorm 10 EAP

It’s February already and we can’t wait any longer for the Early Access Program for WebStorm 10 to start!

Go ahead and download the first WebStorm 10 EAP build (140.2167) right now! EAP builds do not require an active license.

webstorm-10-eap

Even though we haven’t announced a development roadmap for WebStorm 10, there are so many exciting ideas on our mind. But before starting to work on any new features, we decided that the first and top priority should be to bring the long-awaited JavaScript support update and other important improvements to the IDE.

New features will be announced as the Early Access Program goes on. We look forward to your feedback and bug reports in our issue tracker.

JavaScript support improvements

For WebStorm 10, the team has completely reworked the core of our JavaScript support—the way JavaScript files are indexed. These changes are not visible at first sight, but affect the response time from code completion, structure view, as well as the time required for file highlighting, resolve and quality analysis.

We’ll post performance benchmarks later. Please let us know if you get any unresolved or red code.

HTML editing improvements

Synchronous HTML tag editing

As you edit an opening tag in HTML, the corresponding closing tag is edited automatically. To enable this feature, go to Preferences | Editor | General | Smart keys – Simultaneous <tag></tag> editing.

html-tag-editing

Emmet edit points

The newly added actions are Navigate to the next Emmet edit point (Ctrl-Alt-Right Arrow on Mac, or Alt+Shift+[ on Windows/Linux) and Navigate to the previous Emmet edit point (Ctrl-Alt-Left Arrow, or Alt+Shift+] on Windows/Linux). Use them to jump between points in your HTML code such as tags and empty attributes, to add values.

emmet-edit-point-upd

spy-js: advanced search and source map support

Source map support

spy-js now supports source maps, meaning that you can now jump from the event stack right to the original source code (Jump to Mapped Trace action) in ECMAScript 6, TypeScript or CoffeeScript and observe what code fragments were executed. Alternatively, you can Jump to Trace to see the executed JavaScript code.

spy-js-jump-to-mapped-trace

The support has to be enabled from Events toolbar setting, by selecting Enable source maps support.

spy-js-enable-source-map-support

Stay tuned for a more detailed blog post on the new spy-js features.

Advanced trace search

With advanced trace search and navigation, you can efficiently move through the whole trace. 6 actions are possible: move to the next/previous call in the next/current/previous function in the file. The full list of actions is available from the stack node context menu; some actions are also available from the navigation toolbar above the stack pane.

The first two actions on the toolbar let you navigate between calls of the selected function within the whole trace (across all events).

This works great for navigating through the promises and chained callbacks.

Debugging in Firefox

As you may know, with the release of Firefox v33 the availability of WebStorm’s built-in JavaScript debugger was interrupted for Firefox users. We had to re-implement it from the ground up and are still working on it.

To debug in Firefox v33 and above using WebStorm built-in debugger, you should first enable Remote debugging in Firefox settings (Tools | Web developer | Toggle tools, click the Gear icon and check Enable remote debugging). Then again go to Tools | Web developer and select Developer toolbar to open the Firefox command line. Run the following command:

where 6000 is the port number you’d like to use.

In WebStorm, create a new Run/debug configuration of Firefox remote type. Enter the port name that Firefox is listening on. Open your app in the browser, put breakpoints in the code and start a debug session in WebStorm.

New project wizard

We’ve redesigned the New Project wizard to make it slicker and easier to use.

new-project-wizard

Distraction-free mode

Introducing a brand new distraction-free mode: no toolbars, no tool windows, no editor tabs, just code in the center of your screen. To switch to this mode, click View | Enter Distraction Free Mode.

distraction-free-mode

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 Preferences | Appearance & Behavior | System Settings | Updates.

You can download and install WebStorm 10 EAP (build 140.2167) right now. Please submit your feedback in our issue tracker at https://youtrack.jetbrains.com/issues/WEB.

This post is part of a series of posts covering features in WebStorm 10 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.

114 Responses to WebStorm 10 EAP

  1. Juan says:

    Maybe come a new UI?? Please, some more friendly.

    • Ekaterina Prigara says:

      We have redesigned Welcome screen, New project wizard, scrollbar and right gutter, WebStorm 9 added new Settings dialog… We’re working on UI improvements one step at a time.

      • Ben says:

        The new fixed-width tabs are terrible. They both waste space and display less information at the same time.

        • Ekaterina Prigara says:

          Thanks for an issue on the tracker, feedback is important. Can’t say what improvements will be made, but I’m sure it will be taken into consideration.
          btw, have you tried “no tabs” workflow?

          • Vladimir Varankin says:

            Wow, recently, I’ve come to exactly the same workflow. It really fills, that currently Tabs are redundant 😉

  2. Nontas says:

    Great work as always!!!

    One question that I have is, WebStorm is now version 10 and PhpStorm still in version 8. Why is PhpStorm so much behind?

    Thanks

    • Ekaterina Prigara says:

      Thanks!
      PhpStorm 8 has all the features that WebStorm 9 (the current stable version) has (as well as RubyMine 7, IntelliJ 14 or PyCharm 4). Each product has it’s own versioning.
      Please note that it’s an early access build, WebStorm 10 will be released later this year.

  3. Joe Jenkins says:

    When is Webstorm 10 expected to be released? Spring? Summer? Fall? Winter? 2015

  4. bfulop says:

    Thanks for the new update!
    All these things (sync tag edit, emmet navigation, source maps) are things I wished for secretly and now as I you were reading my mind…
    It’s been 6 months since I bought Webstorm and every day it’s a pleasure to work with it.
    It’s a real boost to my productivity.

    • Ekaterina Prigara says:

      Thank you for your kind words! We’re working hard to make WebStorm even more awesome. Next time if you have a feature request, please, post it on our issue tracker. Thanks! And develop with pleasure.

  5. victors says:

    The link on confluence page to Linux EAP file is broken, it’s missing a /

  6. Vladimir Varankin says:

    New project wizard is great! Are there any plans to support custom project skeletons for a new project?
    For example, I have a basic web project stub on the github, and I want it to be used as a new project template. What do think? Is it possible to be done in the same manner as AngularJS new project?

    • Issam says:

      The Angular JS new Project is added via a plugin.
      You can support your custom project via a plugin too.

      • Ekaterina Prigara says:

        Vladimir, we have thought about adding Yeoman integration, so that new yo-generators could be used from our new project wizard UI, but still haven’t started to work on it.
        Issam is right, now you can only add new project templates with custom plugins.

  7. stef-k says:

    The Linux link is not working and produces the following error

    AccessDenied
    Access Denied
    01A65B7EF958482C

    /kvc42aOMFNzobUHkKkAzUxuF+v85ion1lSHhUUhBsBO1CGWge2gjODYcKetE/VKb4UyF9+3dYQ=

  8. Anton Mamrashev says:

    Thanks for your work )
    P.S. I can’t download WebStorm-EAP-140.2167.tar.gz from https://confluence.jetbrains.com/display/WI/WebStorm+EAP -> AccessDenied

  9. Daniel Wyschka says:

    Is it planned to support Appcelerator Titanium ??

  10. Tony says:

    I have enlarged UI elements after update http://postimg.org/image/z40cihhf3/

  11. Sergey says:

    Haha, I was going to ask for distraction free mode and surprise surprise, it is already there! :) Looking forward for article about advanced search for spy-js. Also noticed that overall performance is great!

  12. Elior Boukho says:

    Since the last update, all my inspections profiles are gone. Any ideas?

  13. Elior Boukho says:

    Hi, another quite annoying bug: since the last update, these files keep appearing in my directories:

    scsslint_tmp724923994132335098.js was added

    Where does these come from?

  14. vomchik says:

    Great work as always!

  15. Vitaly says:

    What about AtScript support? Any plans?

    • Ekaterina Prigara says:

      Try to open .ats file or .js file and then select AtScript as a JavaScript version in preferences. Note that it’s still work in progress :)

  16. Victor says:

    Broken JS/JSX occurrence highlighting, JS/CSS intentions which break code or simply don’t work, CSS3 properties still unknown to WebStorm, broken JS formatter, forced auto insertion of “use strict” into each created function in Harmony mode…

    Hope all that will be fixed.

    P.S. All that problems are reported (there are corresponding issues on YouTrack).

  17. Victor says:

    Could you spend some time on just polishing existing functionality? Amount of issues on YouTrack is overwhelmingly high, and I am almost sure that my issues with only few votes will never be fixed.

  18. Jonas kello says:

    Please spend time on improving Dart support for this release. It is already good but can become better. Eg. WS still does not have the problems view feature that DartEditor has.

    Also, in general, I wish results from inspections, search etc. could be presented as a flat list with columns as is done in Visual Studio. This way it is much faster to navigate between the items that are relevant without having to bother with deep hierarchies. In WS I need to expand to the leaf node to reach each item. I can do expand all, but each parent node will cause an extra line which takes up space and forces me to scroll a long list. I can turn of some of the parent hierarchy, but then I loose contextual info that is provided by the parents. Visual Studio solves this by having only a line for the leaf nodes and columns with the extra info. Maybe there is a mode already to add columns in WS results but I have not found it?

    • Alexander Doroshko says:

      Improvements in Dart support are always in progress, thank you for filing issues in YouTrack! Global Dart problems view is on the roadmap, good chances for 10.0 or 10.0.x. As for improvements in data presentations – suggestions are also welcome in YouTrack in ‘IntelliJ IDEA’ project with corresponding subsystem.

      • Jonas Kello says:

        Thanks for the update! Since the blog post had no mention of Dart I just wanted to make sure it is not left behind :-).

        I filed an issue in IntelliJ category for the flat result list. If anyone else is interested you can vote it for it here:

        https://youtrack.jetbrains.com/issue/IDEA-136135

        • Alexander Doroshko says:

          You can get an idea what’s happening to Dart support by searching YouTrack or even by browsing commits in the repo.
          Submitted feature will have better chances to be addressed if you attach screenshots proving your idea or even a suggested UI.

          • Jonas kello says:

            Thanks for the tip, added some images :-)

            Nice to see the list of fixed items for Dart! Keep up the good work!

  19. Is there a way to get the following project template into the list?

    React.js Starter Kit

  20. devmondo says:

    please add support for Aurelia the new framework that will go big time, it is based on ES6
    http://aurelia.io/

    i also noticed that ES6 import statement is not supported by intellisense or auto complete

    thanks in advanced.

  21. Ustin says:

    There is a typo in the post:

    Smart keys – Synchronous editing.

    This feature is actually called “Simultaneous ” editing

  22. Ioannis Pontikis says:

    I hope that soon will be available as eap version also in PhpStorm!

  23. Brett Fattori says:

    I have so many requests, but one I’d like to see is the ability to display additional log files like Idea does. I’m surprised no one else has asked.

  24. Grigoriy says:

    if would be great if you improved io.js support (automated sources downloading)

  25. Zoomclub says:

    Reactive Native is coming! I’m not sure yet what IDE support it might require but please do add whatever is beneficial, thanks.

    http://jlongster.com/First-Impressions-using-React-Native

  26. Dave Stewart says:

    Looks great!

    I still want Ruby features without going down the IntelliJ route.

    When will Jet Brains build a skeleton IDE that can be customised with ANY languages, without the baggage of a particular base language (like Java, PHP, etc) ?

    I would be happy to pay more as I added languages.

    Dave

    • Ekaterina Prigara says:

      Don’t know anything about that.
      With the current product offering you just need to choose an IDE for your server-side code, eg RubyMine for Ruby, PhpStorm for PHP, etc, all WebStorm features are available in all IDEs. And if you switch from one server-side language to another, you should go with IJ.

  27. Bcr says:

    Thank you for overhauling JS indexing! That has been my major pain point with WebStorm since I started using it — currently, i have to force quit webstorm twice every morning before it indexes successfully and stops being unresponsive, and that’s with webstorm 8 — webstorm 9 doesn’t ever work for more than 30 seconds before becoming unresponsive.

    With this EAP, the indexing appears to actually work o_0

  28. Adrian says:

    Not a fan of the gradient fade on the file name tab. every letter counts when recognising which file is in the tab

  29. Pavel Litkin says:

    Long response time of editor and sudden freezes when indexing files are terrible issues (partially can be solved by excluding node_modules and bower_components folders from project) since WebStorm 5, hope it will be fixed now. As for me it is most important feature.

  30. Mustafa Özgüner says:

    First, thanks for this amazing update.Performance is better. Its a great move changing theme of tabs to flat design. I think you should apply flat design to all parts of the webstorm. Webstorm has a nice Jade support but you have to improve indentation for Jade files(like in Sublime Text).I know that its about Java stuff but If you make webstorm more themeable(for all parts) you might have more community support.Its because using just color schemes makes everything worse about whole design and colors . There are no minify and beautfy plugins. Lastly, it would be awesome if you stop using hardcoded launcher icon for linux(fedora and ubuntu/mint). But its an amazing Ide thanks for all your work.

    • Ekaterina Prigara says:

      Mustafa, thank you for your feedback.
      Could you please be a bit more specific about the problems with indentation that you have in Jade. Here’s a list of related issues on our issue tracker. Would be great if you report the problem, if it’s not there, my colleague Valentin will get back to you there.
      There’s quite a lot of nice themes available on http://www.ideacolorthemes.org/home/. They are generated by community. We don’t have plans to add more themes on our side, we’d prefer to focus on font rendering and related tasks to make fonts in the IDE more OS native.
      For minification we suggest using predefined file watcher (Preferences | Tools | File watchers).
      The IDE built-in code formatter with configurable code styles should work great to beautify your code.

  31. Paul says:

    Stopping a debug session debug freezes the entire application for ~3minutes.
    =o(

  32. devmondo says:

    i don’t why you guys don’t have an official statement about supporting the new Open Source ASP.NET, while each editor and IDE out there is doing that.

    what is more strange is that you guys should be the first as you are the ones with the most experience about .NET specially when we talk in terms of Resharper!

    kindly give us your stand on the subject.

    thanks in advanced.

    • Ekaterina Prigara says:

      We don’t plan to add C# support in WebStorm and we don’t think that WebStorm can be a primary IDE for ASP.NET development without that.

    • Tyler Bartnick says:

      According to Webstorm’s website, it is a JavaScript IDE. I don’t know why you would expect them to support ASP.NET when they set out to be the best JavaScript IDE out there, not the best overall web development IDE.

  33. Pingback: WebStorm 10 EAP, 140.2424: spy-js application dependency diagram and fixes | JetBrains WebStorm Blog

  34. Kiffin Gish says:

    I would like to request support for ember-cli, you’d make many user very happy and would attract an ever-growing community to switch over. What are the chances of getting that in for WebStorm 10?

  35. Mitchell Ferguson says:

    Have you fixed the bug which prevents SSH connection to OpenSSL 6.7 servers? It’s a really simple fix for users – applying a patch to JSch – but that only makes it more amazing this bug has made webstorm unusable out of the box for me since *October*!

    http://www.svrnm.de/blog/fixed-netbeans-phpstorm-algorithm-negotiation-fail/

    https://youtrack.jetbrains.com/issue/WI-25360

    • Ekaterina Prigara says:

      If the patch works, we hope that the fix will be available in one on the upcoming EAP builds. Please follow the issue for updates.

  36. Enriqueto says:

    I work with TypeScript and I find the feature “Find Usages” very useful when refactoring

    Would it be possible to hide of the occurrences the *.js files? I’m interested only on the *.ts files.

    • Ekaterina Prigara says:

      You can create a new custom scope that includes only TypeScript files and use that for Find usages and other actions: go to Preferences | Appearance & Behavior | Scopes – Add new – Pattern file:*.ts (it would create a new scope with TypeScript files only). Then in Find usages tools window click Settings icon and select this scope.

  37. Pingback: PhpStorm 9 Early Access Program Started | JetBrains PhpStorm Blog

  38. Enriqueto says:

    What about generating getters and setters in TypesScript?

  39. loot says:

    Since updating I have had some annoying experience with the new Synchronous HTML tag editing. I am working with React JSX. The problem seems to stem from edits being made to the inner tags, in the process my final closing tag in the JSX gets changed to something it should not be, breaking JSX compilation until I correct it. I have not been able to recreate yet but it has happened often enough that I decided to just turn off that feature.

    On the good side, I am no longer getting validation warnings for the spread operator usage in JSX templates when passing props to a child.

  40. Hi, Thank you for the EAP,

    A BIG ISSUE: what about supporting RTL languages in the editor?

    thank you.

  41. Oz says:

    I read in the comments that PhpStorm 8 is based on WebStorm 9, and that PhpStorm 9 will be based on WebStorm 10.

    May I ask why not keep the version numbers synchronized? I think they used to be…
    Keeping them in sync would make it easier to understand what WebStorm features we would get in each PhpStorm version… I personally wasn’t aware that PhpStorm 8 had WebStorm 9 in it…

    • Ekaterina Prigara says:

      We don’t have the whole product range of our IDEs that all have all WebStorm features in sync. The version number is the decision of each individual team. Nevertheless, my colleagues from PhpStorm team always cover new web related features in their release notes and on the website.

  42. saikrishna says:

    hi
    im not getting the tags and attributes automatically in my webstorm ..

    anybody help ..

    • Ekaterina Prigara says:

      Are you referring to Synchronous HTML tag editing?
      You need to enable that in Preferences | Editor | General | Smart keys – Simultaneous editing.

  43. Nicolas says:

    Please can you better document how to parameterise webStorm for ES2017/node development, including debugging with good lines used in the debugger, mocha debugging, code coverage.
    thanks
    Nicolas

Leave a Reply

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