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”.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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
Subscribe to WebStorm Blog updates
