WebStorm 2023.3 EAP Digest #2: Improvements for Type Only Import, Angular, Svelte, and More
We’re now halfway through the WebStorm 2023.3 Early Access Program! It’s been a while since we’ve updated you on the latest improvements and features we’ve been working on. Here is a round-up of some of the key changes that have made it into 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 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.
- New features: Type-only import improvements, Angular enhancements, Svelte improvements, an all-in-one diff viewer, AI Assistant improvements, Speed Search shortcut, and new HTTP Client features.
- Other highlights: We’ve worked on fixes for some long outstanding issues, such as type hinting for props in Vue and the “Use code style based on Prettier for this project” option not working, as well as some updates to improve the user experience.
New Features
Improvements for Imports with type modifier
We’re looking at solving some of the frustrating import type issues in WebStorm 2023.3. There are also a lot of fixes for edge cases and inconsistencies with adding import type statements. We’ve also added a new option to configure the usage of the TypeScript import type statement or type specifier when importing a type, which you can find in Settings | Editor | Code Style | TypeScript -> Imports -> Use ‘import type’ when importing a type.
Angular enhancements
Improved formatting for Angular inspection errors
Our work on improving how we present type errors has made it to Angular. Now, when you see an Angular-specific inspection, the errors and warnings will be formatted in a way that makes them much more readable and easier for you to diagnose issues.
Support strict template type checking in Angular templates
In our previous release, we made improvements to how WebStorm deals with Angular strictTemplates. In WebStorm 2023.3, we’ve fixed generic params evaluation. We still have some flags that we need to support, but the overall template type checking now should work. Please try it out, and if you find any issues, please report them to our tracker.
Quick-fix to move standalone components from declarations to imports in NgModule
WebStorm already has an inspection that indicates if a standalone component is declared in NgModule. In WebStorm 2023.3, we’ve added a quick-fix that provides the option to import standalone components for this inspection.
Svelte improvements
We’ve implemented a proper auto-import mechanism for components in Svelte projects. Imports are suggested from node_modules or from other .svelte files in the project. The import suggestion works on completion, on copy-paste, and with Alt+Enter. We’ve also fixed the issue causing Svelte components with a context="module" attribute not to be properly resolved in import statements.
All-in-one diff viewer
WebStorm 2023.3 introduces a revamped way to review changes. Now, instead of going through each file one by one, you can see all of the modified files from a changeset in a single, scrollable frame. This new diff viewer is accessible from the Git Log tool window and currently works with JetBrains Space reviews. We’re also working on making it compatible with GitLab and GitHub.
AI Assistant improvements
We’re continuing to implement improvements to our AI Assistant plugin to make it an even more powerful and useful tool. For WebStorm 2023.3, we’ve added detection for state management in the project and context support in package.json.
Support AI name suggestions
The AI Assistant has much better name suggestion support – it now provides name suggestions when using refactorings like Introduce Variable.
Speed Search shortcut
The Speed Search functionality, allowing you to quickly navigate within tool windows and dialogs, is now available via a shortcut. Once the focus is placed on a tree or list, you can easily invoke the search from the tool window’s Options menu by pressing ⌘F on macOS, or Ctrl+F on Windows or Linux, or simply by starting to type your query.
You can also assign a custom shortcut for the Speed Search function in Settings | Keymap.
HTTP Client improvements
Enhanced Structure view
We’ve improved the Structure view in the HTTP Client to streamline navigation within large .http files. This update introduces color-coded labels for request types and provides a clearer listing of their contents.
Support for in-place variables
The HTTP Client has been updated to include support for declaring variables using @. Now, you don’t need any extra environment files to reuse values between many requests, and the IDE provides code completion for these values so you can easily incorporate them in requests.
OAuth 2.0 Support
The HTTP Client now provides support for authentication with OAuth 2.0 password and client credential grant types. With this update, you can reference authentication data in your requests using the new syntax {$auth.token("my-keycloak1")} and navigate to the JSON file containing the authentication details.
This change streamlines the request execution process, eliminating the need to manually retrieve tokens. The IDE now automatically includes these tokens in your requests, and also displays the login form in the interactive popup dialog displaying the IDE built-in web browser.
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
- We’ve fixed the issue causing the Tailwind CSS completion not to work in Yarn PnP projects (WEB-61271).
- We’ve fixed the issue with the Color Picker not working for RGB numbers (WEB-54459).
Frameworks and technologies
- We’ve fixed the issue with Vue where the JSdoc type for props was not working (WEB-60787).
- We’ve fixed the issue causing the Component or directive matching tr element is out of scope of the current template on an HTML
<tr>tag used inside an<ng-template>tag (WEB-62508).
User experience
- We’ve simplified the default glob patterns to make it easier to work with glob patterns in our setting for Prettier, ESLint, and Stylelint (WEB-63021).
- We’ve updated the list of the file templates in the new file popup to make the list more logical (WEB-61053).
Notable fixes
- We’ve fixed the long-running issue causing the Use code style based on Prettier for this project option to have no effect. Part of the solution is a banner that now appears if the code style configured in the IDE doesn’t match the code style specified by the .prettierrc file. (WEB-41888).
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
