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

Posted on by 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:

values-from-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:

completion-for-mutation-name

It also works if you’re using modules:

navigation-with-vuex-modules

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

completion-when-using-map-helpers

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.

selecting-yarn-2-in-preferences-1

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

selecting-yarn-2-in-preferences-2

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:

preview-of-values-for-process-env

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

Comments below can no longer be edited.

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

  1. Ivan Saveliev says:

    February 6, 2020

    You are doing a fantastic job, thank you!

    • Ekaterina Ryabukha says:

      February 7, 2020

      Thank you for such kind words, Ivan!

  2. Attila Szeremi says:

    February 6, 2020

    Vuex support, what a surprise treat 😮

  3. Alfarish Fizikri says:

    February 7, 2020

    Amazing! But any updates about nuxt.js code inspection support in the future EAP feature release?

    • Ekaterina Ryabukha says:

      February 7, 2020

      Right now, we’re actively working on adding Vuex support, there are still a lot of things that we need to implement. Once everything is implemented, we’re likely to start working on adding Nuxt.js support as well because it’s also on top of our list for Vue.js. We’ll update this issue (youtrack.jetbrains.com/issue/WEB-36008) once we start working on it. Sorry for keeping you waiting!

  4. Kris says:

    February 20, 2020

    This looks really promising, is this also coming to the regular IntelliJ editor?

    • Ekaterina Ryabukha says:

      February 20, 2020

      Hi Kris,

      All the WebStorm functionality is available in IntelliJ IDEA Ultimate, either out of the box or by installing plugins.

  5. Kévin Berthommier says:

    June 3, 2020

    Git hooks fails with Yarn 2, commit mdg in my case:

    /home/bertho/oa/.yarn/releases/yarn-sources.js:2
    module.exports=function(e){var t={};function r(n){if(t[n])return t[n].exports;var i=t[n]={i:n,l:!1,exports:{}};return e[n].call(i.exports,i,i.exports,r),i.l=!0,i.exports}return r.m=e,r.c=t,r.d=function(e,t,n){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},r.r=function(e){“undefined”!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:”Module”}),Object.defineProperty(e,”__esModule”,{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&”object”==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,”default”,{enumerable:!0,value:e}),2&t&&”string”!=typeof e)for(var i in e)r.d(n,i,function(t){return e[t]}.bind(null,i));return n},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,”a”,t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p=””,r(r.s=471)}([function(e,t,r){“use strict”;var n=thi
    SyntaxError: Unexpected identifier
    at Object.exports.runInThisContext (vm.js:53:16)
    at Module._compile (module.js:513:28)
    at Object.Module._extensions..js (module.js:550:10)
    at Module.load (module.js:458:32)
    at tryModuleLoad (module.js:417:12)
    at Function.Module._load (module.js:409:3)
    at Function.Module.runMain (module.js:575:10)
    at startup (node.js:160:18)
    at node.js:449:3

    • lena_spb says:

      June 4, 2020

      Hello!

      does the same hook work if you run it in terminal, outside of the IDE? what Node.js version do you use? Does the issue persist if you start the IDE from the terminal?