Webentwicklung: WebStorm 2020.2 hübscht Code mit Prettier auf

Neben einigen Ergänzungen für die Entwicklung mit Vue.js und Nuxt.js kann die Web-IDE neuerdings Prettier standardmäßig beim Umformatieren von Code verwenden.

In Pocket speichern vorlesen Druckansicht 2 Kommentare lesen
Sturm, Wolken

(Bild: StockSnap, gemeinfrei (Creative Commons CC0))

Lesezeit: 3 Min.
Von
  • Rainald Menge-Sonnentag

JetBrains eröffnet den turnusmäßigen Reigen der aktualisierten Entwicklungsumgebungen mit WebStorm 2020.2. Die auf Webentwicklung ausgerichtete IDE bringt vor allem Neuerungen für das Zusammenspiel mit den Frameworks Vue.js und Nuxt.js. Außerdem kann sie TypeScript- und JavaScript-Code standardmäßig mit Prettier umformatieren.

Das Open-Source-Formatierungswerkzeug Prettier, das im März in Version 2.0 erschienen ist, lässt sich bereits seit geraumer Zeit mit WebStorm verwenden. Neu ist die Option, es standardmäßig bei jedem Umformatieren statt des in die IDE integrierten Formatierungstools zu verwenden. Dazu findet sich in den Einstellungen unter Languages & Frameworks | JavaScript | Prettier neuerdings die Checkbox On code reformat.

Die Anbindung des JavaScript-Webframeworks Vue.js, dessen 3.0-Release bevorsteht, war bereits bei WebStorm 2019.3 im Fokus. Version 2020.2 der IDE bietet nun eine auf Vue.js zugeschnittene Formatierung zum Einrücken der Zeilen. In den Einstellungen können Entwickler unter Editor | Code Style | Vue festlegen, für welche Top-Level-Tags die Einrückungen zum Einsatz kommen. Außerdem können sie dort bestimmen, ob die Indentation für ganze Dateien oder sprachabhängig gelten sollen.

Wer das Webapplikations-Framework Nuxt.js verwendet, das auf Vue.js sowie Node.js, Babel.js und Webpack aufbaut, findet in WebStorm neuerdings einige Hilfsfunktionen, darunter einen Assistenten zum Ausfüllen von Templates. Außerdem können Nuxt-Entwickler direkt auf die Dokumentation der Kernkomponenten von Nuxt.js über die Quick Documentation zugreifen. Schließlich hilft die IDE beim Verwenden des Vuex Store in Nuxt-Projekten. Letzterer ist ein Containerobjekt zum Speichern des Zustands der Anwendung.

Für JavaScript und TypeScript bringt die IDE neue Optionen zum Umwandeln von Code mit. Die über Alt | Enter ausgelösten sogenannten Smart Intentions können unter anderem for-Schleifen, die mit numerischen Variablen den Index eines Arrays durchlaufen in foreach-Methoden umwandeln. Für das Optional Chaining und den Nullish Coalescing Operator, die beide in ECMAScript 2020 Einzug in den Sprachstandard gehalten haben, existieren ebenfalls Smart Intentions.

Zu den neuen Smart Intentions gehört eine Funktion zum Umwandeln von Schleifen zum Zugriff auf Array-Elemente.

(Bild: JetBrains)

Außerdem bietet WebStorm 2020.2 eine erweiterte Anbindung an GitHub: Entwickler können alle Pull Requests aus der IDE heraus betrachten und ihren Merge anstoßen. Die Liste der Pull Requests zeigt die Entwicklungsumgebung in einem separaten Fenster, und ein Doppelklick zeigt die zugehörigen Details an.

WebStorm 2020.2 zeigt Pull Requests in einem separaten Fenster an.

(Bild: JetBrains)

Weitere Neuerungen in der Entwicklungsumgebung wie die Vorschau von .webp-Bildern und das Rendern von JSDoc-Kommentaren lassen sich der offiziellen Ankündigung 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.

(rme)