WebStorm 2016.2 Early Access Preview

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

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.

49 Responses to WebStorm 2016.2 Early Access Preview

  1. Alexey says:

    When these changes will be available for PHPStorm?

    • Ekaterina Prigara says:

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

  2. Sean says:

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

    • Andrey Starovoyt says:

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

  3. Jerry says:

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

  4. Sean says:

    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:

      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:

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

    Sean

  6. James says:

    “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. 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…

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

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

        • Piotr says:

          @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…

  8. Daniel Varga says:

    “Run with Coverage” – YESSS, thank you

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

  10. Tam Le says:

    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

  11. Dennis says:

    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:

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

      • Dennis says:

        Nice, thanks for the quick fix! :)

        • Dennis says:

          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:

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

            Getting better and better! :)

  12. Noah Shipley says:

    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:

    Single quotes in html, finally! :)

  14. Ahmed Fouad says:

    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?

  15. Ivan says:

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

  16. Konstantin Kharitonov says:

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

  17. Steven Chapman says:

    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:

      How module ‘intranet-mapit’ is defined?

      • Donald says:

        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:

          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:

      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?

  18. Dean Hristov says:

    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:

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

Leave a Reply

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