Early Access Program

WebStorm 2023.2 EAP #6: AI Assistant, CSS Nesting Support, Improved Type Error Formatting, and More

The sixth EAP build for WebStorm 2023.2 is now available, and it’s a big one!
It’s the first build to include features leveraging the enormous potential of generative AI and large language models (LLMs). This build also comes with support for CSS nesting and improved TypeScript type error formatting. To catch up on all of the new features in WebStorm 2023.2, check out our previous EAP blog posts.

The Toolbox App is the easiest way to get the EAP builds and keep both your stable and EAP versions up to date. You can also manually download EAP builds from our website.


Important! WebStorm EAP builds are not fully tested and might be unstable.

Below are the most interesting improvements available in WebStorm 2023.2 EAP #6. Please try them out and share your feedback in the comments below or via our issue tracker.

AI Assistant

WebStorm 2023.2 EAP #6 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. Once the maximum capacity is reached, the remaining users will be added to a waiting list.

To access the AI features, you must be logged in to the JetBrains AI service with your JetBrains Account. The simplest way to do this is to go to the More tool windows icon on the toolbar, select AI Assistant from there, and follow the prompts.

Activating AI Assistant under the tool window icons

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 EAP is just 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.

AI chat

Use the AI Assistant tool window to communicate with the LLM, ask questions, or iterate on a task. The IDE will provide project-specific context, such as the languages and technologies used in your project. Once you’re happy with the result, use the Insert Snippet at Caret function to put the AI-generated code into the editor, or just copy it over.

Using the AI window to ask the AI Assistant for code to make different sized ships for the battleship app

You can also ask AI Assistant about a specific code fragment by selecting it in the editor and invoking an action from the AI Actions menu (available in the editor context menu or by using the ⌥Enter / Alt+Enter shortcut).

Commit message generation

The commit message dialog now has a Commit Message with AI Assistant button. Click it to send the diffs to the LLM, which will generate a commit message describing your changes.

Using the AI Assistant to generate teh text for a commit from analysing the diffs

Please send us your ideas and suggestions by clicking the Share your feedback link in the AI Assistant tool window. You’re also welcome to report AI Assistant bugs in YouTrack.

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

Improved TypeScript type error formatting

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. What’s more, it also works with localized errors!

Please be aware that this is still in development, and we would really appreciate your feedback, so if you do encounter any issues, please report them to our issue tracker.

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

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 cannot start with an identifier or functional notation. WebStorm suggests two quick-fixes – Prepend with an & selector and Wrap in an :is() selector.

Showing the quick fix popup displayed for CSS nesting

Option to commit specific lines of code

WebStorm 2023.2 EAP #6 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

JSON body completion in 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

Support for JavaScript imports in 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

PDF and HTML previews for responses in the HTTP Client

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

Support for editing AsyncAPI files

It’s now possible to conveniently work with the AsyncAPI specification format in WebStorm. The IDE supports schema validation functionality and provides code completion for references, the Endpoints view, and the Editor Preview pane.

Showing schema validation with the Editor Preview pane

New Docker features

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

Emmet support for Preact and SolidJS

In this release, you’ll also 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.

Other notable changes

  • We’ve fixed the issue causing mismatched property for auto values for CSS property quotes to be marked as a failure (WEB-61311).
  • We’ve fixed the issue causing the macro to not expand when defining it in the npm run configuration (WEB-61468).
  • 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 in Next.js causing the false “unused export” warnings for App Router (WEB-58649).
  • We’ve fixed the regression in the debugger that caused it to ignore breakpoints when debugging npm scripts written in TypeScript (WEB-61440).

That’s all for today!

For a full list of the latest enhancements available in WebStorm 2023.2 EAP #6, check out the release notes.

Your feedback about the new features is very important to us, so please try them out and let us know what you think in the comments section below or on Twitter. If you encounter a bug, please submit a report in our issue tracker.

The WebStorm team

image description