Codeformatierung: Prettier 2.0 möchte JavaScript-Code verschönern

Inhaltsverzeichnis

Das Team hinter Prettier hat das Werkzeug zur Codeformatierung in der nun veröffentlichten Version 2.0 "2020" rundum erneuert. Zu den nennenswerten Neuerungen gehören angepasste Standardwerte und ein verbessertes Kommandozeilentool. Das aktuelle Release arbeitet nicht mehr mit Node.js vor Version 10 zusammen, da der Wartungsaufwand zu hoch und für Entwickler zur Hürde geworden sei. Außerdem setzt es auf eine veränderte Heuristik.

Mit Prettier erschien für JavaScript 2017 ein npm-Modul, das beim Speichern den Code automatisch formatiert. Teams soll das den Vorteil bieten, sich nicht auf einen gemeinsamen Stil einigen zu müssen, wie Golo Roden in seinem Blog auf heise Developer beim Erscheinen der ersten Version ausführte. Gemeinsam mit einem Editor-Plug-in und ESLint erhalten Entwicklerteams mit Prettier für JavaScript eine Anwendung zur standardisierten Codeformatierung, die sich nahtlos in den Workflow integriert und sehr nah an go fmt aus der Programmiersprache Go heranreiche.

Änderung beim Aufbrechen der Methodenkette

Die neue Heuristik basiert auf der Komplexität der Aufrufargumente in der Kette. Nur, wenn verkettete Methodenaufrufe Argumente haben, die nicht auf Anhieb verständlich sind wie Funktionen oder tief verschachtelte Objekte, wird die Kette unterbrochen, andernfalls dürfen Argumente in einer Zeile bleiben. In der Vorgängerversion wurden Methodenkettenaufrufe automatisch in mehrere Zeilen aufgeteilt.

// Prettier 1.19
if (
  foo
    .one()
    .two()
    .three() ===
  bar
    .four()
    .five()
    .six()
) {
  // ...
}

// Prettier 2.0
if (foo.one().two().three() === bar.four().five().six()) {
  // ...
}

Neue Befehlskette im CLI

Das Kommandozeilentool versucht in der neuen Version Globs zunächst als wörtlichen Dateinamen aufzulösen. Hintergrund ist, dass unter Linux andere Zeichen in Dateinamen erlaubt sind als unter Windows. Bislang musste das Modul außerhalb von Linux deshalb Dateinamen mit Sonderzeichen formatieren und dafür eine Escaping-Syntax verwenden. Durch die neue Priorisierung sollen nun wichtige Anwendungsfälle nicht mehr unterbrochen werden.

Verzeichnisse lassen sich in Prettier 2.0 einfacher erweitern: Der Befehl prettier --write . formatiert alle unterstützten Dateien im aktuellen Verzeichnis und dessen Unterverzeichnissen. Verzeichnisnamen lassen sich mit Dateinamen und Globs mischen wie in prettier src "test/*.spec.js" foo.js.

Die Reihenfolge der Verarbeitung entspricht in Version 2.0 den angegebenen Pfaden und sortiert sie nicht mehr wie in Version 1.x alphabetisch vor. Bei der Kommunikation von Fehlern arbeitet Prettier zudem deutlicher und gibt Fehler auch für einzelne Muster aus.

Breaking Changes zugunsten des Workflow

Einige Änderungen führen zu Inkompatibilitäten. Diese Breaking Changes sollen vor allem den Workflow mit Prettier verbessern. Bei den geänderten Standardwerten gilt: es5 ersetzt trailingComma, always ersetzt arrowParens, lf ersetzt endOfLine als Default. Entwickler, die das alte Verhalten bevorzugen, können es mit { "trailingComma": "none" } beibehalten. Seitens des Prettier-Teams ist laut Blogpost geplant, die Standardeinstellung künftig auf always zu verändern.

Bislang hatte Prettier standardmäßig die abschließenden Kommas (Trailing Commas) vermieden, um es mit älteren Entwicklungsumgebungen kompatibel zu halten. In Version 2.0 wird der Standardwert zu es5 anstelle von none.

Klammern zu Pfeilen

Prettier hatte seit Version 1.9 eine Option, die Parameter von Pfeilfunktionen stets in Klammern zu setzen. Dieses Verhalten ist in Version 2.0 zur Standardeinstellung geworden. Entwicklern wird dadurch eine konsistentere Klammersetzung geboten. Es soll aber auch weiterhin möglich sein, das alte Verhalten beizubehalten, indem man Prettier mit { "arrowParens": "avoid" } konfiguriert.

Die neue Standardeinstellung für die Konfiguration von Zeilenenden soll sicherstellen, dass das komplette Projekt-Respository korrekt konfiguriert ist. Das alte Verhalten sah vor, dass alle Zeilenenden einer Datei nach dem Muster des ersten Zeilenendes formatiert sind. In der Praxis führte das bei Dateien mit gemischten Zeilenenden zu Inkonsistenzen. Der neue Standardwert lf behebt dieses Problem, und alternativ lässt sich das alte Verhalten über { "endOfLine": "auto" } aktivieren.

// Input
const fn = (x) => y => x + y;

// Prettier 1.19
const fn = x => y => x + y;

// Prettier 2.0
const fn = (x) => (y) => x + y;

Details zu diesen und allen weiteren Änderungen stehen im Blogpost des Projekts. Prettier 2.0 ist auf GitHub verfügbar. (sih)