Early Access Program

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.

DOWNLOAD WEBSTORM 2023.3 EAP

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

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.

Showing the new settings option use import type when using 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.

Showing the new formatting for Angular error messages

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.

Showing no errors with strictTemplate code

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.

Using the import standalone components in NgModule

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.

Showing the import suggestions from other .svelte files

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.

Showing the new All-in-one diff viewer

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.

Showing asking AI Assistant about the state management in the project.

Support AI name suggestions

The AI Assistant has much better name suggestion support – it now provides name suggestions when using refactorings like Introduce Variable.

Showing the AI suggesting useful rename options

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.

The Speed Search option in the project tool window settings.

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.

Showing the new structure window formatting that makes it more readable

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.

in place variables being shown in the editor

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.

 HTTP Client now provides support for authentication showing the password

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!

image description