WebStorm 2019.1 EAP #2: intentions for JavaScript destructuring

Ekaterina Prigara

WebStorm 2019.1 Early Preview build #2 is now available!

If you’re unfamiliar with our Early Access Program or if you want to catch up on all the new features, check out the previous EAP blog post.

Toolbox App is the easiest way to get EAP builds. You can also get notified right from the IDE when a new EAP build is available: go to Preferences | Appearance & Behavior | System Settings | Updates and select “Automatically check updates for Early Access Program”.

Download WebStorm 2019.1 EAP

Important! WebStorm EAP builds are not fully tested and might be unstable.

Here are some of the highlights of WebStorm 2019.1 EAP #2 (build 191.4738.20). For the full list of issues fixed in this update, see the Release Notes.

Destructuring in JavaScript and TypeScript

With destructuring, you can unpack values from arrays and objects into variables. This feature has a very concise syntax that is often used when you need to pass data in your app.

If you’re not yet familiar with destructuring, we recommend reading the great overview in the book Exploring ES6.

To help you start using destructuring in your code, WebStorm 2019.1 adds a set of new refactorings and intentions that can introduce destructuring to your code. Let’s see how they can be used when working with objects and arrays.

If you have a piece of code in which you are getting multiple values out of an array or an object, you can now simplify it by using the new Replace with object or array destructuring intention (Alt-Enter):

Replace with destructuring

If not all values from the array or object are used, the resulting destructuring will skip the elements:

Replace with destructuring: skipping values

If you want to keep the original assignments, you can use the Introduce object or array destructuring intention (Alt-Enter), or go with the Extract object or array destructuring refactoring:

Introduce destructuring

This intention can be very handy when working with React class components:

Destructuring with React

Some other IDE actions now also default to destructuring. For example, the Insert ‘require()’ quick-fix that works in Node.js apps with CommonJS modules now uses destructuring:

Insert require quick fix

There’s also a new Convert parameters to object action (Alt-Enter) that generates a destructuring parameter for a function:

Convert parameters to object

Improvements in Version Control

Cherry-pick a file from a commit from the VCS log

Now you can cherry-pick select files from a commit, right from the context menu in the VCS log:

VSC: Apply selected changes

Incoming and outgoing commits

The IDE now indicates if the incoming and outgoing commits are available for individual branches in the Branches popup. To see this info, open Preferences/Settings | Version Control | Git and enable the new option, Mark Branches that have incoming/outgoing commits in the Branches popup.

File status for ignored files and folders

In the Project view, the ignored files and folders now use olive-green so that it’s easier to distinguish them from other files. You can modify the color in Preferences/Settings | Version Control | File Status Color.


Please report any issues on our issue tracker. And stay tuned for the next week’s update!

WebStorm Team

Comments below can no longer be edited.

7 Responses to WebStorm 2019.1 EAP #2: intentions for JavaScript destructuring

  1. Junaid Atari says:

    February 2, 2019

    Lovely! +1

  2. Ron says:

    February 2, 2019

    The destructing feature is great! Just one note about it, why use let and not const? Maybe add a configuration to select what type of variable decleration to use.

    • Ekaterina Prigara says:

      February 4, 2019

      Thanks for the feedback! Const will be soon used by default with this intention, please follow this issue for updates: https://youtrack.jetbrains.com/issue/WEB-37081

      • Ron says:

        February 5, 2019

        Great! Thanks for the update 🙂

  3. Pavlo Zhukov says:

    February 2, 2019

    Awesome destructuring features and Git log improvements!

    Only one combined question: why there are no Disqus comments like in PhpStorm blog and no responses?

    I guess current basic form keeps users from leaving comments because each time we need to enter ‘Name’ and ‘Email’. Maybe there are other limitations with replies, votes and so on.

    So why you don’t add much better options like in PhpStorm blog to other blogs?

    • Ekaterina Prigara says:

      February 4, 2019

      Hi Pavlo,

      Several years ago, when the PhpStorm blog enabled Disqus, we’ve decided not to do that because of some UX concerns (to be honest, I don’t remember exactly what the problem was) and we felt that the WordPress commenting feature is good enough for us.
      We are now considering enabling Disqus by default for all JetBrains blogs, but unfortunately, I don’t have any ETA for that.

      • Pavlo Zhukov says:

        February 4, 2019

        Hi, Ekaterina.

        Thanks for your feedback!

        I’m sure you find the best solution for improving comments experience.