Fixes

• Fixed the issue causing the IDE to freeze and hang when indexing WSL projects.
• Tailwind CSS code completion will now work if your package.json, node-modules, and tailwind.config.js files are located in a subfolder.
• WebStorm will automatically find a Prettier package installed globally using NVM.
• Fixed the behavior on macOS when switching between Big Sur tabs.
• Solved the problem causing the IDE to add unexpected refs / heads prefixes when pushing to Gerrit.

Fixes

• Solved a number of problems with Vue support.
• For projects hosted within WSL 2, WebStorm should no longer freeze when indexing files.
• In Angular, compiler errors shown in the Run tool window should now be clickable.
• Fixed the issue that was disabling the Rebase button in the corresponding dialog.

Features

• Ability to set different colors for components and tags - Added a new Custom Tag Name option that will allow you to set a different color for your Vue, React JSX, and Angular components.
• Icons for completion suggestions in HTML - For HTML, WebStorm will now show you icons next to suggestions in the code completion pop-up.
• Improvements for Stylelint - Stylelint used to work with HTML, Vue, and SCSS out of the box. This changed with the release of v14 - now it only supports CSS files out of the box and requires you to update your .stylelintrc file to turn on support for other file types. If you were on v14 with the default setup, WebStorm would show you an error whenever you’d open files that aren’t .css. To solve this problem, a new Run for files field has been added.

Fixes

• Code completion for the Tailwind CSS classes should now work as expected. Also added support for v3.0.
• Changed the behavior and implementation of the Trusted Projects feature.
• Solved a number of problems with Angular support.
• For Yarn PnP, indirect dependencies should now be indexed.
• The v-bind CSS function is now supported in Vue.
• Fixed the issue that was causing dialogs to be displayed in the wrong window on macOS Big Sur.
• Fixed the regression that was activating drag and drop during attempts to resize tool windows.

Features

• JavaScript and TypeScript
  • Refactoring support for private class members - Reworked the existing support for private fields. WebStorm now properly supports ES2022 (ECMAScript 2022) private class members.
  • Support for URLs in import statements - You can now download remote ES6 modules by using a quick-fix on the import path in ES6 files. The module will be downloaded with all its dependencies and linked as a project library.
  • Better mapping between .js and .d.ts files - Improved mapping between .js and .d.ts files and added gutter icons for better navigation between them.
  • Faster indexing of JavaScript files - Decreased the indexing times for JavaScript files by 20%. This will help you get to work faster when you open a new project or do a massive Git update. Please note that the change will be less noticeable if your project mainly consists of .ts or other types of files.
  • Improved support for monorepos - This release comes with a number of improvements for working with monorepos. The most notable change is that automatically added imports now respect the project structure by treating each folder in the project with package.json as a separate package.
• Frameworks & Technologies
  • New inspection for updating dependencies - This release allows you to update your npm packages to the latest version right from the editor. Open your package.json file, place the caret on the package version you want to update, then press Alt+Enter and select Update ‘package name’ to the latest version. A quick-fix will also be shown when you hover over the package version.
  • Reworked Deno integration - To improve your experience working with Deno, WebStorm has migrated to the Deno LSP and fixed a bunch of known issues.
  • Improved HTML completion - Improved the way code completion works in HTML. Whenever you type a tag name or an abbreviation in the editor, or invoke code completion, WebStorm will show you relevant suggestions right away. Previously, it would only show them if you typed < first. Additionally, code completion for character entity references should work better now.
  • Type checking for Vue and React - This release supports type checking in Vue templates. The IDE will let you know when an incorrect type is used in the expressions bound to properties. This will also work for React attributes.
  • New features for the HTTP client - This release significantly improves WebStorm’s built-in HTTP client. A lot of new functionality has been added, including support for binary responses, output redirection to a custom file or directory, and more.
• Remote Development
  • Running WebStorm remotely - WebStorm 2021.3 supports a beta version of the new remote development workflow. You can now connect to a remote machine running an IDE backend and work on a project located there as if it were on your local machine. This is possible thanks to the new application called JetBrains Gateway.
  • Development with remote Node.js - Significantly improved support for the workflow where Node.js is installed in Docker and then used by WebStorm’s integrations with JavaScript tooling. Your IDE will now let you use the Node.js remote interpreter with ESLint, Jest, Mocha, and npm.
  • Proxy support for SSH connections - You can now specify an HTTP or SOCKS proxy server for your SSH configuration in Preferences / Settings | Tools | SSH Configurations. Under the new HTTP/SOCKS Proxy section, you can select the proxy type, enter a hostname and a port, and, if necessary, apply authentication with a login and password.
• User Experience
  • Ability to split the Run tool window - You can now split your Run tool window. To do this, drag the desired tab to the highlighted area and drop it there. To unsplit the tool window, you can drag the tab back or right-click the top pane and select Unsplit from the context menu.
  • New Bookmarks tool window - Before there were two very similar instances - Favorites and Bookmarks. As the difference could be confusing, WebStorm has decided to stick to just one – Bookmarks. The workflow  has been reworked for this feature and a new tool window has been made for it. From now on, any files, folders, and classes you mark as important with F11 will be located under the new Bookmarks tool window.
  • Source preview for Show Usages - When you view the usages of a symbol with Ctrl+Alt+F7, or by pressing Ctrl and clicking on the definition, you can now turn on the source code preview for a found usage by clicking the square icon.
  • Improvements to the terminal - WebStorm’s built-in terminal now supports the new ConPTY API on Microsoft Windows. This change helped address several issues and add support for 24-bit colors. Additionally, the newly added typeahead support predicts text modifications and displays them in light grey right away. This feature allows you to type in the terminal equally fast, whether you work on a local or a remote machine.
  • Accessibility updates - Addressed some accessibility issues to make working with the screen reader more comfortable. The tool window widget pop-up has been disabled and the quick documentation pop-up that used to appear on a mouseover. The accessibility support on Apple macOS has also been improved. Resolved several issues with voiceover focus and made it possible to create projects using a screen reader.
  • Ability to change the font size for all tabs - You can now use the mouse wheel to change the font size in the editor for all open files.
• Version Control
  • Reorganized VCS settings - Reorganized everything under Preferences / Settings | Version Control to make the key configuration options more discoverable. For example, the settings under the Git node are now divided into sections that account for the most important processes: Commit, Push, and Update. Also, the parameters inside these sections are now organized more logically.
  • New Push all up to Here action - Sometimes, you may have a few commits that are ready to be shipped while others are still works in progress. In such cases, you may want to push only the ones you are sure about. WebStorm will now let you push commits up to the one you have selected in the Log tab of the Git tool window. Just pick the commit, right-click on it, and select Push All up to Here.
  • Checkout and Rebase onto Current for remote branches - With the Checkout and Rebase onto Current action, you can check out the selected branch and rebase it on top of a branch that is currently checked out. Previously, this action was available for local branches only. Now you can use it for remote branches as well.
  • New Changes tool window - Previously, WebStorm would show you the difference between commits in a separate dialog. Starting from this release, the IDE will display this information in a new Changes tool window. To open the new tool window, in the Log tab of your version control system right-click on a revision and pick Compare with local from the context menu.