Early Access Program

WebStorm 2022.3 Beta Is Here With Vitest Support

WebStorm 2022.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, check out our previous EAP blog posts.

DOWNLOAD WEBSTORM 2022.3 BETA

We’d like to thank everyone who has tried the EAP builds and shared their feedback with us! If you’re among those who have tried them but haven’t had a chance to respond yet, please do so via our issue tracker.

Vitest support

As you may know, we added Vite support earlier this year. Now we’re happy to say that WebStorm 2022.3 will also support Vitest, a Vite-native unit test framework! Let’s take a look at what’s included.

Firstly, you can run all of your tests, a folder, a file, or a single test in all of the key ways you’d expect, including gutter icons. The same is true for debugging and re-running failed tests.

Running Vitest tests from WebStorm using the various run options

The Vitest watch mode is directly supported for the All Tests scenario. For a subset, you can just add --watch to your run configuration.

Setting up a Vitest run/debug configuration

Vitest has its own “snapshot” testing, which WebStorm also supports.

An example of the snapshot icon in Vitest tests

Finally, Vitest coverage is supported. It will even work in watch mode, giving nearly-instant visual feedback on coverage when coding.

Vitest test console shopwing that it is watching the test and will instantly tell when it fails

We still have more to do in this release cycle and the next. We’ve enjoyed implementing the Vitest support so far and would love your feedback!

Improvements for the HTTP Client

The HTTP Client now provides better formatting options for requests with long URLs. You can also use the Put query parameters on separate lines intention action to break the query into smaller fragments on different lines.

Drop down showing the put query parameters on seperate lines intention

To control your preferences regarding HTTP request formatting, we’ve implemented a new option in Preferences / Settings | Editor | Code Style | HTTP Request | Wrapping and Braces.

HTTP settings options for wrapping and braces

Additionally, the HTTP Client now supports script blocks executed before requests. You can generate some data before request execution and put it in the final request using variables.

Initializing a variable in the HTTP Client

WebStorm now also provides the сrypto API, making your code capable of computing the md5 or sha1 hash values for an HTTP request.

A dropdown for the crypto variables available for autocompletion

For simple cases, the IDE now features a new set of random variables.

Generating random variables in the HTTP Client

Improved tips of the day

For v2022.3, we’ve enhanced the Tip of the Day feature – a built-in learning tool that helps you explore WebStorm and its features. To open the Tip of the Day dialog, select Help | Tip of the Day from the main menu. You can untick the Don’t show tips on startup box if you want WebStorm to show these tips to you as you start working.

To make the tips more useful and easier to digest, we’ve implemented a number of changes to the dialog’s appearance and behavior. Each tip now has a heading to help you understand which area of the IDE is being described and quickly decide if you want to learn more about the topic or skip it.

Image of the improved Tip of the Day dialog

We’ve also added tip rating functionality and fine-tuned the algorithm for how tips appear. This should make them more relevant to your experience with the IDE and the project you’re working on.

Visual formatting layer in Reader mode

WebStorm 2022.3 provides the ability to read code in your preferred style, which might differ from the current file formatting. You can now apply a visual formatting layer in Reader mode. This will adjust how the code is presented in accordance with the formatting scheme you have set up, without changing the formatting of the real code.

Uing the reader mode with the visual formatting layer enabled

That’s it for today! For the full list of improvements available in WebStorm 2022.3 Beta, check out the release notes.

The WebStorm team

image description