WebStorm 2019.2 EAP #5: improvements for the Rename refactoring and type hints

Ekaterina Prigara

WebStorm 2019.2 Early Preview build #5 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 #5 (build 192.5438.26). For the full list of issues fixed in this update, see the Release Notes.

Improvements for the Rename refactoring

In this update, we’ve made some changes in the way WebStorm performs the Rename refactoring in JavaScript and TypeScript. The most significant of which is, that now, the usages that the IDE treats as dynamic are not renamed by default and they are grouped together in the Refactoring preview and Find Usages tool window.

Because of the dynamic nature of JavaScript, there could be cases where a dynamic reference is actually a valid usage and should be renamed, but from your feedback, we’ve found that in a lot of cases the refactoring was renaming the symbols too aggressively and it wasn’t the desired or expected behavior.

Here’s an example with TypeScript:

interface myInt {
  target: string
}

function onClick(e: any) {
  console.log(e.target);
}

Previously, e.target was also renamed automatically because e has the type any meaning it could also be myInt. Now, there’s a new option Search for dynamic references in the rename dialog that is unchecked by default, thus, the dynamic usages are not renamed. If you check it, you can then click Preview to review the results and decide which of them you want to be renamed.

In JavaScript code, you will now always see the Preview window before a more complex refactoring that includes not only local variables will be performed.

Another recent change we’ve brought in is the scope selector in the dialog. With it, you can limit the scope of the refactoring.

If you’re experiencing any problems with the refactoring, please let us know by reporting an issue on our tracker. We would really appreciate it.

Type hints in the editor

You might already be familiar with parameter hints – the tiny little hints next to a parameter in a function call which show you the name of the parameter from the function definition.

In WebStorm 2019.2, we are adding new types of hints – one for return types and one for variable types.

By default, you will see the return types for chained methods that are split between multiple lines and return at least 2 different types. It works in both JavaScript and TypeScript.

WebStorm infers the type information from a JSDoc comment or based on the static analysis of your code.

There are also type hints that will show you a variable type or a function return type next to their definition (and look like the type annotations in TypeScript). These hints are currently turned off by default, but we are planning to enable them in the future. You can turn them on yourself in Preferences | Editor | Inlay Hints | JavaScript or TypeScript | Type hints: Show for variables, parameters, and fields and Show for function return types.

In TypeScript, there are also hints for enum values.

Hide frames from libraries in the debugger

The filter icon in the debugger Call stack panel now works more accurately. It allows you to hide all the calls from 3rd-party code (e.g. project dependencies in the node_modules folder, Node.js Core modules, or code related to the module bundler).

This mechanism works on top of the JavaScript Libraries feature in WebStorm, so basically everything that is marked as a library in Preferences | Languages & Frameworks | JavaScript | Libraries will be hidden. The frames from the library code are also marked with a yellow background.

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

WebStorm Team

Subscribe to WebStorm Blog updates

Subscribe form

By submitting this form, I agree to the JetBrains Privacy Policy Notification icon

By submitting this form, I agree that JetBrains s.r.o. ("JetBrains") may use my name, email address, and location data to send me newsletters, including commercial communications, and to process my personal data for this purpose. I agree that JetBrains may process said data using third-party services for this purpose in accordance with the JetBrains Privacy Policy. I understand that I can revoke this consent at any time in my profile. In addition, an unsubscribe link is included in each email.

Submit

Thanks, we've got you!