What’s new in WebStorm 2022.2

We’ve been actively working on support for Angular 14 in WebStorm. The most important addition we’ve made in this release is support for Angular standalone components. WebStorm now properly recognizes components, directives, and pipes marked as standalone: true.

WebStorm 2022.2 provides better support for Vue 3. For example, it now understands type narrowing in v-if/else directives. Also, support for Pinia, the Vue team’s recommended state management solution that works as a global store, has been improved. Both completion and resolve now work in Vue with the Pinia library and you can navigate to state properties and actions defined in the store.

WebStorm 2022.2 comes bundled with TypeScript 4.7, supporting new language features like moduleSuffixes and ESM in Node.js. It will automatically insert the .js extension into the import statement if module is set to node16 or nodenext in your tsconfig.json file. Additionally, WebStorm supports the typesVersions field in package.json files.

Support for remote development workflows is now available out of the box under the Beta label. You can connect to a remote machine with an IDE backend running and work on a project located there as if it were located on your local machine. To get started, go to the Remote Development tab on WebStorm’s Welcome screen. For more information, see this blog post.

In this release, you’ll find several improvements for working with Docker. WebStorm now automatically connects to Docker when you restart the IDE. Additionally, there is a new Copy Docker Image action and integration with Colima and Rancher.

WebStorm 2022.2 includes support for WebSocket connections. We’ve also added support for GraphQL requests, making it possible to send GraphQL queries over HTTP and WebSocket protocols. Additionally, you can now select a run environment from a gutter icon before you run it.

WebStorm now has built-in integration for JetBrains Space, our all-in-one solution for software teams. You can connect the IDE to your organization in Space to view and clone project repositories, write complex scripts that use Space APIs, and review your teammates’ code.

When you zoom into or out from your code within the editor, you can now see an indicator that shows the current font size and the option to revert it back to the default.

We’ve introduced the ability to change the font size across the whole editor with a keyboard shortcut. You can now press Alt+Shift+. to increase the font size. Press Alt+Shift+, to decrease it.

WebStorm has dozens of inspections that find and report problems in your code so you can keep it error-free. In v2022.2, we’ve improved the way you configure in-editor highlighting for those inspections. Go to Preferences / Settings | Editor | Inspections, look for the inspection you need, and change the value under Highlighting in editor.

When one of your files is detected as plain text and doesn’t feature proper highlighting, WebStorm now suggests resetting the potentially unwanted file type association right from the editor, without going to Preferences / Settings and configuring the file types manually.

You can now jump to your code completion settings right from the code completion pop-up in the editor whenever you need to change how autocompletion works.

Run configurations let you run, debug, and test your code. We’ve added the Current File option to make it easier for new users to get started with them. Click the corresponding button to the right of it – WebStorm will use the run configuration type best suited for the current file, just as if you were to run that file from the context menu.

If you’re on macOS, you can now merge all open project windows into one, turning them into tabs. To perform this action, go to Window | Merge All Project Windows from the main menu.

We’ve improved the way the Cloning repository progress appears on WebStorm’s Welcome screen. The progress bar is now shown right in the Projects list, making it clearer and easier to use.