What’s New in WebStorm 2024.3

We’ve enhanced in-editor hints for Vue, Svelte, and Astro components. The Show component usages action now finds usages in both imports and markup templates. We’ve also added a Show Component Usages filter to exclude component usages when searching for regular file references. The Rename refactoring has also been updated with an option to include usages when renaming a component file.

Database tools and full SQL support, previously available through a paid plugin, is now bundled with WebStorm at no extra cost. You can query, create, and manage databases directly in the IDE. This extends WebStorm’s capabilities for backend and full-stack development. It also makes switching between JetBrains IDEs easier, as most of them include this functionality.

We’ve worked to address the main concerns about AI Assistant’s quality. This release improves code completion for JavaScript and TypeScript and adds support for HTML and CSS. By combining local full-line suggestions with cloud-based suggestions from JetBrains' in-house LLMs, we've enhanced speed and accuracy while reducing irrelevant suggestions.

For more details, see this blog post.

The color preview for Tailwind CSS classes is now shown inline in the editor, making it easier to tell the colors apart. We've added support for the textDocument/documentColor method from the Language Server Protocol (LSP), so all LSP-based plugins now offer this functionality out of the box.

For projects with Angular 19, WebStorm now defaults to standalone mode for components, directives, and pipes. Quick-fixes have been added to help convert between standalone and non-standalone components. Unused standalone imports can be automatically removed during code reformatting or via a new inspection. Support for the @let syntax has also been improved.

WebStorm now properly handles .prettierignore files in subfolders with a package.json, ensuring ignored files aren’t formatted. A new option also lets you specify custom ignore files in Settings | Languages & Frameworks | JavaScript | Prettier.

The Vue Language Server is now bundled with WebStorm to enhance reliability and prevent issues with loading on WSL. In the future, we plan to do the same for Svelte, Astro, and other technologies.

We’ve added support for the <script module> attribute, ensuring symbols from these blocks are resolved correctly. Additionally, there's a new checkbox to disable SvelteKit a11y warnings, giving you more control over accessibility warnings.

We’ve optimized the placement of the Rename action in the context menu when it’s called on elements in the editor and the Project tool window. The action is now at the top level, making it easier to quickly rename files, variables, and other elements.

WebStorm now excludes node_modules results by default when using Find in Files in project directories, reducing clutter from irrelevant files. You can restore the previous behavior by enabling the Search in library files when “Directory” is selected in Find in Files option under Settings | Advanced Settings.

By default, WebStorm will now automatically highlight all instances of the text you select within a file. This makes it easier to track where your selected text appears throughout your code. You can customize the feature in Settings | Editor | General | Appearance.

Previously, the .idea folder – a place where WebStorm stores internal configuration settings – was hidden by default. This made it harder for some users to commit project-wide configurations. To address this, we’ve made it visible in the Project tool window.

WebStorm now automatically excludes unnecessary files in the dist folder from indexing to optimize CPU usage and decrease indexing time.

You can now manage background checks during the commit process with a new option under Settings | Version Control | Commit | Advanced Commit Checks | Run advanced checks after a commit is done. This setting lets you decide if tests and inspections should run after making a commit. If you want to wait for these checks to complete, simply disable this option.