What’s New in WebStorm 2024.1

WebStorm 2024.1 includes sticky lines to help you navigate large files without losing context. This feature pins key structural elements like function or class declarations to the top of your editor as you scroll. You can customize the feature in Settings | Editor | General | Appearance.

The quick documentation popup comes with improved functionality in WebStorm 2024.1. It supports syntax highlighting for code blocks and is integrated into completion results. It now displays interface members, enum constants, and type alias bodies. You can use the Show more link to access the full list of type members and navigate between multiple declarations using the paging control.

We've added a new type of code completion: gray-toned, single-line suggestions that complete lines based on the context of the current file. These suggestions are powered by specialized language models trained for different languages and frameworks. Those LLMs run locally without sending any code over the internet. This functionality is included in the standard WebStorm license subscription.

The Vue Language Server is now enabled by default for all Vue projects, including Nuxt-based ones. It has some known limitations in Vue 2 projects. If you work with them, you can opt out of using the server in Settings | Languages & Frameworks | TypeScript | Vue.

WebStorm now offers in-editor hints for component usages in Vue, Svelte, and Astro files. This will help you quickly locate all usages of a specific component anywhere in the project.

You’ll find the new Language Services widget on the status bar, providing insights into the active language services for the current file and project. You can restart services or navigate to their settings directly from this widget.

The 2024.1 release comes with an experimental TypeScript engine, which can be toggled via Settings | Languages & Frameworks | TypeScript. The aim of the new engine is to address compatibility issues and enhance performance. The new approach is currently applicable in TypeScript and Vue. For more information, see this blog post.

WebStorm 2024.1 introduces several new quick-fixes for React that let you create props and states on the fly. You can apply these quick-fixes using the shortcut Alt+Enter. See this blog post for more information.

The Structure tool window now displays React components and hooks, alongside JSX structure, including nodes for conditional and list rendering. Additionally, JSX-powered libraries like Preact and Solid are supported.

WebStorm 2024.1 improves the code review process for GitHub and GitLab users. The new review mode highlights changes with purple markers in the gutter, visible to authors and reviewers. You can engage in discussions directly within the editor by clicking the + or Message icons to start new discussions or view and respond to comments.

WebStorm 2024.1 introduces autocompletion for GitHub Actions contexts, including github.*, env.*, steps.*, and inputs.*. We’ve also added completion for the image and main Docker configuration properties.

WebStorm 2024.1 simplifies code review with a focused view of branch-related changes. For GitHub and GitLab, you can click the branch name in the Pull Requests tool window and select Show in Git Log from the menu. This will open the Log tab, displaying all of the changes in a branch.

WebStorm 2024.1 brings support for reactions to review comments for GitHub pull requests and GitLab merge requests. You can now select from a set of emojis to add reactions to your code review comments.

We’ve implemented a new terminal UI, which is available via Settings | Tools | Terminal | Enable New Terminal. Commands are now presented in distinct blocks, allowing easy navigation using the arrow keys or keyboard shortcuts (Ctrl+↑ and Ctrl+↓). Additionally, you can enjoy code completion for commands, paths, arguments, and options. See this blog post for more information.

WebStorm 2024.1 offers a more convenient workflow for setting breakpoints in lines. Once you set a breakpoint by clicking on the gutter, the IDE automatically displays inline markers where additional breakpoints can be set. Each breakpoint can be configured independently, unlocking advanced debugging capabilities.

In WebStorm 2024.1, we've expanded IDE scaling options. Now, you can scale down the IDE to 70%, in addition to the previous 100% to 200% range. This will make it easy to adjust the UI size to fit more content in the space.

The HTTP Client now uses Netty as its low-level networking library, which allows us to implement HTTP/2 support in the HTTP Client. Additionally, there are new authentication options, including PKCE Authorization Code and Device Grant flows, along with enhanced support for token and authentication requests.