WebStorm 2022.2: Support for Angular Standalone Components, Built-in Remote Development, and More

WebStorm 2022.2, the second update of the year, is out! This update has new features to make working with WebStorm even better, including support for Angular standalone components, updates for Vue 3, TypeScript 4.7 support, built-in remote development, and a bunch of improvements to the editor.


WebStorm 2022.2 Released

If you only have a few minutes to explore what’s new in WebStorm 2022.2, check out this video in which our Developer Advocate Paul Everitt reviews the most notable changes. If you feel like diving deeper, read on!

The key new features and improvements in v2022.2 include:

  • Frameworks and technologies: Support for Angular standalone components, improvements for Vue 3, TypeScript 4.7 support, and unbundled plugins.
  • Integrated developer tools: Out-of-the-box support for remote development, improvements for Docker, new features for the HTTP client, and integration with JetBrains Space.
  • Editor: Font size indicator, a shortcut to change the font size globally, a new enhanced configuration for highlighting problematic code, and more.
  • User experience: A new way to run the current file, migration guides for new users, updated JetBrains Runtime, a Merge All Project Windows action on macOS, and more.

Frameworks and Technologies

Support for Angular standalone components

We’ve been actively working on support for Angular 14 in WebStorm 2022.2. 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.

Support for Angular standard components

We have more Angular 14–related improvements in the works – stay tuned!

Updates for Vue 3

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.

Type narrowing in v-if/else directives

TypeScript 4.7 support

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.

TypeScript 4.7 support

End of AngularJS support

As AngularJS has now reached the end of its support, we will no longer actively maintain it in WebStorm. Support for AngularJS will still be available in WebStorm and other JetBrains IDEs, either out of the box or via the Angular and AngularJS plugin.

Unbundled plugins

We’ve unbundled support for the following technologies, as they weren’t actively used: Cordova and PhoneGap, Meteor, Spy-js, and XPathView and XSLT. Support for these technologies will remain available as standalone plugins. You can install them from JetBrains Marketplace or via Preferences / Settings | Plugins.

We’ve also unbundled the interactive training course that was available under the Learn WebStorm tab on the Welcome screen. If you’d like to install it as a plugin, search for “IDE Features Trainer” in Preferences / Settings | Plugins.

Integrated Developer Tools

Built-in remote development workflows

Support for remote development workflows, which we introduced last year, 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. Alternatively, you can use the standalone JetBrains Gateway app. For more information, see our documentation.

Remote development Beta from Welcome screen

To learn more about how we improved remote development in v2022.2, read this blog post.

Improvements for Docker

With WebStorm 2022.2, you can now copy images from one Docker daemon to another using the new Copy Docker Image action. It saves the image to a file and then pushes it to the chosen connection. We’ve also included a new setting to automatically connect to Docker when you restart WebStorm. It is enabled by default in Preferences / Settings | Advanced Settings | Docker.

Copy Docker image improvement

New features for the HTTP client

WebStorm 2022.2 supports WebSocket connections, which allow you to create requests as well as send and receive messages. We’ve also introduced support for GraphQL requests in the HTTP client. WebStorm can now send GraphQL queries over HTTP and WebSocket protocols. For http:// and https:// simple HTTP requests are used, while ws:// and wss:// are delegated to the WebSocket executor.

connecting using HTTP endpoint

There is also a new way to select a run environment from the gutter icon. To enable this feature, choose the Select Environment Before Run option from the Run with combo box.

Select environment before run

Bundled JetBrains Space integration

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. To learn more about the integration, see this blog post.

Bundled JetBrains Space integration


Font size indicator on zooming

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 size.

Font size indicator on zooming

Shortcut to change the font size globally

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.

Change the font size globally

Enhanced configuration for highlighting problematic code

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.

Enhanced configuration for highlighting problematic code

New notification panel for tuning file type associations

When your file is detected as plain text and isn’t properly highlighted, 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.

Notification warning for file type associations

Faster access to code completion settings

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

access to the code completion settings

Generate a table of contents in Markdown documents

We’ve been working on making our Markdown support better. In this release, we’ve added a new Generate table of contents action that will make creating a table of contents for your Markdown files much more straightforward. You can use ⌘N (Alt+Insert on Windows and Linux), which brings up the Insert… popup. You can then select Table Of Contents, which will be generated automatically for you.

Generate a table of contents in Markdown files

Clickable URLs in JSON and YAML string values

JSON and YAML files now have web references automatically inserted inside values starting with http:// and https://. You can now open such a link in a web browser using ⌘B / Ctrl+B.

Clickable URL strings

New setting to disable automatic block comment closure

You can now disable automatic block comment closure after you press the Enter key. You can find the Close block comment option under Preferences / Settings | Editor | General | Smart Keys.

User Experience

A new way to run the current file

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.

run current file

Migration guides for new WebStorm users

We’re continuing to improve the user experience for people new to WebStorm. This time we’ve designed a set of migration guides to help new users get up and running with WebStorm faster. You can find these guides in our documentation. You can also access them from the Welcome screen if you’re running WebStorm for the very first time.

Migration guides from the Welcome screen

Merge All Project Windows action on macOS

We’ve introduced an ability for macOS users to merge all opened project windows into one, turning them into tabs. To perform this action go to the main menu and select Window | Merge All Project Windows.

Merge all project windows on macOS

Cloning repository progress bar on the Welcome screen

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

Cloning progress bar for the repository

Updated JetBrains Runtime

We’ve changed the runtime to JetBrains Runtime 17 (JBR17), which should result in better performance, security, and accessibility. Read this blog post to learn more about this change.

Updated JetBrains Runtime

Description field for mnemonic bookmarks

There’s a new description field in the Add Mnemonic Bookmark dialog that you can call with ⌥F3 / Ctrl+F11. This will allow you to add a description to your mnemonic bookmarks.

mnenomic bookmark with description

Importing trusted SSL certificates

WebStorm 2022.2 can now help you import trusted SSL certificates from system trust stores. It will automatically use the custom certificates specific to your enterprise environment. No extra actions are required from you – everything should work right out of the box.

Those are the main highlights. For the full list of new features and enhancements available in WebStorm 2022.2, see the release notes. Please share your feedback with us and report any issues you encounter to our issue tracker.

The WebStorm team

image description