WebStorm 2021.3: Numerous JavaScript Improvements, Remote Development, and Better HTML Completion
WebStorm 2021.3, the last major update of the year, is here! This update is jam-packed with long-awaited enhancements, including support for remote development, improved HTML completion, reworked Deno integration, and others.
If you only have a few minutes to explore what’s new in WebStorm 2021.3, watch this video where Paul Everitt, Developer Advocate at JetBrains, walks you through the most notable changes. If you feel like diving deeper, read on!
The new features and improvements fall into these categories:
- JavaScript & TypeScript: improvements for working with monorepos, faster indexing times for JavaScript files, a quick-fix for downloading remote ES6 modules, support for ES2022 private class members, and more.
- Frameworks & Technologies: easier management of project dependencies, reworked Deno plugin, support for Angular 13, better HTML completion, and more.
- Remote Development: JetBrains Gateway for remote development, Node.js remote interpreter updates, and proxy support for SSH connections.
- Docker: improved connection process, a new Clean up action, Minikube integration, support for Compose V2, and more.
- User Experience: the ability to split the Run tool window, a new Bookmarks tool window, ML-based search for actions in Search Everywhere, and more.
- Version Control: reorganized VCS settings, improved workflow for pushing commits, a new Changes tool window, and more.
JavaScript & TypeScript
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.
Faster indexing of JavaScript files
We understand that WebStorm’s performance may not be optimal at times, so we’re constantly working to improve it. Quite often, the changes related to performance are subtle, and you may not notice them unless you use a timer or a CPU profiler. In this release, we’ve managed to achieve more noticeable results, decreasing the indexing times for JavaScript files by 20%.
We hope this improvement will help you to get working 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 TypeScript or other types of files.
Support for URLs in import statements
Starting from v2021.3 you can download remote ES6 modules using a quick-fix on the import path in ES6 files. The module with all its dependencies will be downloaded and linked as a project library. The functionality should work the same way it does in the browser. To give it a try, place the caret on the import path, then press ⌥⏎ / Alt+Enter and select Download module.
Refactoring support for ES2022 private class members
Support for private fields was added to WebStorm back in 2018. However, as this support was based on the old proposal from TC39, it has since diverged from the standard. To comply with the standard, we’ve reworked the existing support from the ground up – WebStorm 2021.3 will support ES2022 private class members. When you use private names – elements starting with # – for your fields, accessors, or methods, everything should work as expected. For example, here’s how the rename refactoring will work in v2021.3.
New intentions for organizing code
There are two new intentions for organizing your code in WebStorm 2021.3.
You can now quickly put comma-separated elements on one or multiple lines. The new intention works for array and object literals, parameter and argument lists, XML, HTML, and JSX attributes, and other similar elements.
To try the intention, place the caret on the elements you want to alter, then press ⌥⏎ / Alt+Enter and select either Put comma-separated elements on one line or Put comma-separated elements on multiple lines as appropriate. For XML, HTML, and JSX, you’ll see slightly different wording for this action – Put attributes on separate lines or Put attributes on one line.
The second intention that was added relates to JSDoc comments. WebStorm can now help you replace single and multi-line comments with JSDoc comments in one click. As usual, you can access the available context actions with ⌥⏎ / Alt+Enter.
Better mapping between .js and .d.ts files
Another improvement in this release touches .js and .d.ts files. We’ve improved mapping between them and added gutter icons for better navigation. To learn more about the changes, read this blog post.
Frameworks & Technologies
New inspection for updating dependencies
Over the years, we’ve added features to help you add and update packages from the package.json file, as well as to help you get relevant information about those packages. With this release, we’ve made some changes that should make the management of project dependencies easier.
You can now update 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.
By default, the new inspection only provides a quick-fix, and doesn’t highlight the outdated package in any way. If you want the warnings to be more prominent, you can change the inspection severity level in Preferences / Settings | Editor | Inspections – look for Update package.json dependencies there.
Previously, WebStorm would allow you to manage your packages through the corresponding section in Preferences / Settings | Languages and Frameworks | Node.js and NPM. As only a few users managed their packages this way, we decided to remove this section and introduce a more straightforward way to handle the task – the new inspection described above.
Lastly, we’ve renamed the Node.js and NPM section in Preferences / Settings to Node.js to avoid any confusion. Just like before, you can use it to select a Node interpreter and the package manager of your choice: npm, pnpm, or Yarn.
Reworked Deno integration
Last year we introduced support for Deno in WebStorm. It relied on WebStorm’s integration with the TypeScript service as well as on the typescript-deno plugin. There were several drawbacks to this implementation, and it hasn’t been working reliably lately. Because of this, we’ve completely reworked it and migrated to the Deno LSP. We’ve also fixed a bunch of known issues. You can learn more about the biggest changes that we have made here.
To learn more about working with Deno, see this blog post. It already includes information about the recent changes.
Angular 13 support
One of the most pressing problems that we’ve addressed in this release is support for Angular 13. It was broken because of the changes to the Angular Package Format. WebStorm 2021.3 takes these changes into account and supports the new version of Angular.
Improved HTML completion
We’ve improved the way code completion works in HTML. Now, 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. We realized that this wasn’t very comfortable for those of you who aren’t used to typing < and > and for those of you who aren’t familiar with Emmet.
Additionally, code completion for character entity references should work better now.
Type checking for Vue and React properties
In between the 2021.2 and 2021.3 releases, we’ve shipped a bunch of long-awaited fixes for Vue, including support for script setup. In this release, we’ve added another useful improvement – WebStorm 2021.3 supports TypeScript 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 HTTP client
In this release, we’ve significantly improved WebStorm’s built-in HTTP client. We’ve added a lot of new functionality, including support for binary responses, output redirection to a custom file or directory, support for text and JSON streams, and support for HTTP request identifiers.
Read this blog post to take a closer look at these new features.
Remote Development
Running WebStorm remotely
As one of the biggest and longest-awaited updates of this release – WebStorm now has support for remote development workflows! You can connect to a remote machine with an IDE backend running and work on a project located there as if it were located on your local machine. We hope this helps you stay more productive and flexible while allowing you to work securely from anywhere.
Support for remote development workflows is provided through our new application: JetBrains Gateway. It serves as an entry point for all your remote backends and doesn’t require you to have an IDE installed on your local machine. You can grab the latest version of JetBrains Gateway from our website. Here’s what you’ll see after doing this:
For more information on how to get started, please refer to the documentation.
Please note that this is a beta version of the remote development functionality and we’re still actively working to improve it. Please give the new functionality a try and let us know what you think. You can share your feedback or report any bugs here.
Development with remote Node.js
For this release, we made a few significant improvements that support 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, Mocha, Jest, npm, pnpm, and yarn.
Node.js remote interpreter support for ESLint has been available since v2021.2 as an experimental feature. From here on out, it will be active by default.
To try out the new feature, start by adding a remote Node.js interpreter. This can be done by going to Preferences / Settings | Languages & Frameworks | Node.js, opening the drop-down list under the Node interpreter field and clicking Add. Then select Add Remote… and specify one of the existing Docker images in the dialog that appears.
Then go back to your Preferences / Settings and make sure the Package manager field has the correct path to the installation folder of a package manager in your Docker image.
Then you can go back to the editor and install the dependencies in your project using Node.js and your package manager inside Docker. At this point, you should be able to start working as you normally would when using Node.js locally. For example, if you want to lint a JavaScript file with ESLint, open that file in the editor. The errors should be highlighted automatically.
We’ve also extended Node.js remote interpreter support to Mocha, Jest, npm, pnpm, and yarn scripts. You can find instructions for each of the supported technologies below:
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.
It is also possible to sync your SSH proxy settings with the global IDE ones. To do so, select the Use global IDE proxy settings checkbox.
Docker
Easier connection process
Connecting to Docker has become faster! You can simply double-click on the node you need or use the new shortcut: ⌘⏎ on macOS or Ctrl+Enter on Windows and Linux. The Start container action can also be invoked with this shortcut.
New Clean up action
The new Clean up action works just like the prune terminal command. When you right-click on the Networks, Volumes, Containers, or Images node, you can select Clean up, and the IDE will delete the unused objects. You can also apply this action to the Docker root node to prune all the unnecessary objects in one click.
Connection to Docker from Minikube
It is now easy to connect to a Docker daemon from Minikube. Go to Preferences / Settings | Build, Execution, Deployment and select the Minikube radio button. In the field next to it, the IDE will automatically display the detected Minikube’s docker-daemon environments that you can connect to.
Support for Compose V2
WebStorm supports Compose V2, which allows you to run Docker Compose commands as docker compose, instead of docker-compose (with a dash).
To activate this option, go to Preferences / Settings | Build, Execution, Deployment | Docker | Tools and tick the Use Compose V2 checkbox.
Image layers
Image layers allow you to track all of the commands that are applied to images. To access them, select an image and go to the Layers tab. From there, when you choose a command, you can click on the Analyze image for more information link on the right-hand side of the screen for more detailed information about the changes applied to each layer.
Save container as image
If you have a preconfigured container that you want to use later, you can save it as an image. Go to the Services tool window, right-click on the container, and select Image | Save as a new Image.
Podman support
WebStorm now supports Podman as an alternative way to manage pods, containers, and images. Before using Podman in the IDE, please configure a connection first.
Once Podman has been installed and configured on your OS, you can connect to it via Preferences / Settings | Build, Execution, Deployment | Docker by selecting the TCP socket radio button and filling out the required fields.
User Experience
Ability to split the Run tool window
Have several configurations running and want to see their results simultaneously? 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
In WebStorm, we had two very similar instances – Favorites and Bookmarks. The difference could sometimes be confusing, so we decided to stick to just one – Bookmarks. We’ve reworked the workflow for this functionality and made a new tool window for it.
From now on, any files, folders, and classes you mark as important with the F3 shortcut on macOS or F11 on Windows / Linux will be located under the new Bookmarks tool window.
When you add a bookmark, WebStorm puts it in the node named after your project. The IDE automatically creates this node beforehand and stores all your prioritized items there by default. Any new bookmarks will appear at the top of the list inside this node. However, you can organize them manually by dragging them to new lists, which you can name as you like.
Source preview for Show Usages
The Show Usages feature has received a small yet handy improvement in this release. When you view the usages of a symbol with ⌥⌘F7 / 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.
ML-based search for actions in Search Everywhere
When searching for actions, Search Everywhere in WebStorm is now powered by machine learning by default. We’ve trained an ML-based formula that takes into account:
- The specific user’s action usage history.
- Action usage frequencies across the whole user base.
- The lengths of the search query, the action’s name, and so on.
We hope you find that the ML-based models boost your search quality and return results tailored to your specific needs.
Improvements to the terminal
WebStorm’s terminal now supports the new ConPTY API on Windows. Using this as a backend for the terminal helps address several problems that users were having with the old implementation, which was based on winpty. Also, 24-bit colors are now supported.
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.
Evaluate expressions from the debugger
In this release, we’ve improved the discoverability of the Evaluate Expression feature. Previously, many users resorted to using watches instead of the Evaluate dialog.
Now, the Evaluate Expression field is accessible right in the Debug tool window, making the most convenient way to evaluate expressions more obvious.
Built-in troubleshooting tool
WebStorm 2021.3 brings a new, faster way to diagnose and fix issues that prevent your IDE from working properly. If you have problems with WebStorm, invoke the new Repair IDE… action from the File menu. It will guide you through a sequence of steps to troubleshoot some of the most common problems.
Accessibility updates
We’ve addressed some accessibility issues to make it more comfortable to work in the screen reader mode. We’ve disabled the tool window widget pop-up and the quick documentation pop-up that used to appear on a mouse hover.
We’ve also fixed an issue with calling the Go to Declaration or Usages pop-up.
The accessibility support on macOS has also been improved. We’ve resolved several issues with voiceover focus and made it possible to create projects using a screen reader. To minimize distractions while you’re coding, we’ve decreased the number of help tooltips that play sounds.
Ability to change font size for all tabs
Did you know you can change the editor font size using the mouse wheel? Previously, this feature worked only for the current file. Now you can make it work for all opened files. Go to Preferences / Settings | Editor | General, tick Change font size with Command / Ctrl + Mouse Wheel in, and then choose All editors option.
Version Control
Reorganized VCS settings
To help you configure your version control systems faster, we’ve made VCS settings more discoverable and more clearly structured. Here are some of the changes you’ll find in Preferences / Settings | Version Control.
The Version Control node now lists all the available settings. You can navigate to the settings by clicking on them.
We improved the layout inside the Git node. We divided all the settings into sections that account for the most important processes: Commit, Push, and Update. Additionally, the parameters inside these sections are now organized more logically.
We’ve also added a separate node for Directory mappings, and the background operations are now switched on by default. The Background node no longer exists.
New Push All up to Here action
Sometimes, you may have several 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. With this release, WebStorm will let you push commits up to the one you have selected in the Log tab of the Git tool window. To do so, pick the necessary commit, right-click on it to open the context menu, and select a new Push All up to Here action.
Checkout and Rebase onto Current for remote branches
The Checkout and Rebase onto Current action allows you to 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. Starting from v2021.3, you can apply this action to remote branches, too.
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.
Align Changes Highlighting
We’ve added the new Align Changes Highlighting option to the Diff screen settings that can be found under the gear icon. This feature makes the Diff easier to read, especially when there are complex modifications, because it aligns the unchanged lines so that they are displayed next to each other. This helps you see the code that has been added or removed more clearly.
Those are the most notable highlights! For the full list of new features and enhancements available in WebStorm 2021.3, see the release notes. Please share your feedback with us and report any issues you encounter to our issue tracker.
The WebStorm team
Subscribe to WebStorm Blog updates
Discover more
WebStorm 2021.3：大量 JavaScript 改进、远程开发和更好的 HTML 补全
-
JavaScript 和 TypeScript：单仓库处理改进、JavaScript 文件的更快索引、下载远程 ES6 模块的快速修复、对 ES2022 私有类成员的支持等。
-
框架和技术：更轻松的项目依赖项管理、重做的 Deno 插件、对 Angular 13 的支持、更好的 HTML 补全等。
-
远程开发：用于远程开发的 JetBrains Gateway、Node.js 远程解释器更新以及对 SSH 连接的代理支持。
-
Docker：改进的连接过程、新的 Clean up（清理）操作、Minikube 集成、对 Compose V2 的支持等。
-
用户体验：Run（运行）工具窗口拆分、新的 Bookmarks（书签）工具窗口、基于机器学习的 Search Everywhere（随处搜索）操作搜索等。
-
版本控制：重新组织的 VCS 设置、改进的推送提交工作流、新的 Changes（变更）工具窗口等。
JavaScript 和 TypeScript
改进了对单仓库的支持
JavaScript 文件的更快索引
对 import 语句中 URL 的支持
ES2022 私有类成员的重构支持
用于组织代码的新意图
.js 和 .d.ts 文件之间更好的映射
框架和技术
用于更新依赖项的新检查
重新设计了 Deno 集成
Angular 13 支持
改进了 HTML 补全
Vue 和 React 属性的类型检查
针对 HTTP 客户端的新功能
远程开发
远程运行 WebStorm
使用远程 Node.js 进行开发
-
ESLint
-
Mocha 和 Jest
-
npm、pnpm 和 yarn
SSH 连接的代理支持
Docker
更简单的连接过程
新的 Clean up（清理）操作
从 Minikube 连接到 Docker
对 Compose V2 的支持
镜像层
将容器另存为镜像
Podman 支持
用户体验
拆分 Run（运行）工具窗口
新的 Bookmarks（书签）工具窗口
Show Usages（显示用法）的源代码预览
Search Everywhere（随处搜索）中基于机器学习的操作搜索
-
特定用户的操作使用历史记录。
-
整个用户群的操作使用频率。
-
搜索查询的长度、操作的名称等。
终端的改进
从调试器评估表达式
内置故障排除工具
无障碍功能更新
更改所有选项卡的字体大小
版本控制
重新组织了 VCS 设置
新的 Push All up to Here（推送此前所有提交）操作
远程分支的 Checkout and Rebase onto Current（签出并变基到当前分支）
新的 Changes（变更）工具窗口
Align Changes Highlighting（对齐变更高亮显示）
Subscribe to WebStorm Blog updates
Discover more
WebStorm 2021.3: viele JavaScript-Verbesserungen, Remote-Entwicklung und bessere HTML-Completion
WebStorm 2021.3 ist da – unser letztes großes Update in diesem Jahr! Wir haben zahlreiche lang erwartete Verbesserungen für Sie, darunter Unterstützung für Remote-Entwicklung, verbesserte HTML-Completion, eine überarbeitete Deno-Integration und mehr.
Wenn Sie nur ein paar Minuten Zeit haben, um die Neuerungen in WebStorm 2021.3 kennenzulernen, sehen Sie sich dieses Video an, in dem unser Developer Advocate Paul Everitt Ihnen die wichtigsten Änderungen vorstellt. Wenn Sie auch an den Details interessiert sind, lesen Sie einfach weiter!
Die neuen Funktionen und Verbesserungen fallen in diese Kategorien:
- JavaScript und TypeScript: Verbesserungen für die Arbeit mit Monorepos, schnellere Indizierung von JavaScript-Dateien, ein Quick-Fix zum Herunterladen von Remote-ES6-Modulen, Unterstützung für private Klassenmember nach ES2022 und mehr.
- Frameworks und Technologien: Einfachere Verwaltung von Projektabhängigkeiten, überarbeitetes Deno-Plugin, Unterstützung für Angular 13, bessere HTML-Completion und mehr.
- Remote-Entwicklung: JetBrains Gateway für die Remote-Entwicklung, Updates für Remote-Node.js-Interpreter und Proxy-Unterstützung für SSH-Verbindungen.
- Docker: Verbesserter Verbindungsprozess, neue Clean up-Aktion, Minikube-Integration, Compose-V2-Unterstützung und mehr.
- Benutzererfahrung: Teilbares Run-Toolfenster, neues Bookmarks-Toolfenster, ML-basierte Suche nach Aktionen in Search Everywhere und mehr.
- Versionsverwaltung: Neu strukturierte VCS-Einstellungen, verbesserter Workflow für das Pushen von Commits, neues Changes-Toolfenster und mehr.
JavaScript und TypeScript
Verbesserte Unterstützung für Monorepos
Wir haben eine Reihe von Verbesserungen für die Arbeit mit Monorepos eingeführt. Die wichtigste Änderung: Automatisch hinzugefügte Importe respektieren nun die Projektstruktur, indem sie jeden Ordner im Projekt mit einer package.json-Datei als separates Paket behandeln.
Schnellere Indizierung von JavaScript-Dateien
Uns ist bewusst, dass die Performance von WebStorm in einigen Situationen nicht optimal ist, und wir arbeiten kontinuierlich daran, dies zu verbessern. Leistungsbezogene Änderungen fallen ja oft kaum auf, wenn Sie nicht gerade einen Timer oder CPU-Profiler mitlaufen lassen. In dieser Version hingegen ist es uns gelungen, deutlichere Ergebnisse zu erzielen und die Indizierungszeiten von JavaScript-Dateien um 20% zu verkürzen.
Dadurch sollten Sie beim Öffnen eines neuen Projekts oder nach einem größeren Git-Update schneller mit der Arbeit beginnen können. Bitte beachten Sie, dass die Änderung weniger ins Gewicht fällt, wenn Ihr Projekt hauptsächlich aus TypeScript-Dateien oder anderen Dateitypen besteht.
URL-Unterstützung in Importanweisungen
Um Remote-ES6-Module herunterzuladen, können Sie ab v2021.3 in ES6-Dateien einen Quick-Fix auf den Importpfad anwenden. Das Modul wird mit allen Abhängigkeiten heruntergeladen und als Projektbibliothek verknüpft. Dies funktioniert genauso wie im Browser. Um die Funktion auszuprobieren, legen Sie die Einfügemarke auf den Importpfad, drücken Sie ⌥⏎ / Alt+Enter und wählen Sie Download module.
Refactoring-Unterstützung für private Klassenmember nach ES2022
WebStorm unterstützt private Felder bereits seit 2018. Diese Unterstützung basierte jedoch auf dem alten TC39-Proposal, von dem der Standard seitdem abgewichen ist. Um dem Standard zu entsprechen, haben wir die bestehende Unterstützung von Grund auf überarbeitet, und WebStorm 2021.3 unterstützt jetzt private Klassenmember gemäß ES2022. Wenn Sie Feldern, Eigenschaftszugriffen oder Methoden private Namen geben, die mit # beginnen, sollte alles wie erwartet funktionieren. So funktioniert beispielsweise das Rename-Refactoring in v2021.3:
Neue Intentions für die Codestrukturierung
Zwei neue Intentions helfen Ihnen beim Strukturieren Ihres Codes in WebStorm 2021.3.
Sie können jetzt mit minimalem Aufwand eine kommagetrennte Liste von Elementen auf mehrere Zeilen aufteilen oder in eine Zeile bringen. Die neue Intention funktioniert für Array- und Objektliterale, Parameter- und Argumentlisten, XML-, HTML- und JSX-Attribute und weitere ähnliche Elemente.
Um die Intention auszuprobieren, legen Sie die Einfügemarke auf die Liste, die Sie neu strukturieren möchten und drücken Sie ⌥⏎ / Alt+Enter. Wählen Sie dann Put comma-separated elements on one line bzw. Put comma-separated elements on multiple lines aus. Bei XML, HTML und JSX sind diese Aktionen etwas anders formuliert: Put attributes on separate lines bzw. Put attributes on one line.
Die zweite neue Intention bezieht sich auf JSDoc-Kommentare. WebStorm hilft Ihnen jetzt, ein- oder mehrzeilige Kommentare mit einem Klick durch JSDoc-Kommentare zu ersetzen. Auf die verfügbaren Kontextaktionen können Sie wie gewohnt mit ⌥⏎ / Alt+Enter zugreifen.
Bessere Zuordnung zwischen .js- und .d.ts-Dateien
Eine weitere Verbesserung in dieser Version betrifft .js– und .d.ts-Dateien. Wir haben die Zuordnung zwischen diesen beiden Dateitypen verbessert und durch Randleistensymbole die Navigation zwischen ihnen vereinfacht. Weitere Details zu den Änderungen finden Sie in diesem Blogbeitrag.
Frameworks und Technologien
Neue Inspektion zum Aktualisieren von Abhängigkeiten
Im Lauf der Jahre haben wir verschiedene Funktionen hinzugefügt, um Ihnen zu helfen, Pakete aus der package.json-Datei hinzuzufügen und zu aktualisieren und relevante Informationen zu diesen Paketen abzurufen. In dieser Version haben wir einige Änderungen vorgenommen, die Ihnen die Verwaltung von Projektabhängigkeiten weiter erleichtern.
Sie können jetzt npm-Pakete direkt im Editor auf die neueste Version aktualisieren. Öffnen Sie die Datei package.json, legen Sie die Einfügemarke auf die Paketversion, die Sie aktualisieren möchten, drücken Sie ⌥⏎ / Alt+Enter und wählen Sie dann Update ‘Paketname’ to the latest version. Wenn Sie mit der Maus über die Paketversion fahren, wird außerdem ein Quick-Fix angezeigt.
Standardmäßig bietet die neue Inspektion nur einen Quick-Fix, ohne veraltete Pakete in irgendeiner Weise hervorzuheben. Wenn Sie sich deutliche Hinweise wünschen, können Sie die Severity-Stufe der Inspektion unter Preferences / Settings | Editor | Inspections ändern – suchen Sie nach dem Eintrag Update package.json dependencies.
Bisher konnten Sie in WebStorm Ihre Pakete im entsprechenden Abschnitt unter Preferences / Settings | Languages und Frameworks | Node.js and NPM verwalten. Da diese Art der Paketverwaltung kaum genutzt wurde, haben wir uns entschieden, diesen Abschnitt zu entfernen und mit der oben beschriebenen neuen Inspektion eine einfachere Methode für diese Aufgabe einzuführen.
Zu guter Letzt haben wir unter Preferences / Settings den Abschnitt Node.js and NPM in Node.js umbenannt, um Verwirrung zu vermeiden. Wie zuvor können Sie dort einen Node-Interpreter und den Paketmanager Ihrer Wahl auswählen: npm, pnpm oder Yarn.
Überarbeitete Deno-Integration
Letztes Jahr haben wir Unterstützung für Deno in WebStorm eingeführt. Diese Unterstützung basierte auf der Integration von WebStorm mit dem TypeScript-Service sowie auf dem Plugin typescript-deno. Diese Implementierung hatte mehrere Nachteile und funktionierte in letzter Zeit nicht zuverlässig. Aus diesem Grund haben wir die Unterstützung komplett überarbeitet und auf Deno LSP umgestellt. Wir haben auch eine Reihe bekannter Probleme behoben. Mehr zu den wichtigsten diesbezüglichen Änderungen erfahren Sie hier.
Weitere Informationen zum Arbeiten mit Deno finden Sie in diesem Blogbeitrag. Dieser enthält bereits Informationen zu den jüngsten Änderungen.
Unterstützung für Angular 13
Eine der dringendsten Herausforderungen, die wir in dieser Version gelöst haben, ist die Unterstützung für Angular 13. Änderungen am Angular Package Format hatten dazu geführt, dass die Unterstützung nicht funktionierte. WebStorm 2021.3 berücksichtigt diese Änderungen und unterstützt die neue Angular-Version.
Verbesserte HTML-Completion
Wir haben die Funktionsweise der HTML-Completion verbessert. Wenn Sie jetzt im Editor einen Tag-Namen oder eine Abkürzung eingeben oder die Code-Completion explizit aufrufen, zeigt WebStorm sofort relevante Vorschläge an. Bisher wurden die Vorschläge nur angezeigt, nachdem Sie das <-Zeichen eingegeben haben. Wir haben erkannt, dass dies für diejenigen unter Ihnen, die nicht an die Eingabe von < und > gewöhnt sind oder Emmet nicht kennen, nicht sehr angenehm war.
Außerdem sollte die Code-Completion für Zeichenentitäten jetzt besser funktionieren.
Typprüfung für Vue- und React-Eigenschaften
Zwischen den Releases 2021.2 und 2021.3 haben wir eine Reihe lang erwarteter Fixes für Vue umgesetzt, darunter die Unterstützung für script setup. In dieser Version haben wir eine weitere nützliche Verbesserung eingeführt: WebStorm 2021.3 unterstützt die TypeScript-Typprüfung in Vue-Vorlagen. Die IDE warnt Sie, wenn in einem Ausdruck, der an eine Eigenschaft gebunden ist, der falsche Typ verwendet wird.
Dies funktioniert auch bei React-Attributen.
Neue Funktionen im HTTP-Client
In dieser Version haben wir den integrierten HTTP-Client von WebStorm erheblich verbessert. Wir haben viele neue Funktionen hinzugefügt: Der Client unterstützt jetzt binäre Antworten, die Ausgabeumleitung in eine benutzerdefinierte Datei oder ein benutzerdefiniertes Verzeichnis, Text- und JSON-Streams sowie HTTP-Anfrage-IDs.
Lesen Sie diesen Blogbeitrag, um einen genaueren Überblick über die Neuerungen zu erhalten.
Remote-Entwicklung
Remote-Ausführung von WebStorm
Dies ist eines der größten und am sehnlichsten erwarteten Updates in dieser Version: WebStorm unterstützt jetzt Remote-Entwicklungsworkflows! Sie können eine Verbindung zu einem Remote-Rechner herstellen, auf dem ein IDE-Backend ausgeführt wird. Das Projekt auf dem Remote-System kann genauso einfach bearbeitet werden, als würde es sich auf Ihrem lokalen System befinden. Wir hoffen, Ihnen mit dieser Neuerung noch mehr Produktivität und Flexibilität zu bieten und gleichzeitig ein sicheres Arbeiten zu ermöglichen, ganz unabhängig davon, wo Sie sich gerade befinden.
Die Unterstützung für Remote-Entwicklungsworkflows wird durch unsere neue Anwendung JetBrains Gateway bereitgestellt. Diese ermöglicht den Zugriff auf alle Ihre Remote-Backends, ohne dass Sie eine IDE auf Ihrem lokalen Computer installieren müssen. Sie können die neueste Version von JetBrains Gateway von unserer Website herunterladen. Danach werden Sie von diesem Bildschirm begrüßt:
Weitere Informationen zum Einstieg finden Sie in der Dokumentation.
Bitte beachten Sie, dass sich die Remote-Entwicklung noch in der Betaphase befindet und weiterhin aktiv verbessert wird. Bitte probieren Sie die neue Funktionalität aus und teilen Sie uns Ihre Meinung mit. Sie können uns Ihr Feedback oder Ihre Fehlermeldungen hier zukommen lassen.
Entwicklung mit einem remote installierten Node.js
In dieser Version haben wir einige wichtige Verbesserungen eingeführt, um eine Docker-Installation von Node.js zu unterstützen, die von den WebStorm-Integrationen mit JavaScript-Tools verwendet wird. Sie können jetzt Remote-Node.js-Interpreter mit ESLint, Mocha, Jest, npm, pnpm und yarn verwenden.
Die Unterstützung von Remote-Node.js-Interpretern war für ESLint bereits seit v2021.2 als experimentelle Funktion verfügbar. Ab sofort ist sie standardmäßig aktiviert.
Um die neue Funktion auszuprobieren, fügen Sie zunächst einen Remote-Node.js-Interpreter hinzu: Öffnen Sie unter Preferences / Settings | Languages & Frameworks | Node.js die Dropdown-Liste des Feldes Node interpreter und klicken Sie auf Add. Wählen Sie dann Add Remote… und geben Sie im angezeigten Dialogfeld eines der vorhandenen Docker-Images an.
Gehen Sie dann zu Preferences / Settings zurück und stellen Sie sicher, dass im Feld Package manager der richtige Pfad zum Installationsordner eines Paketmanagers in Ihrem Docker-Image angegeben ist.
Anschließend können Sie zum Editor zurückkehren und mit Node.js und Ihrem Paketmanager die Projektabhängigkeiten in Docker installieren. Ab diesem Punkt sollten Sie genauso weiterarbeiten können, als ob Node.js lokal installiert wäre. Wenn Sie beispielsweise eine JavaScript-Datei mit ESLint analysieren möchten, öffnen Sie diese Datei im Editor. Die Fehler sollten automatisch hervorgehoben werden.
Wir haben außerdem die Unterstützung von Remote-Node.js-Interpretern auf Mocha-, Jest-, npm-, pnpm- und yarn-Skripte erweitert. Unter den folgenden Links finden Sie Anweisungen für jede der unterstützten Technologien:
Proxy-Unterstützung für SSH-Verbindungen
Sie können jetzt in Preferences / Settings | Tools | SSH Configurations unter SSH configuration einen HTTP- oder SOCKS-Proxyserver angeben.
Im neuen Abschnitt HTTP/SOCKS Proxy können Sie den Proxy-Typ auswählen, einen Hostnamen und einen Port festlegen und bei Bedarf Anmeldenamen und Passwort für die Authentifizierung angeben.
Sie haben auch die Möglichkeit, Ihre SSH-Proxy-Einstellungen mit den globalen IDE-Einstellungen zu synchronisieren. Aktivieren Sie dazu das Kontrollkästchen Use global IDE proxy settings.
Docker
Einfacherer Verbindungsaufbau
Sie können jetzt einfacher eine Verbindung zu Docker herstellen. Klicken Sie einfach auf den entsprechenden Knoten oder verwenden Sie die neue Tastenkombination ⌘⏎ auf macOS bzw. Strg+Enter auf Windows und Linux. Auch Aktion Start container ist über dieses Tastenkürzel zugänglich.
Neue Aktion Clean up
Die neue Aktion Clean up hat die gleiche Wirkung wie der Terminalbefehl prune. Wenn Sie auf die Knoten Networks, Volumes, Containers oder Images rechtsklicken und Clean up auswählen, löscht die IDE nicht verwendete Objekte. Sie können diese Aktion auch auf den Docker-Stammknoten anwenden, um alle nicht benötigten Objekte mit einem Klick zu entfernen.
Docker-Verbindung aus Minikube
Sie können jetzt ganz einfach aus Minikube eine Verbindung zu einem Docker-Daemon herstellen. Aktivieren Sie dazu unter Preferences / Settings | Build, Execution, Deployment die Optionsschaltfläche Minikube. Im Feld daneben zeigt die IDE automatisch die docker-daemon-Umgebungen des erkannten Minikube an, zu denen Sie eine Verbindung herstellen können.
Unterstützung für Compose V2
WebStorm unterstützt Compose V2. Dadurch können Sie Docker-Compose-Befehle als docker compose statt docker-compose (mit Bindestrich) ausführen.
Um diese Option einzuschalten, aktivieren Sie unter Preferences / Settings | Build, Execution, Deployment | Docker | Tools das Kontrollkästchen Use Compose V2.
Image-Ebenen
Image-Ebenen ermöglichen die Nachverfolgung aller Befehle, die auf Images angewendet werden. Um auf sie zuzugreifen, wählen Sie ein Image aus und gehen Sie zum Tab Layers. Wenn Sie dort einen Befehl auswählen, können Sie rechts auf den Link Analyze image for more information klicken, um detaillierte Informationen zu den Änderungen zu erhalten, die auf die einzelnen Ebenen angewendet wurden.
Container als Image speichern
Wenn Sie einen vorkonfigurierten Container später verwenden möchten, können Sie ihn als Image speichern. Klicken Sie dazu im Services-Toolfenster mit der rechten Maustaste auf den Container und wählen Sie Image | Save as a new Image.
Podman-Unterstützung
WebStorm unterstützt jetzt Podman als alternative Verwaltungsmethode für Pods, Container und Images. Bevor Sie Podman in der IDE verwenden, sollten Sie eine Verbindung konfigurieren.
Sobald Podman in Ihrem Betriebssystem installiert und konfiguriert wurde, können Sie über Preferences / Settings | Build, Execution, Deployment | Docker eine Verbindung herstellen, indem Sie die Optionsschaltfläche TCP socket auswählen und die erforderlichen Felder ausfüllen.
Benutzererfahrung
Teilbares Run-Toolfenster
Sie führen mehrere Konfigurationen parallel aus und möchten die Ergebnisse gleichzeitig sehen? Teilen Sie das Run-Toolfenster horizontal oder vertikal! Ziehen Sie dazu den gewünschten Tab in den markierten Bereich und legen Sie ihn dort ab. Um die Teilung aufzuheben, ziehen Sie den Tab auf die Tableiste zurück oder klicken mit der rechten Maustaste auf den oberen Fensterbereich und wählen im Kontextmenü den Eintrag Unsplit aus.
Neues Bookmarks-Toolfenster
Bisher hatten wir in WebStorm zwei sehr ähnliche Fenster – Favorites und Bookmarks. Da der Unterschied zwischen den beiden manchmal nicht ganz klar war, haben wir uns entschieden, nur eines zu behalten: Bookmarks. Wir haben den Workflow für diese Funktionalität überarbeitet und ein neues Toolfenster dafür erstellt.
Von nun an werden alle Dateien, Ordner und Klassen, die Sie mit F3 (macOS) oder F11 (Windows/Linux) als wichtig markieren, im neuen Bookmarks-Toolfenster angezeigt.
Wenn Sie ein Lesezeichen hinzufügen, sortiert WebStorm es unter dem Knoten ein, der den Namen Ihres Projekts trägt. Die IDE erstellt diesen Knoten vorher automatisch und speichert dort standardmäßig alle Ihre als wichtig markierten Elemente. Neue Lesezeichen werden am Anfang der Liste unter diesem Knoten hinzugefügt. Sie können sie jedoch manuell anordnen, indem Sie sie in neue Listen ziehen, die Sie frei benennen können.
Quellcode-Vorschau für Verwendungen
Die Funktion Show Usages hat in dieser Version eine kleine, aber praktische Verbesserung erfahren. Wenn Sie die Verwendungen eines Symbols aufgerufen haben, indem Sie ⌥⌘F7 / Strg+Alt+F7 gedrückt oder mit gedrückter ⌘/Strg-Taste auf die Definition geklickt haben, können Sie jetzt die Quellcode-Vorschau für eine Verwendung aktivieren, indem Sie auf das quadratische Symbol klicken.
ML-basierte Suche nach Aktionen in Search Everywhere
Bei der Suche nach Aktionen in Search Everywhere wird WebStorm jetzt standardmäßig durch Machine Learning unterstützt. Wir haben eine ML-basierte Formel trainiert, die Folgendes berücksichtigt:
- Ihr persönlicher Aktionsverlauf.
- Aktionshäufigkeiten unseres gesamten Nutzerbestands.
- Länge der Suchanfrage, Name der Aktion usw.
Wir hoffen, dass Sie durch die ML-basierten Modelle bessere Suchergebnisse erhalten, die auf Ihre individuellen Bedürfnisse abgestimmt sind.
Terminal-Verbesserungen
Das WebStorm-Terminal unterstützt jetzt die neue ConPTY-API unter Windows. Durch dieses neue Terminal-Backend lösen wir mehrere Probleme, die von der alten, auf winpty basierenden Implementierung verursacht wurden. Außerdem werden jetzt 24-Bit-Farben unterstützt.
Außerdem nimmt die neue Type-Ahead-Unterstützung Textänderungen vorweg und zeigt sie sofort hellgrau an. Dadurch können Sie im Terminal ohne Verzögerung tippen, egal ob es sich um ein lokales oder entferntes System handelt.
Auswertung von Ausdrücken im Debugger
In dieser Version haben wir die Auffindbarkeit der Funktion Evaluate Expression verbessert, denn früher wurden oft Überwachungen verwendet, wo es auch die einfachere Evaluate-Funktion getan hätte.
Das Evaluate-Feld ist jetzt direkt im Debug-Toolfenster zugänglich, um die praktischste Methode zum Auswerten von Ausdrücken stärker ins Blickfeld zu rücken.
Integriertes Tool für die Fehlerbehebung
WebStorm 2021.3 bietet eine neue, schnellere Möglichkeit zur Diagnose und Behebung von Problemen, die die Funktionsfähigkeit Ihrer IDE beeinträchtigen. Wenn Sie Probleme mit WebStorm haben, rufen Sie im File-Menü die neue Aktion Repair IDE… auf. Diese führt Sie durch eine Reihe von Schritten, die verschiedene häufige Probleme beheben.
Updates für die Barrierefreiheit
Wir haben einige Probleme mit der Barrierefreiheit behoben, um die Arbeit im Bildschirmleser-Modus komfortabler zu gestalten. Das Toolfenster-Widget-Popup und das Kurzdoku-Popup, die bisher beim Überfahren mit dem Mauszeiger erschienen, wurden deaktiviert.
Wir haben auch ein Problem beim Aufrufen des Popups Go to Declaration or Usages behoben.
Auch unter macOS wurde die Barrierefreiheit verbessert. Wir haben mehrere Probleme mit dem Voiceover-Fokus gelöst, und Projekte können jetzt mithilfe eines Screenreaders erstellt werden. Um Ablenkungen beim Programmieren zu minimieren, haben wir die Anzahl der Hilfe-Tooltips verringert, auf die mit einem Ton hingewiesen wird.
Schriftgrößenanpassung für alle Tabs
Wussten Sie, dass Sie die Schriftgröße im Editor mit dem Mausrad ändern können? Bisher wirkte sich diese Funktion nur auf die aktuelle Datei aus. Jetzt können Sie die Schriftgröße für alle geöffneten Dateien ändern. Öffnen Sie Preferences / Settings | Editor | General, aktivieren Sie Change font size with Command / Ctrl + Mouse Wheel in und wählen Sie die Option All editors.
Versionsverwaltung
VCS-Einstellungen mit neuer Struktur
Damit Sie Ihre Versionsverwaltung schneller konfigurieren können, haben wir die VCS-Einstellungen besser auffindbar und übersichtlicher gestaltet. Hier sind einige der Änderungen, die Sie unter Preferences / Settings | Version Control finden können.
Der Knoten Version Control enthält jetzt alle verfügbaren Einstellungen. Klicken Sie auf die Einstellungen, um zu ihnen zu navigieren.
Wir haben das Layout des Git-Knotens verbessert. Die Einstellungen wurden in Abschnitte unterteilt, die den wichtigsten Abläufen entsprechen: Commit, Push und Update. Außerdem sind die Parameter in diesen Abschnitten jetzt sinnvoller strukturiert.
Wir haben außerdem mit Directory mappings einen separaten Knoten für Verzeichniszuordnungen hinzugefügt, und die Hintergrundoperationen sind jetzt standardmäßig aktiviert. Der Knoten Background ist nicht mehr vorhanden.
Neue Aktion Push All up to Here
Manchmal kann es passieren, dass Sie mehrere veröffentlichungsreife Commits haben, während andere noch in Bearbeitung sind. In solchen Fällen möchten Sie vielleicht nur Commits pushen, von deren Qualität Sie überzeugt sind. Ab dieser Version von WebStorm haben Sie die Möglichkeit, einen Commit im Log-Tab des Git-Toolfensters auszuwählen und nur die Commits bis zu diesem ausgewählten Commit zu pushen. Um diese Funktion zu verwenden, wählen Sie den benötigten Commit aus, öffnen Sie mit einem Rechtsklick das Kontextmenü und wählen Sie die Aktion Push All up to Here aus.
Checkout and Rebase onto Current für Remote-Branches
Mit der Aktion Checkout und Rebase onto Current können Sie den ausgewählten Branch auschecken und ein Rebasing auf dem aktuell ausgecheckten Branch durchführen. Bisher war diese Aktion nur für lokale Branches verfügbar. Ab v2021.3 können Sie diese Aktion auch auf Remote-Branches anwenden.
Neues Changes-Toolfenster
Bisher zeigte WebStorm den Unterschied zwischen Commits in einem separaten Dialog an. Ab dieser Version zeigt die IDE diese Informationen in einem neuen Changes-Toolfenster an. Um das neue Toolfenster zu öffnen, klicken Sie auf dem Log-Tab Ihrer Versionsverwaltung mit der rechten Maustaste auf eine Revision und wählen Sie im Kontextmenü den Eintrag Compare with Local aus.
Hervorgehobene Änderungen ausrichten
In den Einstellungen der Diff-Anzeige, die über das Zahnradsymbol zugänglich sind, haben wir die neue Option Align Changes Highlighting hinzugefügt. Diese Funktion verbessert die Lesbarkeit des Diffs insbesondere bei komplexen Änderungen, da die unveränderten Zeilen so ausgerichtet werden, dass sie nebeneinander angezeigt werden. Auf diese Weise lassen sich hinzugefügte oder entfernte Codeabschnitte klarer erkennen.
Dies waren nur die wichtigsten Highlights! Die vollständige Liste der neuen Funktionen und Verbesserungen in WebStorm 2021.3 finden Sie in den Versionshinweisen. Bitte teilen Sie uns Ihr Feedback mit und melden Sie eventuelle Probleme in unserem Issue-Tracker.
Ihr WebStorm-Team
Autorin des Original-Blogposts: