WebStorm 2019.2 EAP #2: New Look of Code Completion Popup, Attach Project, and Completion in .gitignore

WebStorm 2019.2 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 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”.

DOWNLOAD WEBSTORM 2019.2 EAP

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

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

Updated presentation of completion suggestions in JavaScript

One of the things we’ve been working on in WebStorm 2019.2 is the presentation of completion suggestions in JavaScript and TypeScript. Our goal is to remove some excessive information and make the list of suggestions clearer and more consistent. At the same time, our colleagues from the IntelliJ Platform team have been working on refreshing the UI of the completion popup. So, here’s what we’ve got to show you right now.

First, we’re making it clearer where each symbol comes from and where it is defined. This information was previously shown next to the item name, but in an inconsistent way.

Now, for symbols that are standard JavaScript APIs, you’ll see a built-in label and DOM for the browser APIs. For other symbols, there will be a namespace and a file or module where it’s defined.

Presentation of completion suggestions

For symbols that have multiple definitions, we’ve removed the (several definitions) label and replaced it with a new icon.

The column that showed the symbol’s visibility has been removed.

Any suggestions that the IDE is less certain about (because they are not based on the exact type information) have a grey font color and icon.

Non strict suggestions

This is still a work in progress, so please tell us what you think! We appreciate all feedback, be it good or bad.

Code completion for mistyped keywords and names

As you type, it often happens that you accidentally mix up some characters. For example, you’ll type funtcion or fnction instead of function. Now, code completion can understand this kind of errors and will still suggest the most relevant option for you.

Completion with typos

This works in all supported languages and for all symbols – keywords, classes, functions, components, and so on.

Completion of default exports in import statements

Using default exports is a very common pattern in many apps. Now, after the import keyword you will see the names of symbols that are exported as default in other modules of your project. And when you select the name, the path to the module will be added automatically.

Сompletion for default exports

Completion and auto imports for these names are available in other parts of your code, too (and have been for a long time).

Support for PostCSS’ simple variables

If you’re using PostCSS with the postcss-simple-vars plugin, you’d be glad to know that the IDE now supports this syntax via the PostCSS plugin, which you can install in Preferences | Plugins.

Completion for PostCSS simple variables

Don’t forget to enable PostCSS as a dialect for your .css files in Preferences | Languages & Frameworks | Style Sheets | Dialects.

Open several projects in one IDE window

When you have a project opened in WebStorm and want to open another project, now you have an additional option – to attach the second project to the opened one, so that you can see both of them in the same IDE window.

Attached project in project view

If you want to close the attached project, right-click on its root in the Project view and select Remove from Project View.

This was one of the most requested features in our issue tracker. It has taken us some time to enable the Attach project action in WebStorm, even though it has been available in other JetBrains IDEs for some time already. We wanted to make sure that tools like linters or test runners worked properly, and that’s what we’ve been working on for the WebStorm 2019.2 release.

There are still some limitations that you should keep in mind when you attach a project:

  • The IDE will keep using the project settings (e.g. code style or inspections profile) of the first main project.
  • The run configuration from the attached project will be ignored and new configurations will be saved in the .idea folder of the main project.
  • If you use TypeScript, the same version will be used in all projects.
  • You can’t close the first project while keeping the attached project opened.

We do not have an estimate yet of when these limitations will be lifted, but we’ll keep you posted.

New in Version Control

Working with .gitignore

As we worked to release WebStorm 2019.1 earlier this year, we worked to improve our support for .gitignore. As a result, the IDE properly handles the ignored files and folders listed in .gitignore and highlights them in the Project view.

Now, we’re making it a bit easier to add unversioned files to .gitignore. To do this in the Version Control tool window, right-click on a file in the Unversioned files group and select Add to .gitignore.

Add to gitignore

Code completion is now available for file and folder names in your .gitignore file. Cmd/Ctrl-click on the name to jump to it in the Project view.

Completion in gitignore

Hide author, data or hash from Log

The Log view in the Version Control tool window shows you the latest commits made in your project. By default, it shows you the commit message, as well as the author, date, and hash of the commit. Now you can hide the columns you don’t need – click the eye icon and then select Show Columns.

Configure VCS Log columns

View Git history for multiple folders

You can now select multiple folders in the Project view and see all the changes made in them. Choose Git – Show History in the context menu or in the VSC menu.

Abort Git merge and cherry-pick

You can now abort a Git merge. The new action is available in the Branches popup when there is an ongoing merge process.

You can also stop a cherry-pick process with a similar action.

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

WebStorm Team

About Ekaterina Prigara

Ekaterina Prigara is WebStorm product marketing manager at JetBrains. She's passionate about new technologies, UX and coffee.
This entry was posted in Early Access Preview and tagged , . Bookmark the permalink.

6 Responses to WebStorm 2019.2 EAP #2: New Look of Code Completion Popup, Attach Project, and Completion in .gitignore

  1. Edoardo Luppi says:

    “For symbols that have multiple definitions, we’ve removed the (several definitions) label and replaced it with a new icon.”. Great choices, this one and the updated item presentation, I like it.
    Monday I was trying out the IDEA EAP and for the “multiple definitions” one I thought something wasn’t working right (asked on YouTrack too!) hahaha. So yeah, I think you’ll need to focus a future blog post on icons alone if you keep changing (for the better)!

    • Ekaterina Prigara says:

      Thanks!
      Sorry for confusion We’ve been working on these changes for a couple of weeks (and still working actually) and we’ve decided to wait a bit before we announce it.

  2. Mladen says:

    Great update! Especially the “presentation of completion suggestions in JavaScript” feature which is much simpler and cleaner now, especially when using TypeScript.

    Version control features are also a welcoming ones. One note: I opened another project by attaching it to the current IDE Window, then I didn’t like it and I removed it (by selecting Remove from Project View) which removed the project, but the git root left hanging. So, I had to delete git root, which wasn’t an easy task for me (so I had to Google it to find out how). So, the first issue is that the git root was left hanging (my main project uses git sub-modules, maybe that was the reason for not de-attaching git root) and the second one is that you could maybe consider adding an option in the VCS drop down menu for managing git/VCS roots. Though, this happened with previous EAP version (192.4205.48).

    Also, this EAP version is currently very unstable for Angular (I’m reporting errors through ea.jetbrains.com), so I’ll wait for a more stable version.

    • Ekaterina Prigara says:

      Thank you for the feedback!
      We have fixed the issue with the git root and it will land in the next EAP update.
      Would appreciate it if you also report the problems with Angular on our issue tracker because we might need some additional information (e.g. a sample project) from you. Thanks!

  3. Edoardo Luppi says:

    Question: let’s say I accidentally clicked on “Don’t show again” for the package.json Import pop-up. How do I enable it again? I searched every configuration file for a possible record but couldn’t find it.

    • Ekaterina Prigara says:

      Hi Edoardo, at the moment, there’s no easy way to re-enable this popup. Here’s a related issue that you can follow: https://youtrack.jetbrains.com/issue/WEB-38864 We are now discussing ways to address it.
      As a workaround, you can remove the block containing PackageJsonUpdateNotifier from the workspace.xml file in the project .idea folder.

Leave a Reply

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