We’ve reworked the New Project wizard available in WebStorm’s Welcome screen. In v2022.2, we removed the project templates for AngularJS, Cordova, and Meteor. In this release we’ve added new project templates for Vite and Next.js, as well as updated the Vue one so that it follows the latest standards.
WebStorm now supports Vitest, a Vite-native unit test framework! You can run, re-run, and debug your tests in all of the key ways you’d expect, including through gutter icons. Also, watch mode is enabled with the All Tests scenario by default. Snapshot testing and coverage are supported in watch mode, too, giving you near-instant feedback on coverage when coding.
WebStorm can now take care of unresolved imports and will offer suggestions for importing Vue components. We’ve also supported the props destructure syntax, improved the behavior of code completion and type checking for Vue library component props, and fixed several Nuxt 3 issues.
There’s one more improvement for Vue in this release that is worth taking a
closer look at – new code snippets, or
as they are called in WebStorm. You can use them to add common constructs
script setup or
export default faster.
Go to Preferences / Settings | Editor | Live Templates and expand the
Vue section to browse the available code snippets.
We’ve added support for type narrowing in Angular templates, which
will provide more precise type information and better code completion
suggestions. Additionally, WebStorm now
.angular cache folder from global searches
to help provide better search results.
Improvements to Svelte support, which is available as a separate plugin, will now be shipped with our new IDE builds, just like we do for Angular and Vue. This will help us avoid problems with incompatible version ranges and get feedback faster.
WebStorm 2022.3 supports new CSS features such as the
@supports at-rule, which associates a block of statements
@supports condition. Viewport units,
ranged media queries, container queries, cascade layers,
and color modification functions are also now supported.
The Code Vision feature from Rider and IntelliJ IDEA has made it into WebStorm! Code Vision gathers various metrics for types and type members and displays this information near their declarations. This will make it easier to track the usages of various classes, methods, type aliases, and interfaces in your code. Go to Preferences / Settings | Editor | Inlay Hints to configure Code Vision.
We’ve shipped several fixes for working with monorepos and TypeScript in WebStorm. The navigation, auto-import, and rename refactoring features will all now work more reliably. This works for all the popular package managers, including npm, Yarn, and pnpm.
Earlier this year, we announced a closed preview program for the new UI for JetBrains IDEs. With this first step, we aimed to introduce the reworked look and feel of our IDEs to a limited number of users. Now we invite you to switch to the new UI in Preferences / Settings | Appearance & Behavior / New UI and tell us what you think. To learn more about the changes, watch this webinar recording.
To make it more convenient to arrange your working space and interact with WebStorm on multiple monitors, we’ve implemented the option to drag tool windows out of the main window and dock them to floating editor tabs.
The algorithm behind the Search Everywhere result list has been fine-tuned to make its behavior more predictable and accurate. The IDE will freeze the first search results that appear and won’t re-sort them as more options are found. Also, the ML ranking is now enabled for the Files tab, resulting in improved accuracy of the lookup results.
The new Settings Sync plugin is now available for WebStorm. The new solution is capable of syncing most of the shareable settings from the platform, bundled plugins, and some third-party plugins. Please note that we are discontinuing support for the old IDE Settings Sync plugin and unbundling the Settings Repository. For more information, refer to this blog post.
WebStorm’s built-in learning tool, Tip of the Day, has been fine-tuned. We’ve added tip rating functionality and reworked 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.
We’ve implemented several UI improvements for the Bookmarks feature. For example, you can now bookmark files from editor tabs by right-clicking on a tab and selecting Bookmarks from the context menu. Read this blog post to learn more.
We've reworked the behavior of the paste action (Ctrl+V). Now when you copy (Ctrl+C) or cut (Ctrl+X) a line without any code selected, the paste action will add the contents of the clipboard above the current line, not at your caret as it did in previous versions. You can disable this behavior in Preferences / Settings | Advanced Settings.
We’ve added new functionality to preview and explain what will happen if you apply the selected action. The preview appears when you open the list of available intention actions and hover over the different options. You can disable the feature by pressing Ctrl+Q while the list of intention actions is open.
There’s a new quick-fix to suppress inspections with a comment in YAML
files, including docker-compose.yml, Kubernetes files, and OpenAPI specifications.
We’ve also introduced a convenient option to fold multiline comments
that make up a block of 3 or more lines and start with
# – use the
plus and minus icons to the left of your comment.
WebStorm now supports connections to Docker that run in WSL. Also,
there’s a new Pull Docker image intention, full
.dockerignore files and heredoc syntax,
and the ability to set up Docker connections using Docker Contexts. Read
this blog post to learn more.
We’ve reworked the Review list UI to help reduce cognitive load and provide the most important information about requests at a glance. As part of this, we’ve also ensured a consistent look and feel across all supported review platforms.
WebStorm 2022.3 brings an alternative way to work with projects running in WSL2 file systems. Instead of running a full IDE on Windows, you can launch your IDE backend directly in WSL2. You can then connect to it the same way you would connect to any remote machine when using remote development in WebStorm.
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. WebStorm now also provides the сrypto API, making your code capable of computing the md5 or sha1 hash values for an HTTP request.
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 over different lines. To control your preferences regarding HTTP request formatting, go to Preferences / Settings | Editor | Code Style | HTTP Request | Wrapping and Braces.