WebStorm 2024.3 EAP Digest: Improved Navigation and Rename Refactoring for Framework Components, AI-Based Code Completion Updates, and Tailwind Color Preview for CSS Classes
It’s time for the WebStorm 2024.3 EAP digest, which will walk you through the new features and improvements in the upcoming release!
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 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
Improved navigation and Rename refactoring for framework components
Starting from version 2024.3, the Show component usages action for Vue, Svelte, and Astro detects component usages both in imports and templates. You can also use this functionality by invoking the Find Usages action on the component file in the Project view:
The Rename refactoring has been enhanced to include component usages renaming. When renaming a component file or explicitly defined name, the associated usages in templates will also be updated! This behavior can be disabled by toggling the Search for component usages option during the renaming process and in the Find dialog.
AI Assistant
Improved AI-based code completion
In 2024.3 we are significantly improving AI-driven code completion for JavaScript and TypeScript. The new approach combines fast, local full-line completion with powerful cloud-based suggestions powered by JetBrains’ in-house LLMs. This hybrid approach enhances speed, accuracy, and usability while reducing the frequency of lengthy and irrelevant suggestions.
Here are some of the key improvements:
- Highlighting is now applied to the suggested code, which previously was just plain gray text.
- Partial acceptance allows you to apply suggestions granularly, giving you more control over changes to your code:
- Accept suggestions word by word – ⌥ → / Alt + Right.
- Accept suggestions line by line – ⌘ → / Ctrl + Right.
- As before, you can explicitly call completion with ⇧ ⌥ / / Shift + Alt.
- We’ve enhanced context collection using RAG strategies.
Completion suggestions are now provided in more locations, and are now triggered during typing, not only on Enter keystrokes.
In EAP 3, support for AI-based code completion has also been extended to HTML and CSS (including .css, .less, .scss, .sass, .pcss). Please refer to this blog post for more insights.
Inline AI prompts
You can now interact with AI Assistant directly in the editor thanks to an experimental inline input feature that detects and processes your requests as you type. This lets you express your intentions in natural language, which AI Assistant instantly interprets and converts into code changes without any extra steps. This feature is currently available for JavaScript and TypeScript:
The IDE leaves a purple mark in the gutter next to lines added or changed by AI Assistant so you can easily see what has been updated.
If you don’t like the initial suggestion, you can generate a new one by pressing Tab. You can also adjust the initial prompt by clicking on the purple block in the gutter or simply pressing Ctrl + / (Windows/Linux) or ⌘/ (macOS).
Please note that these improvements are available only when using the AI Assistant plugin.
Color preview for Tailwind CSS classes
Color previews for Tailwind CSS classes are now shown inline in the editor. We’ve added support for the textDocument/documentColor method of the Language Server Protocol (LSP), so all LSP-based plugins now support this functionality out of the box.
Bun debugger support for Windows
In EAP 2, we’ve introduced Bun debugger support for Windows. This update includes program traversal (Step Into, Step Over, and Run to Cursor), expression evaluation, and support for line breakpoints, exceptions, and conditional breakpoints.
Bun debugger support is currently unavailable on WSL. If you would like to see it added, consider voting for WEB-69167.
Code style options for decorators
We have implemented new code style options for decorators in JavaScript and TypeScript. EAP 1 introduces four new items in the Wrapping and Braces subsection of the Code Style settings:
User experience
Updates to Find in Files
The Find in Files feature has a new search scope option: Project Files Excluding Git-Ignored. This option excludes any files ignored in .gitignore from your search results, helping you narrow down the search scope to the relevant parts of your project.
Highlight occurrences of selected text
By default, WebStorm will now automatically highlight all instances of the text you select within a file. You can toggle this feature in Settings | Editor | General | Appearance.
Other highlights
- The Database Tools and SQL plugin is now bundled in the IDE, and its licensing model will be changed in the upcoming major release.
- WebStorm now displays the .idea directory in the Project view by default. You can use the projectView.hide.dot.idea registry option to toggle this behavior (WEB-68009).
- The Install dependencies notification will now automatically disappear once the required dependencies have been installed via the command line (WEB-65147).
- We have improved navigation to built-in Nuxt components (WEB-65589, WEB-66625).
- You can now use nx as the karma package to run unit tests in Nx projects (WEB-58994).
That’s it for today. For the full list of improvements introduced throughout the latest 2024.3 EAPs, check out the release notes.
The WebStorm team
Subscribe to WebStorm Blog updates
