Early Access Program

WebStorm 2024.1 EAP Digest #2: Documentation in Completion, Component Usages, JSX Structure, and More

We’re halfway through the Early Access Program for WebStorm 2024.1! It’s been a while since we walked you through the latest improvements and features in this release, so it’s about time for an update. Read on to learn about the key changes in the EAP builds in the past few weeks. For more information, check out our previous blog posts.

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


Important! WebStorm EAP builds are not fully tested and might be unstable. Please try the latest EAP build and share your feedback with us. You can do so using our issue tracker or by leaving a comment on this blog post.

Key highlights

Experimental TypeScript engine

The WebStorm team continues to enhance the new type evaluation approach, initially available in the WebStorm@next builds, to improve performance and fix compatibility issues. Now, there are two registry keys to control the behavior:

  • typescript.compiler.evaluation is now a checkbox. You can use it to completely disable or enable the new engine.
  • typescript.compiler.evaluation.fallback enables recovery to a previous type evaluation in cases where the new approach fails.

In earlier EAP builds, there was a single dropdown. The settings from that dropdown will be carried over.

Registry dialog featuring the two new registry keys that can be set

To access the Registry, use Find Action (⇧⌘A / Ctrl+Shift+A) and search for “Registry”. Type “typescript.compiler.evaluation” in the Registry dialog to see the corresponding settings.

Vue Language Server is now enabled by default

In previous versions of WebStorm, the Vue Language Server was automatically enabled only for those projects that explicitly list TypeScript 5+ in a project’s dependencies (package.json). Starting with EAP #4, the Vue Language Server is enabled by default for all Vue (including Nuxt-based) projects.

The Vue Language Server has some known limitations in Vue 2 projects. Please let us know if you experience any problems. You can opt out of using the server in Settings | Languages & Frameworks | TypeScript | Vue:

Settings dialog showing where to set up the Vue Service

Quick Documentation popup: Improved formatting and availability in completion

We have significantly enhanced the Quick Documentation popup. It now supports syntax highlighting for code blocks. In addition to this, the popup is directly integrated into completion results, offering instant access to documentation:

Showing the sticky lines feature in action

You can configure the delay and appearance of the popup in Settings | Editor | General | Code Completion.

Component usages for Vue, Svelte, and Astro components

We’ve added a Component usages Code Vision hint, which is available in Vue, Svelte, and Astro files. Using the hint, you can quickly look for usages of a specific component anywhere in the project:

Enhancements to the Structure tool window for React and JSX

The Structure tool window now displays React components and hooks, along with the structure of JSX. This includes nodes for conditional rendering and list rendering: 

Showing the improved structure view with new JSX icons

Other JSX-powered libraries such as Preact and Solid are also supported.

Generate arrow functions with the Extract Method refactoring

The Extract Method refactoring now introduces an in-place option to generate the extracted function as an arrow function:  

A gif showing generating an arrow function with the Extract Method refactoring

A revamped Terminal tool window

The new terminal UI was introduced in WebStorm 2024.1 EAP #1.

One standout improvement is the presentation of each command in a distinct block. You can jump between blocks using the arrow keys or switch the focus between the prompt and output with the ⌘↑ / Ctrl+↑ and ⌘↓ / Ctrl+↓ keyboard shortcuts. Another significant addition is the implementation of code completion for commands, paths, arguments, options, and more:

showing the new ui in teh terminal

The updated terminal supports only Bash, Zsh, and PowerShell (currently only for Windows 11). We are actively working on supporting more shell integrations.

You can toggle the new terminal UI in Settings | Tools | Terminal -> Enable new terminal UI.

Sticky lines

We’ve introduced sticky lines in the editor for easier navigation in large files and codebases. This feature pins key structural elements, such as function or class declarations, to the top as you scroll, keeping scopes visible for quick navigation.

Showing the sticky lines feature in action

You can configure the maximum number of pinned lines or turn this feature off completely in Settings | Editor | General | Appearance:

Showing the Show sticky lines while scrolling option in the Settings of WebStorm

Other highlights

Here’s an overview of the key improvements for various technologies supported by WebStorm, along with some notable bug fixes.

JavaScript, TypeScript, Markup, and style sheet languages

  • Built-in CSS functions var(), calc(), min(), max(), and clamp() now appear in completion suggestions (WEB-36033).
  • We’ve disabled the inspection checking unresolved references for any in TypeScript code (WEB-65183).

Frameworks and technologies

  • Vite is now suggested as a preferred way for bootstrapping a new React.js project (WEB-60533).
  • We’ve discontinued support of Spy-js. The corresponding plugin will no longer be available for installation as of version 2024.1 of WebStorm and other JetBrains IDEs. 
  • Deprecated GraphQL types and fields are marked as strikethrough text (WEB-63597).

User experience

  • We’ve added an option to apply Stylelint fixes on file save (WEB-50148).
  • We have changed the default position of Code Vision to display on the right (WEB-65272). You can granularly tune the position of Code Vision hints in Settings | Editor | Inlay Hints > Code vision group.
  • Now WebStorm terminates the browser process when a client debug session is over (WEB-37367).

Notable fixes

  • We’ve fixed module referencing using dot notation inside Sass/SCSS (WEB-52031).

That’s it for today. For the full list of improvements available in the latest EAP build, check out the release notes. Stay tuned for our next EAP digest!

image description