WebStorm 2016.2 Early Access Preview

Posted on by Ekaterina Prigara

We are happy to announce the start of the Early Access Preview for WebStorm 2016.2, the next big update for WebStorm. You can download WebStorm 2016.2 EAP, build 162.74, right now. You can install it side by side with WebStorm 2016.1 or any previous WebStorm version. No active subscription is required.

While we don’t have that many big new features to show you right now, we hope you’ll still enjoy some of the improvements and fixes that have already landed in WebStorm 2016.2.

Coding assistance for props in React and more

WebStorm can now understand component properties defined using propTypes and provide code completion and resolve to them.

props-react

Another nice improvement for React developers is that now WebStorm will automatically add {} instead of “” for React events like onClick, onChange, etc. Moreover, the IDE now understands React non-DOM attributes: key, ref and dangerouslySetInnerHTML.

There’s also a bunch of improvements in React support in TypeScript, like auto imports for components and coding assistance for components properties.

Support for Angular 2 Release candidate

WebStorm 2016.2 EAP brings updates to the Angular 2 support: it now understands variable declarations with let inside the structural directives such as *ngFor and provides proper auto imports  with paths starting with @angular for Angular 2 RC.

ng2-rc

Improvements in TypeScript support

In TypeScript you can now enjoy a smarter support for enums.

enum-ts

Single vs double quotes in HTML attributes

You can now configure whether you want IDE to add single, double or no quotes at all when autocompleting attributes in HTML and JSX. The option is available in Preferences | Editor | Code style | HTML – Other – Generated quote marks.

single-quotes

Code coverage for Dart

Run with Coverage option is now available for the Dart command-line app run configuration. It’s not yet supported for Dart Test because of the Pub tool limitation.
In addition to that, you can now use other language injection in string literals and navigate through the Call hierarchy for Dart code.

The bigger list of issues addressed in this EAP build you can see on our issue tracker.

Please report your feedback to our issue tracker. To get notifications of new EAP builds as they become available, subscribe to the EAP channel in Preferences | Appearance & Behavior | System Settings | Updates.

– JetBrains WebStorm Team

Comments below can no longer be edited.

49 Responses to WebStorm 2016.2 Early Access Preview

  1. Alexey says:

    May 13, 2016

    When these changes will be available for PHPStorm?

    • Ekaterina Prigara says:

      May 13, 2016

      Sorry, don’t know exactly when the PhpStorm 2016.2 EAP starts, probably the next week. Stay tuned!

  2. Sean says:

    May 13, 2016

    Where can I learn more on JSPM support that was added?

    • Andrey Starovoyt says:

      May 13, 2016

      Hi. Now we can resolve es6 imports from jspm packages similar to imports from node_modules.

  3. Jerry says:

    May 13, 2016

    Any better support for Polymer in the near future? For example Polylint. Also is this a 30 day trial?

    • Ekaterina Prigara says:

      May 13, 2016

      No clear plans for the Polymer improvements at the moment, sorry. For the Polylint support, please vote for this issue and follow the updates: https://youtrack.jetbrains.com/issue/WEB-20000
      The build will work for only 30 days; before it expires, we’ll publish a new one.

  4. Sean says:

    May 13, 2016

    hi Andrey Starovoyt
    can you please explain how to configure this?
    I would LOVE to be able to just nuke my node_modules directory (which I needed just to make TypeScript | WebStorm happy in dev) and keep ONLY my jspm_packages dir for everything… I was under the impression we need to wait for TypeScript 2.0 for directory mapping for this, no?

    regards

    Sean

    • Andrey Starovoyt says:

      May 13, 2016

      Current jspm implementation works for JavaScript. TypeScript has strict resolution logic so you have to use TypeScript 2.0 with path mappings for jspm packages.

  5. Sean says:

    May 13, 2016

    🙁 that’s what I thought, mmm ok, I guess will have to wait for TS 2.0
    TX

    Sean

  6. James says:

    May 13, 2016

    “provides proper auto imports with paths starting with @angular”

    Does this mean it *only* works for imports starting with @angular? Because there are many more packages that utilise scopes, such as @polymer, as well as private organisations. It should support ALL scopes. See: https://docs.npmjs.com/misc/scope

  7. Mörre Noseshine says:

    May 14, 2016

    After half an hour of very low-intensity editing I got an endless “Indexing” loop – I had to kill Webstorm. There is nothing to submit, the IDE created no submittable error and I would not know what to write in a ticket…

    • Mörre Noseshine says:

      May 14, 2016

      Update: It won’t stop – after a restart of the IDE I’m still in an endless “Indexing” loop. That means the progress bar quickly jumps to the end – but then it starts again. So it’s not like the indexing doesn’t end, but that when it’s done it immediately starts again.

      • Ekaterina Prigara says:

        May 15, 2016

        Thanks for reporting an issue on our tracker, we’ll get back to you there.

        • Piotr says:

          July 12, 2016

          @Ekaterina: any update on this issue? I have just upgraded to the latest Webstorm release (WebStorm 2016.2 Build #WS-162.1121.31) and I am experiencing the endless indexing issue. When I try to click around Webstorm gets unresponsive and I have to kill the process. After restart it happens again. I guess I’m forced to downgrade to 2016.1 until a fix it released…

          • Ekaterina Prigara says:

            July 12, 2016

            Do you have any antiviral software running?

  8. Daniel Varga says:

    May 14, 2016

    “Run with Coverage” – YESSS, thank you

  9. Mörre Noseshine says:

    May 14, 2016

    I found there is crash information in the idea.log file, so I created a ticket and attached that file.

  10. Tam Le says:

    May 15, 2016

    These changes for React is a huge win.

    Though, React’s internal methods like componentDidMount is marked as unused methods on ES6/7. I know that for now, it’s not natively support by browsers, but in development with the support of Babel, it become widespread.
    So if we could have an update for ES6/7, that would be awesome 🙂

    Related to this issue: https://youtrack.jetbrains.com/issue/WEB-14576

    • Ekaterina Prigara says:

      May 15, 2016

      Thanks for your feedback. We’ll hopefully do something with that issue in the upcoming release.

      • Sergey says:

        May 20, 2016

        I agree with Tam Le, coding assistance for React helps a lot! However I run into an issue where slight code change breaks coding assistance. Created a ticket here – https://youtrack.jetbrains.com/issue/WEB-21735.

        • Ekaterina Prigara says:

          May 23, 2016

          Thank you, Sergey! We’ll have a look.

  11. Dennis says:

    May 16, 2016

    How come the IDEA EAP uses the old version of the AngularJS plugin? Will IDEA 2016.2 be obsolete for Angular developers when it comes out? If so, that seems… Silly.

    • Ekaterina Prigara says:

      May 16, 2016

      We have updated the plugin for IntelliJ IDEA 2016.2 EAP. You can update it in the IDE. Sorry for the inconvenience.

      • Dennis says:

        May 16, 2016

        Nice, thanks for the quick fix! 🙂

        • Dennis says:

          May 16, 2016

          Hmmm, IDEA EAP seems to have a problem WebStorm EAP doesn’t have: It doesn’t recognize the directives, so for example *ngFor in a template gets a warning about not being allowed.

          Does IDEA need extra configuration? I tested on the Angular Tour of Heroes example by just opening the completed project after running “npm install”.

          • Dennis says:

            May 18, 2016

            Okay, IDEA has seemingly downgraded to 162.74.13 now, and that has fixed the issue.

            Getting better and better! 🙂

  12. Noah Shipley says:

    May 16, 2016

    I use webpack to load in certain external libraries automatically so that I don’t need to write the line: import * as React from ‘react’;

    …at the top of ever file. Instead I can just once write the line:
    new webpack.ProvidePlugin({
    .
    .
    React: ‘react’,
    .

    Is there any way I can get intellisense without needing to go through every single one of my components now in order to add a line of boilerplate?

  13. Malindges says:

    May 19, 2016

    Single quotes in html, finally! 🙂

  14. Ahmed Fouad says:

    May 26, 2016

    I am trying to use WebStorm 2016.2 Early Access Preview with @angular 2.0.0-rc.1

    when I use the below line in my .js file
    import {Component} from ‘@angular/core’;
    I got error [Cannot resolve symbol ‘Component’ ]

    if I change it to
    import {Component} from ‘@angular/core/esm’;
    it works fine.

    Any idea how to resolve this?

    • Dennis Ushakov says:

      May 27, 2016

      Looks like we don’t understand ‘esnext:main’ field of package.json, I’ve filed an issue to support that.

    • Hadnet says:

      July 30, 2016

      Same thing here with WebStorm 2016.2

      • Hadnet says:

        July 30, 2016

        The way I found to fix that problem was putting “@angular/core/index”

      • Ekaterina Prigara says:

        August 1, 2016

        Sorry, the issue linked above is not fixed yet.

  15. Ivan says:

    May 29, 2016

    Hello
    Do you have any plans to impruve the refactoring for typescript language, particularly to implement the “pull member up” refactoring?

    • Dennis Ushakov says:

      May 29, 2016

      We do, but no exact time frame. You can vote and watch this issue for the updates

  16. Konstantin Kharitonov says:

    May 30, 2016

    The terminal(cmd) do not works on Windows 10
    version: WebStorm-EAP-162.426.3

    • Ekaterina Prigara says:

      May 30, 2016

      Can you please report an issue on your issue tracker, provide a bit more details and attach the IDE log files (menu Help – Show logs): https://youtrack.jetbrains.com/issues/IDEA Thank you!

  17. Steven Chapman says:

    July 12, 2016

    I am getting the error ‘Cannot resolve symbol “intranet-mapit”‘ in the following snippet.

    ‘use strict’;
    angular.module(‘intranet-mapit’).controller(‘mapitController’, [….

    • Ekaterina Prigara says:

      July 12, 2016

      How module ‘intranet-mapit’ is defined?

      • Donald says:

        July 12, 2016

        I’ve seen this same behavior after installing 2016.2 with a meanjs app. It is fine if I define as follows:

        angular.module(‘moduleName’, []).controller(‘controllerName’, …)

        Generically registering the module and then referencing as Steven does above causes the error.

        ‘use strict’;
        AppConfig.registerModule(‘module’, []);

        angular.module(‘module’).controller –> ‘module’ is highlighted red and the error displays.

        • Ekaterina Prigara says:

          July 13, 2016

          Thanks for your comment! We’ve reproduced and reported an issue and already working on a fix: https://youtrack.jetbrains.com/issue/WEB-22389
          In the meanwhile, you can disable “JavaScript general error” inspection in Preferences to hide the error. Or hit Alt-Enter on the error, then Arrow right and select “Disable inspection”.

    • Mary Shaw says:

      July 12, 2016

      I am getting that error as well.
      The file’s first line is:
      angular.module(‘utils’)….
      The ‘utils’ module is defined in a different file but never actually “imported” into this file.

      How do I suppress this error?

      • Ekaterina Prigara says:

        July 13, 2016

        We’ve reported an issue and already working on a fix: https://youtrack.jetbrains.com/issue/WEB-22389
        In the meanwhile, you can disable “JavaScript general error” inspection in Preferences to hide the error. Or hit Alt-Enter on the error, then Arrow right and select “Disable inspection”.

  18. Dean Hristov says:

    July 20, 2016

    Hi, everyone

    I still waiting to make debugging from the IDE my React apps same browser debug.
    Which version it will be available?

    Many thanks,
    Dean

  19. Alejandro says:

    July 30, 2016

    phpStorm 2016.2 don’t run on my computer with windows 10