Das ist neu in WebStorm 2020.3

Wir haben den Begrüßungsbildschirm aktualisiert! Ab sofort können Sie dort nicht nur Projekte öffnen und erstellen, sondern auch häufige Einstellungen anpassen – zum Beispiel IDE-Designs und Schriftarten.

Sie können jetzt das WebStorm-Design sehr einfach mit Ihren macOS- und Windows-Einstellungen synchronisieren: Öffnen Sie Preferences / Settings | Appearance & Behavior | Appearance | Theme und wählen Sie die Option Sync with OS. Klicken Sie auf das Zahnradsymbol neben Sync with OS, um Ihr bevorzugtes Design auszuwählen. Die Implementierung dieser Funktion für Linux-Nutzer ist bereits in Planung.

In v2020.3 haben wir das Arbeiten mit Editor-Tabs komfortabler gemacht. Sie können jetzt den Editor in mehrere Fenster aufteilen, indem Sie Tabs ziehen und ablegen oder die neue Aktion Open in Right Split verwenden. Außerdem werden angeheftete Tabs mit einem speziellen Symbol markiert und an den Anfang der Tableiste verschoben, damit sie leichter zu finden sind.

Mit WebStorm können Sie jetzt Tailwind CSS produktiver nutzen! Tailwind-Klassen werden automatisch vervollständigt, beim Bewegen des Mauszeigers auf ein Element wird eine Vorschau des resultierenden CSS angezeigt, und auch Ihre Anpassungen in tailwind.config.js werden unterstützt.

Haben Sie eine unaufgelöste React-Komponente in Ihrem Code? Platzieren Sie die Einfügemarke darauf, drücken Sie Alt+Enter und wählen Sie Create class / function component von der Liste – WebStorm erstellt dann das entsprechende Codekonstrukt für Sie.

Mermaid.js-Unterstützung, Neuformatierung von .md-Dateien und synchronisiertes Scrollen von Vorschau- und Editorfenster – diese und andere Änderungen sorgen für eine erheblich angenehmere Erfahrung beim Bearbeiten von Markdown-Dateien in WebStorm.

Wir haben den TypeScript-Sprachdienst in das Problems-Toolfenster integriert und das separate TypeScript-Toolfenster entfernt. Durch diese Änderung wird es einfacher, Probleme in Ihrem Code an einem Ort zu überprüfen. Den Aktionen, die bisher im TypeScript-Toolfenster verfügbar waren, haben wir ein separates Widget in der Statusleiste spendiert.

Ab Version 2020.3 unterstützt WebStorm die Code-Formatierung von mehrzeiligen CSS- und HTML-Blöcken, die JavaScript enthalten. Die IDE sorgt für eine korrekte Einrückung, wenn Sie solche komplexen Template-Literale einfügen oder Ihren Code neu formatieren.

Beim Debuggen werden Sie jetzt durch interaktive Hinweise und Inline-Überwachungen unterstützt. Klicken Sie auf einen Hinweis, um alle Felder einer Variablen anzuzeigen. Außerdem können Sie direkt im Hinweis Variablenwerte ändern und Überwachungsausdrücke hinzufügen.

WebStorm 2020.3 unterstützt Code With Me (EAP), unser neues Tool für kollaborative Entwicklung und Paarprogrammierung. Mit diesem Tool können Sie ein Projekt für andere freigeben, um gemeinsam in Echtzeit daran zu arbeiten. Um Code With Me auszuprobieren, installieren Sie das entsprechende Plugin unter Preferences / Settings | Plugins.

Um Sie an die wichtigsten Funktionen von WebStorm heranzuführen, haben wir einen interaktiven Kurs entwickelt. Dieser stellt Ihnen einige häufig verwendete Konzepte vor – zum Beispiel das Refactoring oder die Navigation in Ihren Projekten. Sie finden den Kurs auf dem Tab Learn WebStorm des Begrüßungsbildschirms. Alternativ können Sie im Hauptmenü auf Help | IDE Features Trainer klicken.

Sie können jetzt eine HTTP-Anfrage im cURL-Format exportieren, indem Sie im HTTP-Anfrageeditor Alt+Enter drücken und die Option Convert to cURL und copy to clipboard auswählen.

Sie können jetzt Grammatik- und Rechtschreibprobleme schneller beheben. Wenn der Mauszeiger sich über einem Problem befindet, wird ein Popup mit einer Erklärung und einem Lösungsvorschlag angezeigt. Außerdem wurde die Liste der unterstützten Sprachen erweitert und die Grammatikprüfung verbessert.

Jetzt können Sie das Staging Ihrer Dateien direkt in WebStorm erledigen! Um diese Funktion zu aktivieren, öffnen Sie Preferences / Settings | Version Control | Git und wählen Sie die Option Enable staging area. Das Staging von Änderungen ist im Commit-Toolfenster, in der Randleiste sowie mit der Show Diff-Funktion möglich.

Mithilfe der Navigationsleiste, der schnellen Alternative zur Projektansicht, können Sie ganz einfach die Struktur Ihres Projekts durchgehen und bestimmte Dateien öffnen. Ab v2020.3 können Sie in Ihren JavaScript- und TypeScript-Dateien sogar zu konkreten Codeelementen springen.

Die IDE kann endlich im Editor eine Vorschau der Dateien anzeigen, die Sie in der Projektansicht ausgewählt haben. Um diese Funktion zu aktivieren, klicken Sie auf das Zahnradsymbol in der Projektansicht und aktivieren Sie die beiden Optionen Enable Preview Tab und Open Files with Single Click.

Das Shift+Shift-Popup bietet Ihnen jetzt noch mehr Möglichkeiten. Erstens können Sie es für einfache Rechenaufgaben verwenden – die Ergebnisse werden direkt im Popup angezeigt. Und zweitens können Sie nach Git-Daten suchen – einschließlich Details zu Branches und Commits. Außerdem werden jetzt alle Ergebnisse anhand ihrer Relevanz anstatt ihres Typs gruppiert.