What's New in WebStorm 2023.3

Improvements to the Angular, Svelte, and Vue support, AI Assistant, updates for TypeScript, and support for Cypress, Playwright, and the Node.js native test runner.

Key Highlights

Improved Angular support

Improved Angular support

We’ve improved support for strict template type checking in Angular templates. We’ve also added initial support for the new control-flow syntax from v17 and signals support, including live templates like signal, computed, and effect. There are also new quick-fixes available with Alt+Enter. For example, you can create @Input and @Output properties from a component template. See this blog post for more information.

Updates to the Svelte plugin

Updates to the Svelte plugin

We’ve added built-in support for the TypeScript plugin to provide consistent highlighting and quick documentation for TypeScript files in your Svelte projects. We’ve implemented a more stable way to automatically import components, which works on completion, on copy-paste, and with Alt+Enter. We’ve also improved support for exports from context="module" scripts and expanded the support for zero-effort type safety to cover TypeScript files in addition to Svelte files.

Improvements for Vue 3

Improvements for Vue 3

We’ve added support for defineSlots, providing completion and navigation for the slot name and props, as well as rename refactoring. Completion now also works for properties with defineExpose. Additionally, required imports for components will be added based on the name specified by the defineOptions function.

AI Assistant is out of preview

AI Assistant is out of preview General Availability

JetBrains AI Assistant is now generally available with a number of new and improved features to increase your productivity in JetBrains IDEs. The latest updates include enhanced code generation directly within the editor, a context-aware AI chat that answers project-related queries without requiring you to copy code, and project-aware AI actions that use extended context to provide more comprehensive results. Use AI Assistant in WebStorm as a supplemental feature with a JetBrains AI Service subscription.

Cypress and Playwright support

Cypress and Playwright support

WebStorm will automatically detect your Cypress and Playwright tests and let you run and debug them with a click of the mouse. The support also includes the ability to explore the results and find issues by navigating the test tree. You can extend the support with the Test Automation plugin, which will provide an embedded browser and advanced code insight.

Initial support for the Node.js test runner

Initial support for the Node.js test runner

There's also support for the native Node.js test runner. Tests declared with the node:test API are now recognized, and you can run and debug them via gutter icons. We plan to implement a few more improvements in the next release to extend the support.

JavaScript, TypeScript, and CSS

Improvements for TypeScript

Improvements for TypeScript

WebStorm 2023.3 solves some of the inconsistencies encountered when adding import type statements. We’ve added the option to configure the usage of the TypeScript import type statement or type specifier when importing a type. We’ve also improved the behavior for the exports field of package.json for TypeScript files.

HTML to JSX single tag closing

HTML to JSX single tag closing

Now, when you paste HTML code into a JSX file, it will not only convert attributes but also automatically close single tags for you. You can configure this option under Settings | Editor | General | Smart Keys | JavaScript.

CSS custom @property support

CSS custom @property support

We’ve been following updates around the Interop 2023 initiative, which introduces the CSS custom @property. WebStorm 2023.3 supports inspections and completion for properties.

Support for the .jsonc format

We’ve included support for the .jsonc format, allowing you to use single-line and multi-line comments in your documents using // and /* */.

Improved Yarn PnP workspace support

Modules referenced using the workspace: protocol can now be resolved in your Yarn PnP workspaces. The navigation in import statements now works, too.

Integrated Developer Tools

All-in-one diff viewer

All-in-one diff viewer

WebStorm 2023.3 introduces a revamped way to review changes. Now, instead of going through each file one by one, you can see all of the modified files from a changeset in a single, scrollable frame. This new diff viewer is compatible with GitLab and GitHub.

Support for GitLab snippets

Support for GitLab snippets

Expanding on the GitLab integration introduced in WebStorm 2023.2, we’ve added support for GitLab snippets. You can now create public or private snippets directly within the IDE.

Run to Cursor inlay debug option

Run to Cursor inlay debug option

The new Run to Cursor inlay option allows you to quickly execute up to a specific line of code while debugging. Once your program is suspended, hover over the line of code you want to execute up to and click on the Run to Cursor popup. You can also use this feature with Alt+F9, after the caret has been placed on the desired line.

HTTP Client improvements

HTTP Client improvements

We’ve improved the Structure view for better navigation within large .http files. This update also introduces color-coded labels for request types and provides a more explicit listing of their contents. We’ve also added support for declaring variables using @ and authentication with OAuth 2.0 password and client credential grant types.

User Experience

New product icon for macOS

New product icon for macOS

WebStorm 2023.3 introduces a redesigned product icon for macOS to align it to the standard style guidelines of the operating system.

Default tool window layout option

Default tool window layout option

We’ve expanded the functionality to save multiple tool window layouts with a Default option, which provides a quick way to revert your workspace’s appearance to its default state. This layout can be accessed through the Main Menu | Window | Layouts.

Option to hide the main toolbar

Option to hide the main toolbar

We’ve implemented an option to hide the main toolbar when using the IDE’s default viewing mode. To hide the main toolbar, select View | Appearance from the main menu and uncheck the Toolbar option.

Color-coded highlighting for editor tabs

Color-coded highlighting for editor tabs

To enhance your navigation experience when working with a variety of file types in the editor simultaneously, we’ve reintroduced color-coded highlighting for editor tabs by default, mirroring their appearance in the Project tool window.

Speed Search shortcut

Speed Search shortcut

The Speed Search functionality, allowing you to quickly navigate within tool windows and dialogs, is now available via a shortcut. Once the focus is placed on a tree or list, you can invoke the search from the tool window’s Options menu by pressing Ctrl+F.