WebStorm 2023.2: Better Error Formatting, Enhancements for Vue, Preact, SolidJS, Angular and Svelte, GitLab Integration, and More

Our second major release of 2023 is here! This version includes lots of new features and improvements to the IDE. You’ll find improved TypeScript and JavaScript error formatting, Vue Language Server support, new UI out of Beta, HTTP Client improvements, LSP support for plugin developers, and much more.

WebStorm 2023.2 Released Banner


If you only have a few minutes to explore what’s new in WebStorm 2023.2, check out this video in which our Developer Advocate, Helen Scott, reviews some of the most notable changes. If you want to dive deeper, please keep reading!

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

  • JavaScript, TypeScript, and CSS: Improved error formatting for JavaScript and TypeScript, auto-imports for quick-fixes and live templates, CSS nesting support, convert color to lch and oklch, and more.
  • Frameworks and Technologies: Vue Language Server support and support for provide/inject and defineModel, better support for App Router in Next.js, new live templates for React hooks, SolidJS and Preact improvements, and more.
  • New UI: Improved main toolbar customization, colored project headers, Light Theme with light header, reworked hamburger menu, and more.
  • Integrated Developer Tools: AI Assistant preview, GitLab integration, option to commit specific lines of code, Docker improvements, HTTP Client improvements, and more.
  • User Experience: Text search in Search Everywhere, File sorting by modification time in the Project view, suggested plugins in Settings, and more.
  • Plugin Development: LSP support for plugin developers.

JavaScript, TypeScript, and CSS

Improved error formatting for JavaScript and TypeScript

In WebStorm 2023.2, we have been looking at improving how we present type errors. This build includes our first implementation, which supports TypeScript, Vue, and Svelte Language Servers. Your errors and warnings will now be formatted in a way that makes them much more readable and easier for you to diagnose issues.

Showing the formatting of a TypeScript type error

You can also enable localization by going to Settings | Languages & Frameworks | TypeScript and adding --locale and the abbreviation of the language you wish to use to the Options field.

Showing the operation needed to change teh language of the TypeScript type error to Korean

We’ve added improved error formatting for some of the most popular JavaScript inspections, too. Keywords and references are highlighted in the same way as in the code, and types are highlighted in the same way as in TypeScript, with a background.

Showing the error in the new formatted manner

Import on adding live templates and when using quick-fixes or intentions

We’ve added a quality-of-life improvement to take care of janitorial work using quick-fixes in your code. Now when you apply an intention or quick-fix that results in an unresolved element that is not exported in the file, WebStorm will automatically add the import for the element to the file.

Showing using a quick-fix intention and it adding the import automatically

WebStorm 2023.2 also includes the option to automatically import elements when using Live Templates. Now when you add a Live Template that would result in unresolved elements, WebStorm will automatically add the import for the element to the file. You can enable this feature under Settings | Editor | Live Templates and select Add unambiguous imports in the options. This will work when there is only one unambiguous import for the element. If there are two or more possible elements, the import will not be added automatically.

Showing using the live template useState and it importing the module automatically

CSS nesting support

WebStorm 2023.2 includes support for the CSS nesting feature. It provides the ability to nest one style rule inside another, with the selector of the child rule relative to the selector of the parent rule. We’ve added syntax support and an inspection for checking that the nested selector doesn’t start with an identifier or functional notation. WebStorm suggests two quick-fixes – Add ‘&’ as prefix and Wrap in :is().

Css nesting issue showing the intention to add a & or wrap in :is()

Convert color to LCH and OKLCH

In WebStorm 2022.3, we added support for the new CSS color modification functions. This provided WebStorm users with a number of color conversion actions. For instance, you can change rgb to hsl and vice versa. We are expanding this support in WebStorm 2023.2 to include conversion of lch and oklch with other color functions.

Converting rgb to lch using the covert color action

JSON body completion for JavaScript

WebStorm 2023.2 provides completion for JSON object keys in JavaScript code, for instance, code with the fetch() call or the axios library.

Showing the autocompletion popup for JSON object keys

Option to enable/disable automatic interpolation of string literals

In WebStorm 2023.2, you can configure whether the interpolation of string literals is done for you automatically under Settings | Editor | General | Smart Keys | JavaScript and enabling or disabling the option Automatically replace string literal with template string on typing ‘${.

Showing the settings options under smart keys JavaScript that includes the option to automatically replace string literal with template string on typing

Support for aliases defined in bundlers

We’ve implemented support for frameworks with Typescript, where path aliases are defined in the configuration files of the bundlers and not in tsconfig.json. WebStorm will take these path aliases into account and provide auto-import in TypeScript frameworks where the component syntax is a superset of HTML, namely Vue, Svelte, and Astro.

Frameworks and Technologies

Vue: Language Server support

We have some great news for all of you using Vue in WebStorm. We’ve implemented support for the Vue Language Server to help support the changes in TypeScript 5.0.

Showing the property map does not exist on type number error from the Vue Language Server

By default, Vue Language Server will be used for TypeScript v5.0 and higher, and the wrapper over the TypeScript service will be used for earlier TypeScript versions. You can set the Vue service to use Vue Language Server integration on all TypeScript versions under Settings | Languages & Frameworks | TypeScript | Vue.

Settings showing the options for the Vue language server

Vue: provide and inject support

WebStorm 2023.2 includes support for provide and inject. The provide/inject mechanism solves the issue of prop drilling in Vue. A parent component can register a provider, and then any component in the descendent tree can inject dependencies provided by the components. WebStorm now provides completion for the inject field, resolves the injected property, and displays correct information about the type of the injected property.

showing the autocompletion for addEmoji working with inject

Vue: defineModel support

WebStorm 2023.2 includes several improvements for Vue support. Firstly, we’ve added support for the new defineModel macro, which simplifies work with two-way binding. The macro automatically registers a prop, and returns a ref that can be directly mutated.

Showing the quick documentation popup on Ctrl+hover

Better support for App Router in Next.js

Next.js 13.1 now includes a plugin for the TypeScript Language Service specifically for the new app directory. This plugin offers suggestions for configuring pages and layouts, as well as helpful hints for using both Server and Client Components. It also comes with custom documentation, which means that it adds extra information to the output of the TypeScript Language Service. It’s now possible to view this custom documentation in WebStorm.

Showing the documentation pop up for Next.js custom documentation

New live templates for React hooks

We’ve added a set of new live templates for React hooks. You can find the live templates we’ve added under Settings | Editor | Live Templates > React hooks.

Image of the settings Live Templates showing the new Live Templates for React hooks

Svelte improvements

Continuing our effort around Language Servers, we’ve integrated the Svelte Language Server. This update brings all errors reported by Svelte-check right to your IDE, including, for example, null checks inside markup, prop type checking, and the recently introduced zero-effort type safety from SvelteKit. The underlying code is also shared by the Vue counterpart, which will help us provide a consistently good experience no matter which technology you use.

Showing Svelte issues being caught because of the LSP integration

Watch mode for Jest tests in the Run tool window

WebStorm 2023.2 sees the reintroduction of the Watch for Changes icon for Jest tests in the tool window. Now when you run Jest tests, you’ll get a new toggle button in the toolbar, which will let you easily enable watch mode. This will bypass the need for you to manually set up --watch/--watchAll Jest options in the run configuration.

Running a test in watch mode

Improved support for SolidJS and Preact

WebStorm 2023.2 includes numerous fixes to improve our support for Preact and Solid.js.

You’ll find better support for Emmet when working with Preact and SolidJS. WebStorm now better understands Preact, SolidJS, and other JSX-based frameworks, where a class attribute is defined in the corresponding d.ts file. Instead of detecting a particular framework, WebStorm now uses typings and configuration information from JSX.IntrinsicElements to provide proper unfolding of Emmet.

We’ve also introduced a rename refactoring for the getter and setter of the createSignal function. Similar to the refactoring capability already available for useState, this allows you to conveniently rename the getter and setter functions associated with the createSignal function so you can efficiently update the names of these functions to better reflect their purpose or adhere to coding conventions.

Showing the rename refactoring working correctly in CreateSignal functions

Angular improvements

For a long time, the way we were dealing with generics and directive inputs deviated from Angular. With this update, we’ve completely reworked it. Now, in WebStorm 2023.2, when you use strictTemplates, there should be no more surprises. WebStorm will precisely interpret ngTemplateContextGuard methods and propagate type evaluation to the template variables. Libraries that heavily use mapped types, like NgRx, should work properly now. This is part of our continued effort to align with strictTemplates. Combined with previously added support for strict null checks and type narrowing, we hope it will make your Angular experience much better!

We have also fixed a couple of issues related to Jest and Angular in this release. These include a fix for the issue causing some Jest tests to fail to run in the directory of Angular projects and a fix for the issue with detecting sub-projects correctly when running all the tests in the directory.

Updates for Astro

We’ve made several improvements to our Astro support on this release. Now PostCSS works in the <style> tag of Astro components by default. Moreover, you can now use CSS preprocessors like Sass, Less, and Stylus in the <style> tag.

Showing the scss style is present in the Astro file

New UI

New UI: Out of Beta

Last year we introduced a new, more minimalistic UI for WebStorm and other JetBrains IDEs. We’ve been further refining the new UI based on your feedback and are now ready to bring it out of Beta. You can enable the new UI using the IDE and Project Settings cog in the top right corner of the IDE. Read on to learn about the key changes that have landed in this release.

Showing the settings option for activating the new UI now it doesn't include the Beta tag

New UI: Improved main toolbar customization

We’ve expanded the customization options for the new UI’s main toolbar. You can now use a drop-down menu to quickly add actions to the toolbar. To do so, right-click on any widget, select Add to Main Toolbar, and explore the options available.

Showing the process of customizing the toolbar with a new push button

New UI: Colored project headers

WebStorm 2023.2 introduces colored project headers to simplify navigation between several open projects. You can now assign a unique color and icon to each of your projects, making distinguishing between them in your workspace easier.

Headers come with predefined colors by default, but you can customize them. To set a new color for your project, right-click on a header and access the context menu. Select the Change Project Color option and choose your desired color. To disable this feature, deselect the Show Project Gradient option in the menu.

Showing the option to change the project header color and use the custom option

New UI: Light theme with light header

For v2023.2, we’ve refined the user experience with the Light theme by introducing the alternate Light with Light Header option, which features matching light colors for window headers, tooltips, and notification balloons.

Showing the UI with the Light Theme light header option selected

New UI: Reworked hamburger menu

We’ve refined the behavior of the hamburger menu in the new UI, which is located in the main toolbar for Windows and Linux. When you click on the menu icon, the elements now appear horizontally over the toolbar.

Showing the Hamburger menu in Windows opening horizontally with all the menu options across the top of the UI

There’s also an option to turn this menu into a separate toolbar. To do so, go to View | Appearance | Main menu as a Separate Toolbar.

New UI: Updated window controls on macOS

When working on macOS in full-screen mode using the new UI, the window controls are now displayed on the main toolbar rather than on the floating bar as before.

Showing the new UI with the window controls on teh main toolbar in macOS

New UI: Pin run configurations in the Run widget

To make managing multiple run configurations easier, we’ve implemented the option to pin preferred configurations in the Run widget. To add a run configuration to the Pinned section, open the kebab menu (three dots) next to its name and select Pin. If you have multiple pinned configurations, you can easily rearrange them by dragging and dropping them within the list.

Showing the pin option for run configurations

New UI: Removed title bar on Linux

For the convenience of Linux users, the native header of the OS has been removed in the new UI, resulting in a cleaner interface. By default, you will now see the custom IDE’s header, which offers an extra range of customization options to tailor your workspace.

Image of the new UI on a Linux machine

Integrated Developer Tools

GitLab integration

We’ve got some great news for our GitLab users – We’ve introduced initial integration with GitLab in WebStorm 2023.2. This integration will allow you to streamline your development workflow by working with the Merge Request functionality right from the IDE.

Showing the GitLab integration in WebStorm during a merge request

Option to commit specific lines of code

WebStorm 2023.2 introduces a highly anticipated feature to selectively commit specific parts of code chunks. To perform a partial commit, select the lines within a chunk and call Include Selected Lines into Commit. The chunk will be divided into individual lines with the selected ones highlighted. You can add or exclude lines from the selection using checkboxes or the context menu.

Showing the new include selected lines into commit option being used in the commit diff to select individual lines

Docker improvements

Preview of files inside Docker image layers

It’s now easy to access and preview the contents of a Docker image layer in the Services view. Select the image from the list, select Show layers, and click Analyze image for more information. You can then view a list of the files stored in the layer and easily open a selected file in the editor by right-clicking on the file and calling the Open File (or Download File for binaries) option.

Showing the option to open file in the Docker services view

Set Docker containers to run as a Before Launch task for run configurations

You can now set a Docker run configuration to run before another configuration by designating it as a Before Launch task. The IDE will wait for the container that is currently running to be healthy, and then it will launch the next run configuration. To set up a queue, first create the required Docker run configuration and then add it to the container via Modify options | Add before launch task | Run configuration.

showing setting a Docker container to run as a Before Launch task

New features for the HTTP Client

It’s now possible to share common JavaScript code for HTTP Client request handlers via imported modules.

showing sharing common JavaScript for for a HTTP Client request handler

WebStorm 2023.2 can now display previews of PDF and HTML files right in the HTTP Client’s request results.

Showing a PDF being displayed in the HTTP Client request result

You can now use the HTTP Client CLI in WebStorm to interact with GraphQL APIs and establish WebSocket connections with services, for example, for tests or automation scripts.

Showing the HTTP Client working with GraphQL

Qodana integration

The Qodana code quality platform, a recent addition to the JetBrains family of products, has just been released out of preview. The Qodana 2023.2 release comes with full-fledged integration with JetBrains IntelliJ-based IDEs, including WebStorm.

What’s Qodana?

Qodana is a static analysis engine that brings inspections from JetBrains IDEs to any CI pipeline, automates code reviews, creates shared inspection profiles for the development team, and builds server-side quality gates. The platform can analyze code written in 60+ languages, including Java, JavaScript, PHP, C#, and more.

Showing Qodana sunburst analysis

This integration brings you two important benefits. The first is the ease of configuration. You can trigger analysis with just a few clicks, view the list of problems across your entire project, and then configure Qodana in your preferred CI/CD system to establish a quality gate and run server-side checks. The second benefit is alignment. Once Qodana is configured in the CI/CD, you will be able to see the results of the server-side analysis without leaving your IDE – right out of the box.

AI Assistant preview

WebStorm 2023.2 includes preview access to our new JetBrains AI service. Please note that for now, the service will be available for only a limited number of users through a plugin available on JetBrains Marketplace.

Showing a couple of the options in the AI Assistant including the chat functionality and the Explain code

The service supports OpenAI and also hosts several smaller models created by JetBrains. We plan to extend this to more providers in the future, giving you access to the best options and models available.

This is an early implementation, with a sample of features indicating the direction we’re moving in. At this stage, it’s extremely important for us to hear your feedback, including situations where the AI didn’t do what you expected and suggestions of other scenarios where the AI could assist you.

For more information about AI Assistant, how it works, and how we handle your code and data, please see this blog post.

User Experience

Text search in Search Everywhere

The Search Everywhere (Double ⇧ / Double Shift) functionality, primarily utilized for searching through files, classes, methods, actions, and settings, now includes text search capabilities similar to Find in Files. With this enhancement, text search results are displayed when there are few or no other search results available for a given query. The feature is enabled by default and can be managed in Settings | Advanced Settings | Search Everywhere.

Showing using the Text option in Search Everywhere to find specific text across the project

Project view file sorting by modification time

WebStorm 2023.2 brings the long-awaited option to arrange your files in the Project view based on their modification time. This new functionality automatically reorders the files whenever the changes in your project are saved. To enable this feature, open the kebab menu (three dots) in the Project view and then select Tree Appearance | Sort by Modification Time.

Showing the files in the Poject view getting sorted according to the time they were last modified

Suggested plugins in settings

To make it easier to configure WebStorm for your specific projects and extend its functionality with plugins, we have updated the UI for the Settings | Plugins section. It now includes a set of suggested plugins based on your project specifics.

Showing the Plugins page in the settings with the new feature for suggested plugins dependent on your project technologies.

Single-click navigation between project directories

In the Project view, a new Open Directories with Single Click option makes expanding and collapsing the project folders quicker and more responsive. The option is available from the drop-down menu once you click the three-dots icon.

Selecting the option Open Directories with Single Click and showing that the files open with a single click

Syntax coloring in inspection descriptions

In Settings | Editor | Inspections, we’ve implemented syntax color for code samples, which will help you with comprehension of the inspection and its purpose.

Showing the inspections with color for var in the code sample

Plugin Development

LSP support for plugin developers

We have a huge feature in version 2023.2 for WebStorm and some of our other JetBrains IDEs, such as PyCharm Professional, IntelliJ IDEA Ultimate, PhpStorm, GoLand, and Rider. It’s the introduction of the LSP API for plugin developers.

Our IDEs are well-known for their deep understanding of the source code and first-class support for many programming languages and frameworks. At the same time, some languages and technologies are not yet natively supported. However, there may be a language server capable of providing support for the required technology. The LSP API is mainly aimed at plugin developers who want to use a specific LSP server for coding assistance in the IDE. If you have a self-made programming language or framework, you can get it supported in the IDE by writing an LSP server and creating the accompanying plugin.

The current feature list includes errors/warnings highlighting, quick-fixes, code completion, and navigation to the declaration. More features are coming soon.

A minimal fully-functional plugin requires writing a few lines of code. The plugin implements the com.intellij.platform.lsp.api.LspServerSupportProvider interface and addesses which files it will support and how to start the server. Prisma ORM is an open-source plugin by JetBrains and can be used as a reference implementation. The codebase is quite large, but there are only a few classes that are related to the LSP-based support: see the org.intellij.prisma.ide.lsp.* package.

As always, your feedback on this feature is very much appreciated. Please send us your ideas and suggestions and report any bugs you find to our issue tracker.

Showing the original LSP issue in YouTrack

Other notable changes

  • We’ve added syntax support for using declarations from the TC39 Explicit Resource Management proposal. A using declaration is a new block-scoped variable form that allows for the declaration of a disposable resource. You can read more about it here (WEB-60243).
  • We’ve updated the version of TypeScript bundled in WebStorm to 5.1.3 (WEB-60906).
  • We’ve fixed several issues concerning blank lines being introduced when applying reformat code (WEB-57923, WEB-24744, WEB-61756, WEB-28896).
  • We’ve fixed the issue causing the Deno debugger not to start (WEB-59601).
  • We’ve fixed the issue causing the types of refs in templates to be unknown when using the unplugin-auto-import plugin (WEB-56524).
  • We’ve fixed the issue preventing WebStorm from reporting “cannot resolve directory” issues with HTTP/data URLs in CSS (WEB-56089).

There are lots of new features and enhancements to try out in this release of WebStorm. If you’d like a list of everything included in WebStorm 2023.2, please check out the release notes. We hope you enjoy this release, and as ever, please share your feedback with us and report any issues you find to our issue tracker.

The WebStorm team

image description