Thanks to WebStorm’s built-in React support, all of the key features should
have already been working in your Next.js projects. WebStorm 2022.1 adds
support for some framework-specific things, such as pages. The IDE
will resolve paths used in the
href attribute of your
Link components as well as in
form and other tags.
Code completion, navigation, and refactorings will work, too.
WebStorm 2022.1 comes with several improvements for Vue 3.
If you define components globally, the IDE will now recognize them in your
.vue files. WebStorm should support the
syntax. It will correctly match applications created using
createApp with their related elements. Support for Nuxt 3 has
been added, too.
We’ve reworked the Docker UI in the Services tool window. The makeover has been implemented for containers, images, networks, and volumes. We’ve also added support for Docker Registry HTTP API V2 to use with Docker 1.6+. You can create simple or password-protected Docker V2 registries and perform actions like viewing, pushing, and pulling images.
WebStorm now supports Corepack, an experimental Node.js tool that lets you use Yarn and pnpm without having to install them.
Starting from v2022.1, webpack
coding assistance will work with ES modules in your
If you like the nice little touches in WebStorm, you’ll definitely like this addition. README files often describe the steps needed for running an app, and list a bunch of commands to use. WebStorm 2022.1 will let you run those commands right from the README file – just click on the Run icon to the left of the command.
To make it easier to format
.md files, we’ve
reworked the floating toolbar that appears upon text selection.
In addition to the new design, the toolbar now offers list creation
functionality and a dropdown menu that allows you to select header styles.
We’ve also added a new Copy code snippet action to Markdown blocks. This will allow you to quickly copy their contents to the clipboard.
The command-line formatter now supports dry run mode to validate project files. If a file needs formatting, it will exit with a non-zero status.
You can now reformat your code while in LightEdit mode. To do so, go to Code | Reformat Code in the main menu or press Ctrl+Alt+L.
Did you know WebStorm lets you join lines or blocks of code using
Ctrl+Shift+J? This action now
works for nested
if statements. WebStorm will also
remove redundant braces when you use the Join Lines action on
for-of, and other
similar statements with single-lined blocks.
We’ve introduced new Enum and Enum member syntax highlighting options. You can find them in Preferences / Settings | Editor | Color Scheme | TypeScript. Their default values are inherited from Class for Enum and from Static member variables for Enum members.
We’ve replaced WebStorm’s Event Log with a new Notifications tool window. We hope that it will help you maintain a better overview of notifications from the IDE so you don’t miss anything important.
To maximize the usable space in the Debugger tool window, we’ve hidden the tab labels by default. To make them visible again or to customize their location, use the Show Tab Labels option under Layout Settings.
The Structural Search and Replace dialog now features a list of all the templates to make it easier to navigate between them. We’ve also added a Pin Dialog icon to the upper-right corner of the dialog and moved the Injected code and Match case checkboxes to the bottom of the Search template pane.
To facilitate navigation in the Log tab, the screen reader now reads the names and descriptions of the branches’ trees. In addition, accessibility support on macOS has been improved. We’ve fixed the incorrect positioning of the VoiceOver cursor when working on an external display. VoiceOver can now also read combo box lists.
We’ve implemented a little refinement for those who like to reorganize their workspace by splitting the editor. You can now configure the split tabs to have the same width. To do this, go to Preferences / Settings | Advanced Settings and select the new Equalize proportions in nested splits option.
We’ve improved the functionality of Annotate with Git Blame to make investigating introduced changes easier. The IDE highlights the differences in lines right in the editor when you hover on an annotation and opens the Log tab under the Git tool window when you click on it.
The Commit Details pane now includes information about GPG signatures and build status. Previously, this data was shown only as a column in the Git log.
It’s now easier to work with suggested changes in WebStorm. We’ve added the ability to apply or commit changes locally right in the IDE.