WebStorm 2020.1 EAP #3: Vuex Support, Code Completion and Resolve for TypeScript Projects with Yarn 2, and More

Ekaterina Ryabukha

WebStorm 2020.1 Early Preview build #3 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 posts.

The Toolbox App is the easiest way to get the EAP builds and keep both your stable WebStorm version and any EAP versions up to date. Or you can download the EAP builds from our website. You can also get notified right from the IDE when a new EAP build is available: go to Preferences/Settings | Appearance & Behavior | System Settings | Updates and select Automatically check updates for Early Access Program.

DOWNLOAD WEBSTORM 2020.1 EAP

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

Here are some of the highlights of WebStorm 2020.1 EAP #3 (build 201.4865.2). For the full list of issues fixed in this update, see the release notes.

Vuex support

We want WebStorm to be the most helpful IDE for working with Vue.js projects. This is why we’re working hard to add support for Vuex, a widely used library for state management in Vue.js applications.

To make the IDE understand Vuex, first, we had to build an internal model of Vuex stores in the IDE. Second, we needed to make it understand the Vuex modules. We’ve already done lots in both directions and we’re now doing some polishing and adding support for specific cases. Let’s look at the things you can already notice and make use of when editing Vue components.

To begin with, the IDE properly suggests values from the Vuex state object:

Getters are also suggested in completion popup in components, and you can easily jump to their definitions.

Also, you can now use code completion and navigation to the definition for mutations and actions in the `commit` and `dispatch` methods in the components:

It also works if you’re using modules:

When using helpers, such as `mapState`, `mapGetters`, `mapActions`, and `mapMutations`, you’ll see completion suggestions, with an option to navigate to the definition:

This is still a work in progress. We’ll soon add better completion for mutations, actions, and getters in the files where the Vuex store is defined.

Using Yarn 2 for TypeScript projects

In WebStorm 2019.3, we introduced some initial support for the features coming in Yarn 2. If you haven’t given it a go yet, waiting for a stable release, now is the time to try it out as the stable release of Yarn 2 is finally here.

We’re extending this support in WebStorm 2020.1. Now, code completion and resolve work properly in TypeScript projects when dependencies are installed using Yarn 2 with the default Plug’n’Play mode. To try this out, first, install Yarn 2 following the instructions from the official website. Then select yarn as the package manager in Preferences/Settings | Languages & Frameworks | Node.js and NPM if you plan to run scripts and install dependencies from the IDE.

You’ll also need to ensure that the TypeScript package is set to yarn:package.json:typescript in Preferences/Settings | Languages & Frameworks | TypeScript.

Coding assistance for environment variables

The last major improvement you can find in the third EAP build is coding assistance for environment variables stored in  `.env` files and nodemon.json. Environment variables are widely used with Node.js and some other technologies supported by WebStorm, so we wanted to make working with them as simple as it is for regular variables and constants.

You’ll now see completion suggestions for variable names after `process.env`, with the preview of `process.env` values in the completion popup and can jump to the file where they are defined with Cmd/Ctrl-click:

That’s about it for notable enhancements. This build also comes with a few smaller but important fixes:

• When using the Quick Definition functionality for a symbol that was imported as default and exported using `export default`, now you’ll see the actual definition instead of the import statement (WEB-20508).
• Compass support is no longer available out of the box, but you can still install it as a plugin (WEB-42537).

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

The WebStorm Team

Subscribe to WebStorm Blog updates

Subscribe form

By submitting this form, I agree to the JetBrains Privacy Policy Notification icon

By submitting this form, I agree that JetBrains s.r.o. ("JetBrains") may use my name, email address, and location data to send me newsletters, including commercial communications, and to process my personal data for this purpose. I agree that JetBrains may process said data using third-party services for this purpose in accordance with the JetBrains Privacy Policy. I understand that I can revoke this consent at any time in my profile. In addition, an unsubscribe link is included in each email.

Submit

Thanks, we've got you!