Das ist neu in WebStorm 2021.2

Sie haben uns darum gebeten, die Live-Edit-Funktion zu verbessern – und das haben wir getan! WebStorm kann jetzt die im Browser angezeigten Seiten automatisch aktualisieren, während Sie Ihre HTML-, CSS- oder JavaScript-Dateien bearbeiten und speichern. Um diese Funktion zu nutzen, öffnen Sie eine HTML-Datei im Editor, fahren Sie mit der Maus darüber und klicken Sie auf das Symbol für den Browser, den Sie verwenden möchten – alle Browser werden unterstützt.

Sie möchten beim Speichern bestimmte Aktionen ausführen? WebStorm 2021.2 bietet jetzt eine leicht nutzbare Unterstützung für diesen Workflow! Wir haben alle bestehenden Funktionen überarbeitet, an einem Ort gesammelt und um einige neue Optionen erweitert, darunter die Möglichkeit, den Code beim Speichern neu zu formatieren und Importe zu optimieren.

Wussten Sie, dass WebStorm fehlende Importanweisungen hinzufügen kann, wenn Sie ES6-Symbole vervollständigen? Dasselbe ist jetzt auch für CommonJS-Module möglich: require-Importe können im Zuge der Code-Completion eingefügt werden.

WebStorm bietet jetzt in .js-Dateien eine korrekte Unterstützung für die Verwendung der TypeScript-Syntax in JSDoc-Kommentaren. Wir haben die bestehende Unterstützung überarbeitet und erweitert und viele bekannte Probleme behoben.

Sie möchten schnell eine Pfeilfunktion zu Ihrem Code hinzufügen? Mit der Tastenkombination Strg+Alt+J können Sie jetzt einen Codeblock mit einer Pfeilfunktion umgeben. Sie können auch arf eingeben und mit Tab die Vorlage erweitern, um eine leere Pfeilfunktion hinzuzufügen.

Der Vorschau-Tab, der früher nur in der Projektansicht funktionierte, steht jetzt auch beim Debuggen Ihrer App zur Verfügung. Um die Funktion einzuschalten, aktivieren Sie das Kontrollkästchen Enable preview tab unter Preferences / Settings | Editor | General | Editor Tabs. Dadurch vermeiden Sie das Überladen des Editors mit zahlreichen Dateien, da WebStorm die Dateien nacheinander in demselben Tab öffnet.

Verschwenden Sie keine Zeit mehr damit, useState-Werte und -Funktionen einzeln zu refaktorieren – WebStorm kann die Umbenennung jetzt für Sie vornehmen! Legen Sie die Einfügemarke auf einen State-Wert und drücken Sie Umschalt+F6 oder wählen Sie im Rechtsklick-Kontextmenü die Option Refactor | Rename.

Neue Projektabhängigkeiten können jetzt noch einfacher zu package.json hinzugefügt werden, da die Code-Completion auch für private npm-Pakete funktioniert. Mit WebStorm können Sie Informationen zur neuesten Paketversion abrufen – genau wie bei öffentlichen Paketen.

Sie möchten Ihren Code vor einem Commit Tests unterziehen? Eine neue Option hilft Ihnen dabei. Klicken Sie auf das Zahnradsymbol im Commit-Toolfenster, wählen Sie Run Tests und wählen Sie die gewünschte Run-Konfiguration aus. WebStorm testet Ihre Dateien und warnt Sie bei Problemen.

Ab dieser Version können Sie WebStorm mit einer lückenlos lokalisierten Bedienoberfläche in Chinesisch, Koreanisch und Japanisch verwenden. Die Lokalisierungen sind als separate Sprachpaket-Plugins verfügbar, die unter Preferences / Settings | Plugins in WebStorm installiert werden können.

Toolfenster können jetzt einfacher angeordnet werden. Bewegen Sie den Mauszeiger auf den oberen Rand des Toolfensters, das Sie verschieben möchten, und ziehen Sie es an die gewünschte Stelle. Sie können auf diese Weise das Toolfenster auch vom WebStorm-Hauptfenster ablösen – ziehen Sie es dazu einfach über den Rand des IDE-Fensters hinaus.

Wussten Sie, dass Sie Ihren Projekten benutzerdefinierte Symbole zuweisen können? Wir haben diese Funktion weiter vereinfacht. Klicken Sie mit der rechten Maustaste auf ein Projekt auf dem WebStorm-Begrüßungsbildschirm, wählen Sie die Option Change Project Icon… und laden Sie die SVG-Datei hoch, die Sie diesem Projekt zuordnen möchten.

Ab sofort verpassen Sie keine wichtigen Produktupdates mehr, die von der Toolbox-App bereitgestellt werden. WebStorm informiert Sie, wenn eine neue Version bereitsteht, und bietet Ihnen die Möglichkeit, das Upgrade durchzuführen – Sie benötigen dazu nur die Toolbox-App in der Version 1.20.8804 oder höher.

Der Dialog Preferences / Settings enthält einen neuen Knoten mit erweiterten Einstellungen. Dort finden Sie einige neue Konfigurationsoptionen, darunter die Möglichkeit, im ablenkungsfreien Modus einen linken Rand festzulegen. Außerdem können Sie jetzt schneller zwischen kürzlich geöffneten Knoten hin und her springen – verwenden Sie dazu einfach die Pfeile in der rechten Ecke des Dialogs.