Early Access Program

WebStorm 2019.2 EAP #6: simplify conditions, improved support for Vue.js and EditorConfig

WebStorm 2019.2 Early Preview build #6 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 | Appearance & Behavior | System Settings | Updates and select “Automatically check updates for Early Access Program”.


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

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

Simplify boolean expressions

To help you keep things simple, WebStorm now warns you if you have a boolean expression in your code that has any extra bits that are not actually required (e.g. condition in the if statement), and offers you a quick-fix (Alt-Enter) to simplify it without changing the logic.

Simplify condition

Here’s a real-life example:

    if (scope) {
      let scopeChain;

      if (typeof scope === 'string' || (!Array.isArray(scope) && typeof scope === 'object' && scope !== null)) {
        scopeChain = [scope];
      } else {
        scopeChain = scope;

The last part of the long condition && scope !== null can be removed because with the first check we have already confirmed that scope is not null.

This inspection is on by default. Or, if you want to check your whole project, you can use the Run inspection by name action from the menu Code and run the Pointless statement or boolean expression inspection.

Improvements in the Vue.js support

The popularity of Vue.js is continuing to grow worldwide. There are also more and more UI libraries are being written for Vue.js all the time. One of the biggest benefits Vue.js offers developers is flexibility in the way they can write components – you can define them using a single .vue file or split them between different files, different combinations of languages can be used, and there are different ways to register components, etc. But all this also makes it quite challenging for the IDE to support all the different UI libraries that can each be written using very different styles.

For the past several weeks, we’ve been working on redesigning our support for Vue.js to make it easier for us to add new smart features and support for new UI libraries.

To improve code completion for different Vue.js component libraries, we have created and supported in WebStorm a special format of metadata called web-types. web-types describe the library’s directives and components (including their props, events, and slots). WebStorm now uses the information about components and their props in code completion and will use more of it in the future.

We have already generated web-types descriptions for the most popular Vue.js component libraries: BootstrapVue, Vuetify, and Quasar. They are available on npm under the @web-types scope. WebStorm downloads them automatically and uses them under the hood when you open a project that uses one of these libraries.

Completion for Vuetify components

If you’re maintaining a Vue.js component library, you can add a description of the components in the web-types format to your module. To help the IDE to locate this file, a link to it should be added to the web-types field in package.json.

On github.com/JetBrains/web-types you can find the JSON schema, scripts that you can use to generate the metadata in the required format, as well as the latest version of descriptions for BootstrapVue, Vuetify, and Quasar. Feel free to contribute and ask any questions.

We’ve also made it easier to create new Vue.js projects in WebStorm: you no longer need to install @vue/cli first to use it in the New project wizard. WebStorm will run it using npx instead. You can select if you want to use the default project template the Vue CLI provides, or answer additional questions about the new project.

Create new Vue app

We’ll keep working on the Vue.js support and you’ll see more improvements later this year.

Install Node.js when creating a new project

If for whatever reason, you haven’t yet installed Node.js on your computer but you want to create a new Node.js, Angular, React, or Vue.js project, WebStorm will download and install Node.js for you – this option is available in the IDE in the New project wizard.

Configure code style per directory using EditorConfig

You can find an .editorconfig file in almost every open source JavaScript project nowadays. In this file, you can describe the basic code style rules that should be applied to the different file types in your project. Many IDEs and editors support EditorConfig out of the box, including WebStorm, and will follow the options selected in it for things like indent size and style.

We’ve decided to go one step further with our support for EditorConfig and create a set of our own properties for the .editorconfig file that will describe all the IDE code style and editor options. The options found in the .editorconfig file in your project will override the code style set in preferences.

Another cool thing is that you can now configure different code styles in different project directories using EditorConfig.

You can create a new .editorconfig  file using the New… action and then select what properties it should add to the file for you – default EditorConfig options or IDE-specific properties that match your current IDE code style settings. Of course, you can then edit the file adding more properties.

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.

16 Responses to WebStorm 2019.2 EAP #6: simplify conditions, improved support for Vue.js and EditorConfig

  1. Avatar

    Alex Smersi says:

    July 3, 2019

    Please typo within article title (condig instead of config)

    • Ekaterina Prigara

      Ekaterina Prigara says:

      July 4, 2019

      Thanks for noticing, will fix it.

  2. Avatar

    Amiram says:

    July 4, 2019

    What happened to the integrated commit window? It is a popup again.

    • Avatar

      Porfirio says:

      July 5, 2019

      I was having the same issue, looks like it is disabled by default, maybe to not confuse people used to the old behavior.

      You can enable it in File | Settings | Version Control | Commit Dialog

      • Ekaterina Prigara

        Ekaterina Prigara says:

        July 5, 2019

        We’ve got some feedback from our colleagues and EAP users and have decided to turn the new dialog off by default in the upcoming 2019.2 release. We’ll introduce some improvements and will try to turn it back on when the Early Access Program for WebStorm 2019.3 starts.

        As it was already mentioned, you can enable it in the IDE Preferences | Version Control | Commit Dialog. We would appreciate your feedback about this feature.

  3. Avatar

    Michael Scharf says:

    July 5, 2019

    What happened to the non-modal commit dialog that was introduced in 2019.1 EAP ? I really really liked it. Is there an option to show this instead of the modal dialog?

  4. Avatar

    Michael Scharf says:

    July 5, 2019

    I meant `2019.2 EAP #5`

  5. Avatar

    Michael Scharf says:

    July 5, 2019

    I found it! In the preferences select *Version Control* -> *Commit Dialog* -> **Commit form the Local Changes without showing a dialog*



    • Ekaterina Prigara

      Ekaterina Prigara says:

      July 5, 2019

      That’s right, you can enable it in the IDE preferences.
      We have decided to turn it off by default in the 2019.2 release and fix some problems that we have discovered and that were reported by the users. We are planning to turn it back on by default in 2019.3.

      • Avatar

        Danny says:

        July 6, 2019

        I don’t agree here. It was always on so imo you shouldn’t turn this off just like that. People upgrade WebStorm and suddenly things start behaving in ways differently than before the update. They have to spend a long time figuring out why suddenly there is no longer a commit dialog. Everytime I update WebStorm I am anxious to see what UI stuff/settings have been changed. It never tells you after an update what you can expect and what settings you have to review due to changes. I spent quite some time figuring out why my desired modal commit dialog disappeared. I even made ticket because I couldn’t find the setting that easily (soooooo many settings with soooo many unexpected names).

        So, don’t change default behavior unless you have a pristine install.

        • Avatar

          Artur says:

          July 8, 2019

          200% agree with what Danny said.

          • Ekaterina Prigara

            Ekaterina Prigara says:

            July 8, 2019

            Thank you for your feedback.
            With every release, we try to make our products better. Sometimes it means that familiar features change but only when we have strong reasons to believe that the change will bring significant benefits to the users.

            We try our best to communicate the changes we make in the EAP blog post and release notes (e.g. here’s the announcement of the new non-modal commit) and provide users with a way to configure the new feature or completely disable it (unfortunately, that results in adding more and more options to the IDE preferences).

            Gathering the feedback from our users on the new features is the main goals of the Early Access Program.

            In this particular case, thanks to the feedback, we have realised that we still need to work more on this feature and make sure that the benefits it brings overweight the cost of the workflow change. That’s why we’ve decided to postpone this feature till the next release.

            We would love to get more feedback from you and all our users – it helps us make our products better.

  6. Avatar

    Phil says:

    July 19, 2019

    Still no support for vuex namespaces. thats disappointing. Lets vote this up

    • Ekaterina Prigara

      Ekaterina Prigara says:

      July 19, 2019

      Hello Phil,
      We are now actively working on improving the Vue.js support. For the upcoming WebStorm 2019.2 release, we’ve been mostly busy with refactoring the plugin code base and we expect to ship more features and user-visible improvements in the next IDE update coming later this year, including this one. Stay tuned!

  7. Avatar

    SY says:

    July 23, 2019

    How about Element UI

    • Ekaterina Prigara

      Ekaterina Prigara says:

      July 23, 2019

      We are planning to add support for more libraries, but you can help us do that by sending a PR to web-types.