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.
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.
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.evaluationis now a checkbox. You can use it to completely disable or enable the new engine.
typescript.compiler.evaluation.fallbackenables 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.
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:
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:
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:
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 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:
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.
We’ve introduced sticky lines in the editor for easier navigation in large files and codebases. This feature pins key structural elements, such as
class declarations, to the top as you scroll, keeping scopes visible for quick navigation.
You can configure the maximum number of pinned lines or turn this feature off completely in Settings | Editor | General | Appearance:
Here’s an overview of the key improvements for various technologies supported by WebStorm, along with some notable bug fixes.
- Built-in CSS functions
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).
- 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).
- 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!
Subscribe to Blog updates
WebStorm 2024.1 Early Access Program Is Now Open!
Our 2024.1 Early Access Program is now open! Read our first EAP digest to discover the latest enhancements in WebStorm.
WebStorm 2023.3 Release Candidate Is Here!
The WebStorm 2023.3 RC is now available! Read about some of the most exciting improvements making it into the release.
WebStorm 2023.3 EAP Digest #3: Angular, React, and Vue Improvements and More
Read our third 2023.3 EAP digest to learn about the latest changes in the upcoming release.