Codeformatierungstool Prettier 2.6 setzt Attribute auf Wunsch zeilenweise

Das Codeformatierungs-Werkzeug Prettier ist in Version 2.6 erschienen. Das Open-Source-Tool kennt im aktuellen Release eine neue Option zum Formatieren von Attributen in HTML, JSX und Vue. Außerdem arbeitet es mit einem weiteren JavaScript-Parser zusammen und bringt zahlreiche kleinere Ergänzungen für JavaScript mit.

Prettier dient dazu, Code nach festen Richtlinien zu formatieren. Es zielt von Haus aus unter anderem auf JavaScript, TypeScript, CSS, HTML, JSON sowie Markdown und verarbeitet den Code von Frameworks wie Vue, Angular und Ember. Über Plug-ins lassen sich weitere Programmiersprachen und Formate einbinden. Community-Plug-ins existieren unter anderem für Java, PHP, Ruby und XML.

Eine Option, eine Zeile

Dass Prettier strikte Vorgaben umsetzt, zeigt die englische Bezeichnung Opinionated Code Formatter, was sich nur holprig ins Deutsche übersetzen lässt – rechthaberisch trifft es vielleicht am besten. Das Tool hat bewusst nur wenige Optionen, aber einige Richtlinien lassen sich konfigurieren. Version 2.6 führt die Option singleAttributePerLine ein, die dafür sorgt, dass Prettier in HTML-Code jedes Attribut in eine eigene Zeile packt.

Die Richtlinie gilt ebenso für Attribute in Vue SFC Templates (Single File Component), einem Dateiformat des Vue-Frameworks, das auf eine HTML-ähnliche Syntax setzt, und für React JSX (JavaScript XML), das zum Schreiben von HTML-Code in React dient.

Folgendes Beispiel aus dem Prettier-Blog zeigt einmal die Umsetzung mit der deaktivierten und darunter mit der aktivierten Option singleAttributePerLine. Steht der Wert auf false entspricht die Ausgabe der von Prettier 2.5:

<!-- Input -->
<div data-a="1">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div data-a="1" data-b="2" data-c="3">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>

<!-- Prettier 2.6, with `{"singleAttributePerLine": false}` -->
<div data-a="1">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div data-a="1" data-b="2" data-c="3">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>

<!-- Prettier 2.6, with `{"singleAttributePerLine": true}` -->
<div data-a="1">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div
  data-a="1"
  data-b="2"
  data-c="3"
>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>

Der Pull Request für die Option existiert bereits seit 2019, und die Community hat die Neuerung ausführlich diskutiert. Mit der Option folgt das Team unter anderem den Stilvorgaben von Vue.

Daneben bringt das Release zahlreiche kleinere Anpassungen beim Formatieren von JavaScript mit. Für TypeScript kennt es zwar das aktuelle Release 4.6, das jedoch anders als TypeScript 4.5 keine Änderungen mitgebracht hat, die sich in der Formatierung widerspiegeln.

Nennenswert ist unter anderem die Einbindung des quelloffenen schlanken JavaScript-Parsers Acorn. Darüber hinaus gibt es Anpassungen und Bugfixes für Kommentare am Zeilenende: Prettier 2.6 lässt sie für if-Anweisungen ohne Block dort stehen, statt sie wie Version 2.5 in eine eigene Zeile zu setzen. Hinter continue- und break-Anweisungen erscheinen die Kommentare nun ebenfalls korrekt, nachdem die Vorversion sich daran verschluckt hatte:

// Input
for (;;) continue // comment
;

// Prettier 2.5
Error: Comment "comment" was not printed. Please report this error!

// Prettier 2.6
for (;;)
  continue; // comment

Weitere Bugfixes und Neuerungen wie den neuen Kommandozeilenparameter --no-plugin-search zum Deaktivieren des automatischen Ladens von Plug-ins lassen sich dem Prettier-Blog entnehmen. Der Sourcecode des Tools findet sich auf GitHub. Wer Prettier 2.6 ohne Installation ausprobieren möchte, kann die Online-Spielwiese besuchen.

(rme)