Entwicklungsumgebung: WebStorm 2020.3 bekommt Rückenwind für Stylesheets

Inhaltsverzeichnis

JetBrains hat Version 2020.3 der auf Webentwicklung ausgerichteten Entwicklungsumgebung WebStorm veröffentlicht. Das Release bietet Hilfen beim Zusammenspiel mit Tailwind CSS und kann Gerüste für React-Komponenten erstellen. Beim Debugging gibt die IDE Einblick in die Felder von Variablen.

Oberflächliche Anpassungen

Auf den ersten Blick fallen bei WebStorm 2020.3 einige Anpassungen an der Oberfläche auf. Der Editor lässt sich über die Aktion Open in Right Split oder das Ziehen und Ablegen eines Tabs in mehrere Fenster aufteilen. Angeheftete Tabs markiert die IDE mit einem speziellen Symbol und zeigt sie am Anfang der Tableiste.

Für das Erscheinungsbild bietet die Entwicklungsumgebung neben den eigenen Themes die Option, das Aussehen an die Einstellungen des Betriebssystems anzupassen. Die Synchronisation über die in Preferences / Settings | Appearance & Behavior | Appearance | Theme aufgeführte Checkbox Sync with OS funktioniert derzeit unter macOS und Windows, und die Umsetzung für Linux ist in Planung. Außerdem kommt die IDE mit einem neuen Begrüßungsbildschirm, der neben dem Öffnen von Projekten einige Grundeinstellungen – unter anderem für das Design und die Schriftarten – anzeigt.

Hilfen für Tailwind CSS, Markdown und React

Offensichtlich steht die in Version 2020.3 eingeführte Anbindung an das Cascading-Style-Sheets-Framework Tailwind CSS seit geraumer Zeit auf der Wunschliste der Nutzerinnen und Nutzer. WebStorm bietet nun Autovervollständigung für die Tailwind-Klassen hinter der @apply-Direktive. Die Vorschläge gelten auch für die Pseudo-Klassen-Varianten (Pseudo-Class Variants).

Sowohl beim Vervollständigen als auch beim Überfahren einer Klasse mit der Maus zeigt die IDE eine Vorschau des CSS-Codes, der sich aus der Klasse ergibt. Beim Bearbeiten berücksichtigt WebStorm die Konfigurationen in der tailwind.config.js-Datei.

Der Codestil für Markdown-Inhalte lässt sich über Preferences/Settings | Editor | Code Style | Markdown einstellen. Das Tastenkürzel Strg | Alt | L unter Linux und Windows beziehungsweise ⌘⌥L unter macOS formatiert den aktuellen Code entsprechend um. Im Zusammenspiel mit React kann WebStorm nun bei React-Komponenten, die im Code referenziert, aber nicht definiert sind, ein Gerüst für eine Klassen- oder Funktionskomponente erstellen.

Mehr Einblick beim Debuggen

Die Hints, die WebStorm beim interaktiven Debugging anzeigt, bieten nun einen Einblick in die Felder von Variablen. Entwicklerinnen und Entwickler können darüber die Werte ändern oder spezifische Watches einrichten.

Wer TypeScript-Anwendungen in WebStorm entwickelt, findet neuerdings Warnungen und ähnliche Meldungen in der zentralen Problem-View statt im Toolfenster für TypeScript. Letzteres hat JetBrains aus der IDE entfernt und die dort verankerten Buttons in einen eigenen Bereich in der Statusleiste integriert.

Weitere Neuerungen in WebStorm 2020.3 wie der Git-Staging-Bereich lassen sich dem Blogbeitrag zur Veröffentlichung entnehmen. JetBrains bietet alle IDEs in einem Abomodell an, bei dem der Preis innerhalb der ersten drei Jahre sinkt. WebStorm kostet im ersten Jahr für Einzelentwickler 59 Euro und für Firmen 129 Euro pro Entwicklerplatz. Ab dem dritten Jahr liegt der jährliche Preis bei 35 Euro beziehungsweise 77 Euro pro Nutzer. Anders als bei IntelliJ IDEA existiert für WebStorm keine kostenfreie Variante. Allerdings können unter anderem Betreiber von Open-Source-Projekten, Schüler, Studenten und Lehrer sowie Non-Profit-Organisationen eine kostenlose Variante der vollständigen JetBrains Toolbox beantragen.

(rme)