Early Access Program

WebStorm 2022.3 EAP #4: Type Narrowing in Angular Templates, and Improvements for Vue and Docker

WebStorm 2022.3 EAP build #4 is now available! To catch up on all the new features, check out our previous EAP 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.

You can find the biggest improvements in WebStorm 2022.3 EAP #4 below. Please try them out and share your feedback with us in the comments. If you want to report a bug or submit a feature request, you can do so directly in our issue tracker.

Type narrowing in Angular templates

We’re continuing to improve Angular support in WebStorm. We’ve added type narrowing in Angular templates, which will provide more precise type information and better code completion suggestions.

type narrowing for Angular

We plan to roll out more fixes related to type narrowing in the near future. Stay tuned!

Further improvements for Vue

We’ve been working on improving our Vue support for this release and have some additional features to share with you in this EAP build.

Updated New Project wizard

We’ve revised the new project template for Vue to make sure it follows the latest standards. You can now create a new Vue project with Vite, which is the recommended way. You can get to the New Project dialog by going to File on the main menu and selecting New | Project or by choosing New Project from the Welcome screen.

Creating a new Vue project

Updated Vue Live Templates

We’ve updated the available code snippets, or Live Templates as they are called in WebStorm. You can use them to add common constructs like script setup or export default faster. Go to Preferences / Settings | Editor | Live Templates and expand the Vue section to browse all the available code snippets.

Settings showing the Live Templates available for Vue

Completion/type checking of library component props

We’ve fixed the behavior of code completion and type checking for Vue library component props. Now, these Vue component prop names are type checked and have correct completion suggestions.

Auto complete for ELInput component prop

Props destructure syntax support

WebStorm 2022.3 also includes support for the prop destructure syntax. Now you can use the IDE intelligence for prop suggestions, type checking, and detecting missing props. For example, props with a value assigned in destructuring now report missing required attributes. It also makes sure you don’t reference props that are not destructured in template expressions without a rest.qualifier, and that default values with both a runtime declaration and type declaration are recognized.

Props destructure syntax support showing warning

Improvements for Docker

Docker executable from WSL without Docker Desktop

WebStorm now supports connections to Docker that run in the Windows Subsystem for Linux (WSL). You can set up a connection in Preferences / Settings | Build, Execution, Deployment | Docker.

New WSL option in the Docker connection settings

New intention action: Pull Docker image

There is now an easy way to pull a required image without running it from Dockerfile, docker-compose.yml, or tests using the Testcontainers library. Call context actions (⌥⏎ / Alt+Enter) on the highlighted image name and select Pull Docker image.

Pull Docker image using Alt+Enter on a Docker image

Support .dockerignore file type

We’ve introduced full support for .dockerignore files, including code highlighting and completion. Also, these files are now taken into account when you build an image from the IDE.

.gitignore autocompletion on

Support for the heredoc format in Dockerfile files

Here documents allow redirecting subsequent Dockerfile lines to the input of RUN or COPY commands. WebStorm now supports this syntax, so you can use it to generate config files or multiline scripts right in your Dockerfiles.

Support for the heredoc format in Dockerfiles

Docker connections from Docker Contexts

You can now set up additional Docker connections using Docker Contexts if you already have these settings in the Docker config. You can do that by calling the Add Service context menu in the Services view and selecting Docker Connections From Docker Contexts.

Docker connections from Docker Contexts

Deprecated Docker Machine

Since the Docker Machine has been deprecated by Docker, we’ve removed it from the list of connections in Preferences / Settings | Build, Execution, Deployment | Docker.

If you’re an active Docker Machine user, you can still connect to it with an API URL. You can either get a list of Docker Machines and enter the corresponding URL there, or enter the path to the certs folder.

That’s it for today! For the full list of the improvements available in WebStorm 2022.3 EAP #4, check out the release notes.

The WebStorm team

image description