WebStorm 2020.3 Beta: More Interactive Debugging Experience, Improved Vue Support, and More
WebStorm 2020.3 has reached the Beta milestone! You can upgrade to the latest build using the Toolbox App or from our website. To catch up on what has already been implemented in v2020.3, check out our previous EAP blog posts.
We’d like to thank everyone who has tried the EAP builds and shared their feedback with us! If you’ve tried them too but haven’t had a chance to reach out to us, please do – here’s our issue tracker.
A special thank you goes to those who filled out the EAP-related survey we announced last month. Your feedback helped us understand how we can improve our Early Access Program! As promised, three lucky winners received their All Products Pack subscriptions.
Below you’ll find some of the highlights of WebStorm 2020.3 Beta. For the full list of issues fixed in this update, see the release notes.
Interactive hints and inline watches when debugging
You might already know that when execution is stopped on a breakpoint, WebStorm shows you hints with the values of the variables right next to their usage. To make these hints more helpful, we’ve introduced some improvements.
First, the inline hints are now interactive. You can click on them to see all the fields that belong to the variable. You can also change the variable values inside the drop-down list by clicking Set Value.
Another update affects watches. Previously, your watches were kept under the Variables tab of the Debug tool window. When you stepped through the code and moved to a different context, the watches could turn into errors.
Though you can still add watches this way, in v2020.3, we’ve solved the issues mentioned above by adding inline watches. Now, you can tie your watch expression to the place in the code where it is relevant. For this, click on Add as Inline Watch in the same popup. Alternatively, you can use the Add Inline Watch action from the context menu.
Enhancements to Vue support
We didn’t have any big updates to Vue support planned for this release, but there’s still a little something to help you work with Vue better.
First, we’ve fixed a number of issues related to Vue 3. For example, WebStorm now supports the newly introduced <script setup> syntax.
The IDE now correctly recognizes the new defineComponent method, letting you use all the coding assistance features with it.
Besides that, we’ve made the IDE correctly apply ESLint code style rules in Vue projects, and we’ve improved the integration with the TypeScript language service. To learn about other Vue-specific improvements, check out our issue tracker.
TypeScript and Problems tool windows integrated
We’ve integrated the TypeScript language service into the Problems tool window and got rid of the dedicated TypeScript tool window. We made this change to declutter WebStorm’s UI and to help you review all the critical problems in your code from one place.
All the errors reported by the service can now be found under the Project Errors tab of the Problems tool window.
To access the buttons that were previously available in the TypeScript tool window, you can use a new TypeScript widget on the status bar. From there, you can compile your code, restart the language service, and jump to TypeScript settings.
Make WebStorm open specific files by default
Starting with v2020.3, it has become easier to make WebStorm the default application for opening specific file types. Go to Preferences/Settings | Editor | File Types and click the Associate File Types with WebStorm… button. In the dialog that opens, select the file extensions you want to open with WebStorm, and then click OK to save changes.
Keep in mind that on macOS, you have to restart your computer for changes to be applied.
The selected file extension associations will remain unchanged when you upgrade to a newer version of your IDE.
That’s it for the biggest highlights. Please report any issues you encounter to our issue tracker, and stay tuned for next week’s update!
The WebStorm team
Subscribe to WebStorm Blog updates
