Prettier 3.5 bringt zwei neue Optionen zur JavaScript-Codeformatierung

Das Open-Source-Tool Prettier hat Version 3.5 erreicht. Das Werkzeug zur Codeformatierung von JavaScript, TypeScript, JSX und mehr bringt ein experimentelles sowie ein stabiles Feature für JavaScript mit und kann nun mit TypeScript-Konfigurationsdateien umgehen.

Operatoren auf einen Blick

Eine experimentelle Option für JavaScript verbirgt sich hinter dem neuen Flag --experimental-operator-position <start|end>. Wenn Entwicklerinnen und Entwickler diese Option mit start nutzen, erscheinen binäre Operatoren zu Beginn einer Zeile. Das soll im Vergleich zum Standardverhalten – mit den Operatoren am Ende einer Zeile – für eine bessere Übersicht sorgen, wie das Codebeispiel des Prettier-Teams zeigt:

// Input
var a = Math.random() * (yRange * (1 - minVerticalFraction)) + minVerticalFraction * yRange - offset;

// `experimentalOperatorPosition: end` (default behavior)
var a =
  Math.random() * (yRange * (1 - minVerticalFraction)) +
  minVerticalFraction * yRange -
  offset;

// `experimentalOperatorPosition: start`
var a =
  Math.random() * (yRange * (1 - minVerticalFraction))
  + minVerticalFraction * yRange
  - offset;

Aus mehrzeilig wird einzeilig

Die zweite neue Option für die JavaScript-Formatierung lautet objectWrap. Wie das Entwicklungsteam ausführt, hat Prettier bisher ein semi-manuelles Formatieren von JavaScript-Objektliteralen vorgenommen und beim Vorhandensein einer neuen Zeile vor der ersten Property die Aufteilung von Objekten in mehrere Zeilen beibehalten, selbst wenn in einer Zeile ausreichend Platz vorhanden gewesen wäre.

Das bleibt weiterhin das Standardverhalten, doch durch --object-wrap=collapse können Developer sich für die einzeilige Variante entscheiden, wie das Prettier-Team im direkten Vergleich mit der Vorversion 3.4 zeigt:

// Input
const obj1 = {
  name1: "value1", name2: "value2",
};

const obj2 = { name1: "value1",
  name2: "value2",
};

// Prettier 3.4
const obj1 = {
  name1: "value1",
  name2: "value2",
};

const obj2 = { name1: "value1", name2: "value2" };

// Prettier 3.5 (with `--object-wrapping=collapse`)
const obj1 = { name1: "value1", name2: "value2" };

const obj2 = { name1: "value1", name2: "value2" };

Als eine weitere Neuerung kann Prettier nun mit TypeScript-Konfigurationsdateien umgehen, etwa prettier.config.ts. Dabei ist zu beachten, dass der TypeScript-Support in Node.js als experimentell gilt und hierfür Node.js in der Mindestversion 22.6.0 erforderlich ist. Updates gibt es außerdem unter anderem für Markdown, CSS, Vue und Angular.

Informationen zu allen Änderungen in Version 3.5 lassen sich dem Prettier-Blog entnehmen.

JavaScript-Konferenz von Heise: enterJS 2025

Die enterJS 2025 findet am 7. und 8. Mai in Mannheim statt. Die Konferenz bietet einen umfassenden Blick auf die JavaScript-gestützte Enterprise-Welt. Der Fokus liegt nicht nur auf den Programmiersprachen JavaScript und TypeScript selbst, sondern auch auf Frameworks und Tools, Accessibility, Praxisberichten, UI/UX und Security.

Tickets sind zum Frühbucherpreis im Online-Shop erhältlich..

Lesen Sie auch

IT-Gehaltsrechner: So schneiden Programmiersprachen in Deutschland ab

(mai)