WebStorm 2017.2 Early Access Preview: parameter hints, code rearrangement, Angular Material

Ekaterina Prigara

We are glad to announce the start of the Early Access Program for WebStorm 2017.2!

The first WebStorm 2017.2 EAP is now available for download. It brings lots of improvements and promises even more new features in the next EAP builds. The WebStorm 2017.2 release is planned for late July. Stay tuned!

If you’re not yet familiar with our Early Access Programs, here are some details:

  • Every week we publish a fresh build for the upcoming version of WebStorm.
  • EAP builds provide access to the newest features we’re currently developing.
  • EAP builds are free but expire 30 days after they’re built.
  • You can install a EAP build side-by-side with a stable WebStorm version.
  • We welcome your feedback in our issue tracker, youtrack.jetbrains.com/issues/WEB. Please don’t forget to mention the build number you’re using.

Important: WebStorm EAP builds are not fully tested and may be unstable.

To be notified when the new EAP is available, switch to the EAP updates channel in the IDE (Preferences | Appearance & Behavior | System Settings | Updates) or install our Toolbox App.

In this update you will find:

Parameter hints in TypeScript

You will now see parameter hints in TypeScript code. They show the names of parameters of a function or method and make the code easier to read.

param-hints

To make hints not too distracting, by default they are shown only for parameters that are strings, numbers, objects or boolean values and are not shown for some frequently used methods, like filter or map or for some parameter names, like start.

You can modify this blacklist, enable hints for all parameters or disable them completely in Preferences | Editor | General | Appearance – Show parameter name hints.

Auto imports in JavaScript

In JavaScript, imports are now added automatically when you autocomplete a symbol that is exported in another project file.

auto-import-js

Please note that auto imports don’t work for symbols from the project’s dependencies, but in many cases you can add an import with a quick-fix (press Alt-Enter and select Insert import).

Completion and auto import for React stateless components

In WebStorm 2017.1 we’ve added auto import for React components. However, there was a known limitation – it didn’t work with React stateless components. We have fixed that and now WebStorm properly detects such components, provides code completion for them, and adds imports automatically.

import-react-stateless

Code rearrangement for JavaScript and TypeScript

To help you make the code more readable and consistent, WebStorm adds a new feature called Code rearrangement. With it you can configure how different blocks of code such as the constructor, fields and methods are ordered in your JavaScript and TypeScript classes.

In addition, you can configure whether fields and methods should be ordered by name.
The configuration is available via Preferences | Editor | Code Style | JavaScript or TypeScript – Arrangements.

You can then run the Rearrange Code action via the Find Action popup (Cmd-Shift-A on macOS or Ctrl+Shift+A on Windows and Linux).

Here’s an example:
rearrange-code

Another option is to run it as part of Reformat Code. Press Alt-Shift-Cmd-L on macOS or Ctrl+Alt+Shift+L on Windows and Linux to open the Reformat Code dialog and then check Rearrange Code.

reformat-enable-rearrange

New code style options for JavaScript and TypeScript

We’ve added lots of new code style options for JavaScript and TypeScript.

Now you can configure to have (or not have) extra empty lines after imports, classes, fields or methods. These options are available in Preferences | Editor | Code Style | JavaScript or TypeScript – Blank lines.

blank-lines

You can also configure whether to add spaces around * in ES6 generators and ... in rest parameters. These options are available under Spaces.

We’ve also reorganized the settings a bit, removing the Other tab. The configuration for variable declaration alignment is now placed under Wrapping and Braces and configuration for comments is under Generated Code.

Better support for Angular Material

WebStorm improves support for Angular Material. In addition to the completion for the components that was available before, you can now also enjoy completion and navigation for the Material attributes.

material-component

material-attribute

Better HiDPI support on multiple displays

Earlier, on Windows and Linux WebStorm would scale the UI according to one global setting – the primary display. This meant that one scale factor was used across all displays. Now on Windows each display gets its own scale integer factor. Support for Linux and fractional scale factors is coming.

Font is now automatically adjusted based on the display resolution.

Among other improvements:

  • Support for destructured parameters of function in JSDoc
  • Newlines, escape symbols, emojis and quotes are now smartly handled when you paste text into a JavaScript string
  • Redesigned breadcrumbs in HTML and stylesheet files
  • Recursive calls in JavaScript and TypeScript are now marked with a special icon on the gutter

The full list of issues addressed in this EAP build can be found in our issue tracker.

WebStorm Team

Comments below can no longer be edited.

25 Responses to WebStorm 2017.2 Early Access Preview: parameter hints, code rearrangement, Angular Material

  1. Michael Foltz says:

    May 13, 2017

    Just started trying out the auto import feature, and sometimes it’s misinterpreting the module I want to import, for example, it does:
    import {BusinessModel as BusinessLocationModel} from “./BusinessLocationModel”

    instead of:

    import {BusinessModel} from “./BusinessModel”

    Is there a way I can keep it from auto-importing with “as” if it can’t find the exact match? If not, how do I turn off the feature?

    • Ekaterina Prigara says:

      May 13, 2017

      Thanks for the feedback! So this import is added on autocompleting `BusinessModel`, right? And how export is defined in BusinessModel.js? Would be great if you report us an issue about that on https://youtrack.jetbrains.com/issues/WEB
      Thanks!

  2. Mutt Dolemite says:

    May 13, 2017

    The parameters hints are a step in the right direction toward demystifying method calls, but the placement of the hint with the colon “:” character leads to some confusion.

    Since in TypeScript the colon is already a designated marker for type, interface or class, it just feels odd when reading the newly introduced hint. It reads as if it is trying to define some typing constraint. Would others feel it reads naturally? Or is there a better representation character besides a colon in the prepended call parameter hint? Also because this hint expression is not part of the actual code, perhaps some additional styling could be done.

    Now while typing an expression that will have hints, the user will have a slight delay while the IDE determines a hint is to be rendered, followed by a delay, then an animated transition of the entire line of code and cursor to the right. Does this feel natural?

    • Samuel Marks says:

      May 15, 2017

      Mutt this syntax is like this Rust RFC: https://internals.rust-lang.org/t/pre-rfc-named-arguments/3831 – and Rust also has `i_am_var: type` syntax. Objective-C has something similar.

      I suppose they could use the C struct syntax of `.argument_name =`, or the Python `argument_name=`.

      Other examples: https://en.wikipedia.org/wiki/Named_parameter

      It seems like a matter of preference… it is not clear that using this syntax would confuse the programmer, but I guess we’d need to hear from more of them to decide. Regardless the `argument_name=` syntax from Python should be an acceptable alternative all-round.

    • Ekaterina Prigara says:

      May 15, 2017

      Thank you for your feedback!
      Yes, colon is used in TypeScript for types, interfaces or classes, but not in the method calls.
      You can customize the color of the hint in Preferences | Editor | Colors & Fonts | Language Defaults to make it more visible (or the opposite, as you wish).
      Some improvements in the way how hints are displayed when editing the code are expected in the next EAP build (https://youtrack.jetbrains.com/issue/IDEA-171186). Please give it a try and let us know what you think. Thank you!

  3. Miroslaw Majka says:

    May 15, 2017

    This release seemed to resolved this issue: https://youtrack.jetbrains.com/issue/WEB-12357

  4. Jesse Palmer says:

    May 17, 2017

    Love WebStorm. Just out of curiosity is there any plans for supporting Elm?

  5. splintor says:

    May 17, 2017

    Switcher is broken in this version – when pressing Ctrl+Tab it opens the switcher, but then when holding the Ctrl and pressing Tab repeatedly, it only moves the selection horizontally (between the tools column and the documents column) and not vertically. I need to use the up/down arrows to go down in the documents list. Is this on purpose? It is very uncomfortable.

    • Ekaterina Prigara says:

      May 17, 2017

      Will be fixed in the next 2017.2 EAP build: https://youtrack.jetbrains.com/issue/IDEA-172717
      Sorry for the inconvenience. If you have any other issues with the Early Access builds, please report them on our issue tracker. Thank you!

  6. Khanh Hoang says:

    May 17, 2017

    Where can I find the roadmap for the future releases? I am curious about v2017.3

    • Ekaterina Prigara says:

      May 17, 2017

      Sorry, we don’t have a public roadmap. WebStorm 2017.3 release is planned around November 2017.
      Is there any particular thing you’re interested in?

  7. Ben says:

    May 17, 2017

    Are these features included with the latest version of Intellij too?

    • Ekaterina Prigara says:

      May 18, 2017

      Yes, all that is available in IntelliJ IDEA 2017.2 EAP that you can download here.

  8. Pedro Vagner says:

    May 20, 2017

    Hi, I just upgrade from WebStorm 2016.3.3 to 2017.1.3, but the problem persist. The IDE isn’t warn me about incorrect import paths (ES6). I having this problem using a Meteor project. What can it be?

    • Ekaterina Prigara says:

      May 22, 2017

      Hello, sorry, I’m not sure I follow: what problem do you refer to? Is there already an issue for that on our tracker that you’ve reported? If not, please do: https://youtrack.jetbrains.com/issues/WEB
      We need more information from you about the problem. Please send a code sample and a screenshot.

  9. Artur says:

    June 14, 2017

    When are you going to add this feature : https://youtrack.jetbrains.com/issue/WEB-19686#tab=Comments ?

    • Andrey Starovoyt says:

      June 15, 2017

      Hi. The issue is resolved. The changes will be available in the next 2017.2 EAP

  10. Spencer Bigum says:

    June 27, 2017

    Can we safely use this until the official release of 2017.2?

    • Ekaterina Prigara says:

      June 28, 2017

      Early Preview builds are not stable builds. We haven’t fully tested some of the newest features.

  11. Julian says:

    July 19, 2017

    Since upgrading to 2017.2 my code completion stopped working for attributes.
    When I start typing a component name, it still suggests my some and the auto import works also, but hitting Ctrl+Space between the “” I don’t get any suggestions for props anymore. It just says “no suggestions”, in 2017.1 it worked like a charm for internal components, as well as external libs like semantic-ui-react. I have invalidated cache, but can’t fix it. Any suggetions?

    • Ekaterina Prigara says:

      July 19, 2017

      Does that happen in all React project you’re working on? How do you define and import the components? Any chance you can send us some sample files to reproduce the issue? Thanks!

      • Julian says:

        July 19, 2017

        I created a new react app using create-react-app. Suggestions are working there, but not in the other project, which also uses create-react-app (both the latest).

        Should I remove the .idea folder to fix that issue?

  12. Philipp says:

    July 25, 2017

    I have the same problem as Julian. Since upgrading to 2017.2 code completion and suggestions are not working for me anymore in jsx / react projects. I did not try to setup a new project but renaming the old .idea folder and let webstorm create a new one did not help.

  13. Ekaterina Prigara says:

    July 25, 2017

    Here’s a similar issue, but we had no luck reproducing it: https://youtrack.jetbrains.com/issue/WEB-27896
    Can you please attach a screenshot and a code sample with the component definition to the issue. Thank you!