WebStorm 2019.3: Faster Startup, More Advanced Vue.js Support, Smarter Code Completion for JavaScript, and More

💫WebStorm 2019.3 is now available! 💫

WebStorm 2019.3, the last major update this year, comes with faster startup, significant enhancements in Vue.js support, even smarter code completion for JavaScript, and a lot of lingering bugs fixed.

DOWNLOAD WEBSTORM 2019.3

webStorm-2019-3-released

In this blog post, we’ll go beyond what’s covered on the What’s New page and review the new functionality and major improvements in more detail. The blog post is based on the information from our previous EAP blog posts, so depending on how regularly you follow our blog, you may stumble upon some things you’re already familiar with.

The new features and improvements fall into these categories:

  • Performance: faster startup and improved memory usage when debugging with source maps.
  • Frameworks: more advanced code completion for Vue.js, quick documentation in Vue.js projects, better support for props in React components, and enhancements in Angular support.
  • JavaScript and TypeScript: template language injections, name suggestions for new symbols, and support for TypeScript 3.7.
  • HTML and Style Sheets: completion for CSS libraries on CDN, an option to change the quote style for CSS, and initial support for @use and @forward rules in Sass.
  • IDE improvements: a single action for running tools and configurations, unbundled Dart support, automatically enabled global file watchers, and a way to search in the selection only.
  • Tools: support for the upcoming Yarn 2 release, return values in the debugger, and a new action for turning npm install notifications back on.
  • Version Control: reworked UI for cloning projects, updated Compare with Current action for git branches, an option to push changes from any branch, a faster way to commit changes, and new actions for checking out branches.

Performance

Faster startup

In the last two release cycles, we’ve devoted a lot of effort to reducing the time that you have to wait for the welcome screen to show and for the IDE to open already indexed projects. As a result, WebStorm 2019.3 handles this faster than previous versions did.

Let’s clarify what exactly we mean by “faster.” We’ve measured the startup times of WebStorm 2019.3 on different operating systems, and compared these numbers with the ones for v2019.1 and v2019.2. To arrive at a meaningful comparison, we used the same project everywhere – a React application generated using create-react-app, with the app.js file opened in the editor. Here’s what we’ve got:

webstorm-startup-performance-chart

On average, the startup time has been reduced by 20% compared to previous versions. However, keep in mind that the actual results may vary depending on your network configuration and factors like the size of your workspace, the age of your machine, and your antivirus configuration.

This is still a work in progress. We have some other major changes planned for WebStorm 2020.1, including, as usual, more optimizations of project indexing.

Improved memory usage when debugging with source maps

To give you a better experience debugging with source maps, we’ve made the debugger use soft references in such cases – now the memory can be easily freed when its limit is reached.

If you now see a memory indication in the IDE status bar (Preferences/Settings | Appearance & Behavior | Appearance – Show memory indicator), click it to free the soft-referenced memory.

Frameworks

Significant improvements in code completion for Vue.js

One of the main goals for this release cycle was to make Vue.js support more advanced so you can build great Vue.js applications with less effort. We’ve approached this goal from different angles, starting with code completion.

First, if you’re not used to having all your Vue.js components defined in a single .vue file, we have some great news for you: WebStorm can now understand the link between the different parts of the component located in separate files and deliver accurate code completion suggestions for props, data, and methods.

vue-component-with-separate-files

Second, WebStorm now shows you code completion suggestions for slot names. This works for the slot names defined in your project components and such component libraries as Vuetify, Quasar, and BootstrapVue.

vue-slots-from-vuetify

Third, if you copy some code from the script section of a Vue component and paste it into another component, WebStorm will paste the required import statements as well, the same way it works for regular JavaScript files.

copy-paste-with-import-in-vue-files

Lastly, we’ve found and fixed a performance problem with completion in Vue templates which was especially noticeable in projects with Vuetify, so now tags and their attributes show up in the completion popup without any delay.

Quick documentation in Vue.js projects

With WebStorm 2019.3, you can now check out the documentation for components and directives defined in Vue.js and in some popular component libraries. For this, simply press F1 on the name of a component or directive in your code.

documentation-for-the-vue-framework

You can also press F1 when the completion popup is open. To jump to the extended documentation and examples on the library’s website, press Shift-F1 or click the link at the bottom of the popup.

Better support for props in React components without propTypes

For components without propTypes, WebStorm will no longer report an unresolved property for props.something in the component definition if props are passed in the component usage.

Here’s an example. Previously, props.firstName in the Greeting definition was always marked as an unresolved variable unless you used propTypes:

warning-about-unresolved-react-prop

In WebStorm 2019.3, if Greeting is used and has an attribute firstName, it won’t be marked as unresolved:

react-prop-is-resolved-after-its-usage

And if you’ve added an attribute, you’ll see this name in the completion suggestions after props or this.props:

completion-for-used-react-props

Enhancements in Angular support

In WebStorm 2019.3, we’ve added support for using SVG as Angular templates, meaning that the IDE now understands directives and bindings in SVG tags and in .svg files. Plus, WebStorm 2019.3 comes with support for schematics with Angular 9.

JavaScript and TypeScript

Template language injections

Every so often, you may need to work with code fragments written in a language different from the main language of the file, like an HTML string in a JavaScript file. As you may know, WebStorm is helpful enough to give you code completion for those bits of code. Now, it also lets you inject them into your files, including Pug (ex-Jade), Handlebars, and EJS.

The technical term for this mechanism is language injections. To use it, press Alt-Enter, select Inject Language or Reference, and then pick a language from the list.

template-language-injections

Name suggestions for new symbols

As you add new variable and parameter names in JavaScript or TypeScript files, you’ll now get name suggestions based on the names of classes, interfaces, and type aliases defined in the project, standard libraries, and dependencies you’re using.

name-suggestions

For new variables, functions, classes, and interfaces, you’ll also get suggestions for names that were already used in the same scope but haven’t yet been defined and are marked as unresolved.

For example, if you’ve decided that you want to use some new function, you can first call it and then type function to create it and see this name suggested. Of course, you can also press Alt-Enter on the usage and use the Create Function quick-fix.

suggestions-for-functions-names

Support for TypeScript 3.7

In WebStorm 2019.3, we’ve introduced built-in support for key TypeScript 3.7 features, such as optional chaining, nullish coalescing, and assertion signatures – so you can work with them more efficiently. Plus, we’ve updated the bundled TypeScript version to 3.7.2.

Better detection of TODOs in JSX code

We’ve fixed a bunch of issues related to the TODO comments in JSX code. For example, now WebStorm sees TODO comments in multiline JavaScript blocks inside JSX tags and can handle these comments better in Flow files.

todos-in-jsx

HTML and Style Sheets

Completion for CSS libraries from CDN

If you’re using Bootstrap or another CSS library in your project and you have it linked from a CDN in your HTML file, you can now get completion for the class names from that library, without adding its sources to the project. To enable this, press Alt-Enter on the link in the HTML file and select Download library.

download-lib-from-cdn

The downloaded CSS libraries are shown the same way as the JavaScript libraries. They can be disabled or removed in Preferences/Settings | Languages & Frameworks | JavaScript | Libraries.

completion-for-bootstrap-classes

Changing quote style for CSS

You can now configure whether double or single quotes should be used in CSS, SCSS, and Less files. The new option Quote Marks is available in Preferences/Settings | Editor | Code Style | CSS, SCSS or Less – Other. Select Enforce on Reformat if you want to apply the selected quote style not only when using code completion to add new code, but also when reformatting the code.

css-quote-style

Initial support for Sass’s @use and @forward rules

WebStorm now understands Sass’s new @use and @forward rules and provides completion for the path after them. Smarter completion and resolve for imported symbols are coming soon.

sass-use

IDE Improvements

A single action for running tools and configurations

With Run Anything, you can quickly start run configurations and tools like npm and Yarn, as well as open recent projects. To use it, press Ctrl twice or click the icon on the right-hand side of the navigation bar.

To launch an existing run configuration, enter its name and then press Enter to start it.

If you want to run an npm script, you can type in npm run and then select the script name from the suggestions. To see all available commands, type in ?.

run-anything-popup

Unbundling Dart support

Starting with WebStorm 2019.3, we’re unbundling the Dart plugin in order to shorten the release cycles for it. Right now, bundled plugins can only be updated together with an update of the entire IDE. When a plugin is available separately, it can have its own release cycle. So, if you use Dart, you’ll now need to install the same Dart plugin in Preferences/Settings | Plugins.

The Dart plugin is used a lot in Android Studio which is based on an earlier IntelliJ Platform version, and this change will make it easier to backport the latest fixes to the plugin version compatible with Android Studio and previous versions of IntelliJ IDEA Ultimate and Community.

Enabling global file watchers for all new projects

If you’re using a third-party tool like Prettier for a project and have it configured via a file watcher, it’s likely you may want this configuration to be automatically applied to all the new projects you create.

In WebStorm 2019.3, you can achieve this by enabling global file watchers by default. To enable them, go to Preferences/Settings | Tools | File Watchers, add a new global file watcher and then tick the Enabled checkbox.

Searching in the selection only

When searching for text in a file with Cmd/Ctrl-F, you can now limit the search to only the selected part of the code:

  • Select a portion of code, press Cmd/Ctrl-F, and enter your search query.
  • Or press Cmd/Ctrl-F first and type your query, then select the code, and click the
    In Selection icon, or press Cmd/Ctrl-F once again. This way you’ll switch from searching the whole file to searching within the selection.

Find in selection

Tools

Switching npm install notifications back on

When you open a project or update from a VCS, WebStorm checks that all the project dependencies are installed and updated. If not, it suggests that you run npm install or yarn install.

If you have accidentally dismissed this notification and now want to get it back, we’ve added an action called Enable Notifications about Installing Dependencies from package.json, which you can find by using the Find Action popup (Cmd/Ctrl-Shift-A).

A new option for showing return values in the debugger

We’ve added a new Show Method Return Values option to the debugger (click the gear icon on the debugger’s left panel to enable it). This allows you to see what value the method returns without using console.log, creating an extra variable, or using Evaluate Expression.

With this option on, you’ll see the return value right on top of the variables view as soon as you step through this line of code (pause on it first and then click Step over or Step into). You can change its value if needed.

Enable Show Method Return Values in debugger tool window

Support for the upcoming Yarn 2 release

A new major Yarn version is coming later this year with the Plug’n’Play feature – a completely new installation strategy for project dependencies. In the past month, we’ve worked together with the Yarn team and put a lot of effort into making sure that all the key features from WebStorm work as expected when using Yarn 2.

The first and most important thing we had to do was to locate and properly index a project’s dependencies in order to provide code completion and navigation. As before, WebStorm creates a JavaScript Library from these files called Dependencies from package.json. You can disable it or configure its scope in Preferences/Settings | Languages and Frameworks | JavaScript | Libraries.

yarn-dependencies-as-library

Second, we made sure that all the integrated tools like linters and test runners can still be used when installed using Yarn 2.

Please note that since Yarn 2 hasn’t yet been officially released, there might still be some unexpected changes in it that might affect the way WebStorm integration works. Also, please keep in mind that some tools and libraries don’t fully support Yarn 2.

If you want to give Yarn 2 a try now, you can find the installation instructions in their documentation.

Version Control

Reworked UI for cloning projects

When you clone a project from a version control system, you’ll now see an updated Get from Version Control dialog shown on the welcome screen and the VCS menu.

new-ui-for-get-from-vcs

With this redesign, we mainly wanted to improve the experience of getting projects from GitHub. You can now select GitHub on the left side of the dialog and log in to your account from there. After you’ve done that, you can scroll through the list of repositories in your account and in the organizations you belong to, and find the one you want to clone.

new-ui-get-from-github

Updated “Compare with Current” action for git branches

Based on your feedback, we’ve started a new iteration over the Compare with Current action in the Branches popup.

With this action, you can see the difference in commits between two branches in the Log tab. We’ve added a new title which explains what commits are shown (Commits that exist in branch X but don’t exist in master). With the Swap branches action, you can compare the branches the other way around (e.g. see commits that are in the master but not in branch X).

Compare branches

With the action Show Diff with Working Tree in the Branches popup, you can see what files differ between the branches. You’ll find a similar Swap branches action at the top of this dialog.

Pushing changes from any branch

You can now push changes from any branch right from the Branches popup – select a branch and then use the Push action in the menu.

push-changes-from-any-branch

Previously, you could only push changes from the branch you’re currently working with. That meant that you had to switch to the branch first and only then push the changes.

New actions for checking out branches

We’ve replaced the Checkout as… action for branches with two separate actions: Checkout and New Branch from Selected….

When used on a remote branch, the new Checkout action will first create a local branch with the same name and then set it up to track the remote branch.

You can use the New Branch from Selected… action if you want to check out a local or remote branch but don’t want to track it.

A new way of committing changes

Now you can make commits right from the Local tab of the Version Control tool window – a separate dialog won’t block the rest of the IDE. To enable this, tick Commit from the Local Changes without showing a dialog in Preferences/Settings | Version Control | Commit Dialog.

Please share your feedback with us about WebStorm 2019.3, and report any issues you encounter on our issue tracker. Thank you!

The WebStorm Team

About Ekaterina Ryabukha

WebStorm Product Marketing Manager at JetBrains
This entry was posted in Release Announcements and tagged , . Bookmark the permalink.

43 Responses to WebStorm 2019.3: Faster Startup, More Advanced Vue.js Support, Smarter Code Completion for JavaScript, and More

  1. Ivan Saveliev says:

    Congratz with the release! Nice job

    Unfortunately don’t see a release version in my JetBrains Toolbox, 2019.3 RC is the latest version available. Checked during > than 1 hour

  2. wintercounter says:

    So there still won’t be an option to add one watcher for multiple file types. Currently I have watcher set up separately for Prettier for: ts, tsx, js, jsx, css, scss, md, json. 8 watchers… At least I don’t to enable them now.

  3. dleong says:

    Code completion for my Vue projects is gone as soon as I have upgraded to 2019.3. The IDE also tries to verify my Vue components against XML syntax and keeps telling me I have “empty tags” (when there are no empty tags) in my HTML portion of the file. I have restarted the app multiple times and disabled the unsupported plugins. Moreover, code completion for my Angular is _extremely_ slow – it took 5 seconds for it to detect a simple JS error!

  4. Michael Vashchinsky says:

    After an upgrade to 2019.3:

    – no code hints for libraries
    – no code hints for NPM packages
    – no code hints for local imports
    – SCSS
    – no code hints
    – does not recognise local variables
    – in *.vue files
    – does not recognise local variables
    – double-click on a variable does not select it
    – no code hints for component’s props/data/etc

    And there are more problems…

    Catalina 10.15.1
    Was upgraded from 2019.2 to 2019.3

    • Ekaterina Prigara says:

      Hello Michael,
      Sorry to hear about all the problems that you’re experiencing. Can you please try to invalidate the IDE caches first (menu File | Invalidate Caches and Restart)? If it doesn’t help, we would really appreciate it if you could send us the IDE logs (menu Help | Compress Logs) and provide a bit more specifics about your project and the problems. Here’s a link to our issue tracker: https://youtrack.jetbrains.com/issues/web Thanks!

      • Michael Vashchinsky says:

        Hello, Ekaterina,

        Thank you for the quick response.

        I have noticed now that the icon of on “eye” in the upper right corner of an opened file (“Performing Code Analysis”) stays and does not change.

        I did the “File | Invalidate Caches and Restart”, but it didn’t help.

        I have uninstalled WebStorm, downloaded and installed fresh one – still same problems.

        Just did the “File | Invalidate Caches and Restart” – didn’t help.

        • Ekaterina Prigara says:

          Hi Michael,
          Please send us the IDE logs. Unfortunately, there’s nothing we can do to diagnose the issues without looking at the logs. Thanks!

          • Michael Vashchinsky says:

            Just sent the logs to support (Help | Contact Support…)

            (Under work email)

            Thank you.

          • Michael Vashchinsky says:

            With the hint from JetBrains support (that was super quick and informative) I have my WenStorm functioning properly!

            The support suggested to disable HOCON plugin, but it got an update and seems like that was the problem: https://github.com/AVSystem/intellij-hocon/issues/20

            Before reading the mail from the support I disabled all the 3rd party plugins, restarted WebStorm, then re-enabled them (group by group, in order to find out which one is causing the trouble).

            Eventually all the 3rd party plugins are enabled and everything works.

            Thank you!

          • Ekaterina Ryabukha says:

            You’re welcome, we’re happy to hear that everything works fine for you now!

  5. Dominic Laudate says:

    After upgrading on macOS 10.14.6, the scrolling in the editor feels wrong when using a Magic Trackpad 2. It feels like it has a delayed acceleration now which is vastly different feeling than before. I tried on the last version and do not experience the same effect. It affects all menus as well, including the code editor and settings.

    • Ekaterina Prigara says:

      Hi Dominic,
      Have you noticed the change only on the Magic Trackpad or on the built-in trackpad too? Can you please try to disable Smooth Scrolling in the IDE Preferences | Appearance and Behavior | Appearance? Does it make any difference for you?

      • Dominic Laudate says:

        It happens on both trackpads. I disabled smooth scrolling and it makes no difference. I tried going back to 2019.2 on my laptop and I do not experience this.

  6. Daniel says:

    In Distraction-Free mode, closing editor windows behavior has changed. Now i need to CMD+W multiple times in order to close that window.

    How do I switch back to the previous behavior?

  7. Idan Go says:

    Seems like this upgrade break the autocomplete… try to write on js the following:
    document.
    there are not suggestion after the period being typed

    • Michael Vashchinsky says:

      This is my case also.

      The “eye” icon does not change into “V” ever. No autocomplete.

    • Michael Vashchinsky says:

      Hello,

      In my case that was probably outdated HOCON plugin.

      In any case – after I disabled all the 3rd party plugins, restarted WebStorm, then re-enabled them (one-by-one in order to find the one that was causing the trouble) – all is working properly.

      (I also uninstalled all the incompatible ones)

      Hope that helps.

  8. dotqin says:

    How to hide the new top title bar?

  9. Paul Eustice says:

    Has the ‘revert’ command been removed for some reason? There’s no mention of it in your notes above but I don’t see it in my right click context menu on OSX High Sierra in either the main code pane or the Version Control pane.

  10. Rob says:

    Lots of good looking stuff in this post! Will any of these features be coming to PhpStorm?

    My understanding is that PhpStorm is basically WebStorm with added capabilities. Is this correct? I’d hate to have to run two IDE’s, but would definitely benefit from the JavaScript tooling.

  11. This is just a very small detail, but did the font rendering in the editor change? I was using Fira Code on an external monitor plugged to my Macbook, and it seems bolder than before. That is not a big issue, just to clarify. To solve that, I just changed to Fire Code Light :-P

    By the way, I never noticed the JetBrains Mono font before, but it’s good to know that it exists. Maybe I will use it on Ubuntu.

    • Ekaterina Ryabukha says:

      Hello Rodrigo,

      You’re right, it’s slightly changed. If you find it inconvenient, please vote for this issue https://youtrack.jetbrains.com/issue/IDEA-227880.

      Yes, we’ve been working on creating our own font for a while but haven’t officially announced it yet :)

      • Ekaterina, thanks for the reply!

        And if I can make a wish for Christmas, is that you never ever ever ever ever remove Find in Path dialog. That is probably the main reason why I pay for WebStorm. :-DDDD

        Keep the good work and the customer relationship that you have!

        • Ekaterina Ryabukha says:

          You’re welcome, Rodrigo!

          No worries, we weren’t planning to remove Find in Path, we find it a valuable functionality too :)

          Thanks!

  12. Stefan Rein says:

    Thank you for all of the improvements. On Mac OS Mojave 10.14.6 there is a solid black 1px border / line on the Window Frame Title Bar, when Webstorm is not in Fullscreen mode.
    Is this intended?

Leave a Reply

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