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

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

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.

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

  1. 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?

  2. Mutt Dolemite says:

    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:

      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:

      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:

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

  4. Jesse Palmer says:

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

  5. splintor says:

    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.

  6. Khanh Hoang says:

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

    • Ekaterina Prigara says:

      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:

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

  8. Pedro Vagner says:

    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:

      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. Can we safely use this until the official release of 2017.2?

    • Ekaterina Prigara says:

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

  10. Julian says:

    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:

      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:

        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?

  11. Philipp says:

    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.

  12. Ekaterina Prigara says:

    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!

Leave a Reply

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