WebStorm 2023.2: Better Error Formatting, Enhancements for Vue, Preact, SolidJS, Angular and Svelte, GitLab Integration, and More
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:
oklch, and more.
- Frameworks and Technologies: Vue Language Server support and support for
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.
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.
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.
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.
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.
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().
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
hsl and vice versa. We are expanding this support in WebStorm 2023.2 to include conversion of
oklch with other color functions.
fetch() call or the
Option to enable/disable automatic interpolation of string literals
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.
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.
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.
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.
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.
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.
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.
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
--watchAll Jest options in the run configuration.
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.
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
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.
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.
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.
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.
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.
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.
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.
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.
Integrated Developer Tools
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.
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.
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.
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.
New features for the HTTP Client
WebStorm 2023.2 can now display previews of PDF and HTML files right in the HTTP Client’s request results.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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
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.
Other notable changes
- We’ve added syntax support for using declarations from the TC39 Explicit Resource Management proposal. A
usingdeclaration 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
Subscribe to Blog updates
Thanks, we've got you!
WebStorm 2023.2.2 Is Now Available
WebStorm 2023.2.2 is here with support for rpx and upx custom CSS property units and bug-fixes.
WebStorm 2023.2.1 Is Now Available
WebStorm 2023.2.1 is now available with many improvements for Angular, Svelte, Tailwind CSS, Astro, and more.
WebStorm 2023.1.4 Is Now Available
WebStorm 2023.1.4 is now available. Update to the latest build today.