Codeformatierung: Prettier 2.5 formatiert neue TypeScript-Syntax

Prettier 2.5 ist erschienen. Der Open-Source-Codeformatierer soll dazu dienen, Code automatisch und einheitlich zu formatieren und lässt sich mit verschiedenen Programmiersprachen und Editoren nutzen. Version 2.5 unterstützt TypeScript 4.5 sowie das Markdown-Format MDX in Version 2 und bringt Neuerungen für die Formatierung von JavaScript, HTML und mehr.

Syntax-Support für TypeScript 4.5

Version 2.5 erlaubt das Formatieren der kürzlich mit TypeScript 4.5 eingeführten neuen Syntax-Optionen. Dazu zählen type Modifier auf Import-Namen sowie das ECMAScript Proposal "Private Field Presence Checks", das überprüft, ob ein Objekt ein privates Feld besitzt:

// Example
class Foo {
  #prop1;
  method() {
    return #prop1 in this;
  }
}

Auch das ECMAScript Proposal "Import Assertions" zählt zu den neuen TypeScript-Features, die sich in Prettier formatieren lassen. Es soll sicherstellen, dass ein Import das erwartete Dateiformat aufweist. Daneben formatiert Prettier Dateien mit den Endungen .mts und .cts nun als TypeScript.

Zudem weist das Prettier-Team auf einen neuen Umgang mit Typendeklarationen hin, da der seit Version 2.3 genutzte Ansatz die Länge einer Type-Annotation ändern und dadurch zu Git-Konflikten führen konnte. Die aktuelle Änderung kann sich womöglich auf große Teile einer TypeScript-Codebasis auswirken.

Weitere Neuerungen

Die MDX-Version 2.0 brachte eine aktualisierte Kommentar-Syntax im JavaScript-Stil mit. Prettier 2.5 kann sowohl mit dieser neuen Kommentarform als auch mit der bisherigen im HTML-Stil umgehen, allerdings ist der Support der neuen Syntax auf einzeilige Kommentare beschränkt. Im Vergleich mit der Prettier-Vorversion sieht das aus wie folgt:

Input:
{/*A comment*/}

Prettier 2.4:
{/_A comment_/}

Prettier 2.5:
{/*A comment*/}

JavaScript-Code, den Prettier 2.4 im Rahmen des Strict Mode als fehlerhaft kennzeichnete, formatiert Prettier 2.5 ohne Fehlermeldung:

// Input
function foo() { var bar = 1; delete bar; }

// Prettier 2.4
SyntaxError: Deleting local variable in strict mode. (1:31)
> 1 | function foo() { var bar = 1; delete bar; }
    |                               ^

// Prettier 2.5
function foo() {
  var bar = 1;
  delete bar;
}

Das begründet das Prettier-Entwicklungsteam damit, dass das Überprüfen auf fehlerhaften JavaScript-Code bei Lintern, Compilern und der Laufzeit verbleiben solle.

Vielseitiger Einsatz mit Erweiterungsmöglichkeit

Das Codeformatierungs-Tool Prettier wurde 2017 ins Leben gerufen. Es ist mit verschiedenen Editoren kompatibel – darunter Visual Studio und Visual Studio Code, Emacs, Vim und JetBrains-IDEs wie WebStorm oder PHPStorm. Die von Prettier formatierbaren Programmiersprachen mit einem Fokus auf Webentwicklung umfassen JavaScript, TypeScript, Angular, Markdown, HTML und weitere, jedoch können Plug-ins den Support um zusätzliche Sprachen erweitern. Die Community hat unter anderem Plug-ins für Kotlin, Java und Go-Templates beigesteuert.

Prettier ist Open Source via npm ( npm install --save-dev --save-exact prettier) oder yarn ( yarn add --dev --exact prettier) verfügbar, zusätzlich bietet Prettier eine Enterprise-Version an. Auch bei der Verwendung per Editor-Integration empfiehlt das Prettier-Team eine lokale Installation, um die gleiche Version in allen Projekten sicherzustellen.

Weitere Informationen zu Prettier 2.5 bietet ein Blogeintrag.

(mai)