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.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.
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:
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.
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.
You can configure the maximum number of pinned lines or turn this feature off completely in Settings | Editor | General | Appearance:
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(), andclamp()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!
Subscribe to WebStorm Blog updates
