WebStorm 2024.1 EAP Digest #3: Full Line Code Completion, Language Services Widget, React Quick-Fixes, and More
It’s time for our last EAP digest that will walk you through the new features and improvements in WebStorm 2024.1! For more information, check out our previous blog posts.
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 builds from our website.
Important! WebStorm EAP builds are not fully tested and might be unstable.
Please try the latest 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: Full line code completion, a new Language Services widget, an enhanced documentation popup, new quick-fixes for React, VCS improvements, and better GitHub Actions support.
- Also in this release: Vue’s
v-bindsame-name shorthand support, enhanced GraphQL support, and new product icons.
Key highlights
Full line code completion
A new type of code completion is available in the WebStorm 2024.1 EAP: gray-toned, single-line suggestions that complete lines based on the context of the current file. These suggestions are powered by specialized language models that we trained explicitly for different languages and frameworks and that run locally without sending any code over the internet. The functionality is provided by the Full Line Code Completion plugin. This functionality is not related to the AI Assistant plugin and currently does not require a subscription to the JetBrains AI service to use.
These suggestions depend on the file type and the specific context. Additionally, we validate input from the model to filter out invalid variants.
You can fine-tune this feature in Settings | Editor | General | Code Completion | Machine Learning-Assisted Completion.
Language Services widget
A new Language Services widget on the status bar displays the language services running for the current file and the other services active in the project. From this widget, you can quickly restart a service or navigate directly to its settings:
Please note the widget is available only in the new UI.
Quick Documentation improvements
In the latest EAP versions, we’ve improved the look and feel of the Quick Documentation popup and added new functionality, as well. Quick Documentation also now shows interface members, enum constants, and type alias bodies. You can use the Show more link to expand the full list of type members and navigate to the referenced types:
Additionally, it’s now possible to navigate between multiple declarations of interfaces, type aliases, enums, functions, and other entities using the paging control at the top of the dialog.
Quick-fixes for React props and state creation
We’ve introduced several new quick-fixes for React that allow on-the-fly prop and state creation. The Create prop in <CurrentComponent> quick-fix allows you to add a prop to the current component from the unresolved symbol. WebStorm will attempt to detect the target prop’s declaration type or interface and add the prop with the correctly inferred type:
The second quick-fix has similar mechanics but adds props to a component defined in your project directly from the JSX:
These quick-fixes are also compatible with class-based React components.
Finally, a very similar mechanism is available for creating states in functional React components:
Version control improvements
In-editor code review
WebStorm 2024.1 EAP introduces a smoother code review process for GitHub and GitLab users. The new review mode activates once a pull or merge request branch is checked, highlighting changes with purple markers in the gutter as you open files from the diff or Project tool window. These markers, which are visible to authors and reviewers, display the original code in a popup. You can then engage in discussions directly in the editor by clicking the + or Message icons to start a new discussion or view and respond to comments, respectively.
You can use the widget in the editor’s upper right-hand corner to see only unresolved discussions or turn review mode off completely. You can also do it from the VCS widget in the status bar. Finally, you can add reactions to comments without leaving the IDE 🎉:
CI-check statuses in the Git tool window
A new column in the Log tab of the Git tool window allows you to easily review the results of GitHub commit checks performed by your CI system. Simply click on the column to view the full details of the CI checks.
Branch filter for the History tab of the Git tool window
We’ve made it easier to view the file history in the Git tool window. Now, instead of a Show all branches button, there’s a branch filter to help you see the file changes in a specific branch. Plus, we’ve made the toolbar horizontal for better usability.
Improved GitHub Actions support
Our latest update introduces extensive autocompletion support for various GitHub Actions contexts, including github.*, env.*, steps.*, and inputs.*.
We’ve also added completion for image and main Docker configuration properties:
HTTP Client improvements
The HTTP Client now uses Netty as its low-level networking library. Because Netty provides support for SSL, proxies, and HTTP/2, this change allowed us to implement HTTP/2 support in the HTTP Client.
The HTTP Client offers new authentication options, including the PKCE Authorization Code and Device Grant flows. It also supports extra parameters for token and authentication requests. Now, the HTTP Client automatically handles the generation of code_challenge and passes code_verifier for token retrieval during PKCE requests.
New product icons
WebStorm 2024.1 introduces refreshed product icons that align with updates across all JetBrains IDEs and enhance the visual consistency across the ecosystem.
Option to show tool window names in the side toolbars
It is now possible to display tool window names on side toolbars in the new UI. Simply right-click on the toolbar to access the context menu and choose Show Tool Window Names, or enable this option via Settings | Appearance & Behavior | Appearance | Tool Windows. It’s also possible to tailor the width of the toolbar by dragging its edge:
Other highlights
Here’s an overview of the key improvements for various technologies supported by WebStorm, along with some notable bug fixes.
Frameworks and technologies
- We’ve added support for Vue’s
v-bindsame-name shorthand, introduced in v3.4 of the framework (WEB-64877). - The default Vue Language Server version has been updated to 1.8.27 (WEB-65480).
- We’ve improved breadcrumbs in Svelte files (WEB-65685), fixing the recently introduced sticky lines for Svelte, as well.
- There are a couple of GraphQL enhancements:
- The Prisma Language Server has been updated to 5.9.1 (WEB-65545).
User experience
- The new terminal UI is now suggested as an opt-in feature. You can enable it in Settings | Tools | Terminal or via the kebab Options icon in the terminal.
- Now
js(x)andts(x)files containing.test,.spec, or.cypostfixes in filenames are designated as test files regardless of whether a test structure is present in a file (WEB-65218).
Notable fixes
- We’ve improved the resolve in Vue to navigate to components instead of components.d.ts (WEB-57530).
That’s it for today. For the full list of improvements available in the latest EAP build, check out the release notes.
The WebStorm team
Subscribe to WebStorm Blog updates
