Codeformatierung: Prettier 2.3 formatiert Templates offiziell mit Handlebars

Das Team hinter dem Codeformatierungs-Tool Prettier hat Version 2.3 veröffentlicht. Neben zahlreichen Bugfixes umfasst das neue Release auch einige länger erwartete Verbesserungen – insbesondere beim Arbeiten mit JavaScript. Prettier hatte bisher unter anderem Probleme beim Umbrechen von Zeilen in Assignments gehabt, und der bereits 2017 eingeführte Support für Handlebars ist nun endlich nicht mehr nur experimentell, sondern für den Produktiveinsatz geeignet.

Im Zusammenspiel mit Glimmer

Als Template Engine soll Handlebars Prettier-Anwenderinnen und -Anwendern die Möglichkeit eröffnen, HTML-Templates in JavaScript-Funktionen zu kompilieren. Dabei greift Prettier auf Glimmer zurück, den Handlebars-Parser aus Ember. Die Funktion im Codeformatierungs-Tool heißt daher auch offiziell "Ember/Handlebars", da Glimmer einige Teile der Syntax und Anwendungsfälle von Handlebars nicht unterstützt.

Nach der nun erfolgten offiziellen Freigabe für den produktiven Einsatz lässt sich der Formatter auch mit der Option --html-whitespace-sensitivity nutzen, die standardmäßig auf strict voreingestellt ist. Um etwaige Auswirkungen auf das Rendering im Browser zu vermeiden, wird Prettier daher stets das Vorhandensein oder Fehlen von Leerstellen (Whitespaces) rund um Tags respektieren und es darüber hinaus als unsicher einstufen, vorhandene Leerstellen zu entfernen oder umgekehrt Leerstellen hinzuzufügen, wo zuvor keine waren. Den css-Wert unterstützt der Formatter hingegen noch nicht – dieser wird vorerst als strict behandelt.

Lange Zeilen in JavaScript-Assignments korrekt umzubrechen: Prettier tat sich damit bisher schwer, wie das Team anlässlich der Veröffentlichung von Version 2.3 offen eingesteht. Hiermit soll nun aber Schluss sein, wie der Vergleich mit dem Verhalten der Vorversion im folgenden Listing deutlich macht:

// Prettier 2.2
aParticularlyLongAndObnoxiousNameForIllustrativePurposes = anotherVeryLongNameForIllustrativePurposes;

aParticularlyLongAndObnoxiousNameForIllustrativePurposes = "a very long string for illustrative purposes"
  .length;

someReallyLongThingStoredInAMapWithAReallyBigName[
  pageletID
] = _someVariableThatWeAreCheckingForFalsiness
  ? Date.now() - _someVariableThatWeAreCheckingForFalsiness
  : 0;

class x {
  private readonly rawConfigFromFile$: BehaviorSubject<any> = new BehaviorSubject(
    notRead
  );
}

// Prettier 2.3
aParticularlyLongAndObnoxiousNameForIllustrativePurposes =
  anotherVeryLongNameForIllustrativePurposes;

aParticularlyLongAndObnoxiousNameForIllustrativePurposes =
  "a very long string for illustrative purposes".length;

someReallyLongThingStoredInAMapWithAReallyBigName[pageletID] =
  _someVariableThatWeAreCheckingForFalsiness
    ? Date.now() - _someVariableThatWeAreCheckingForFalsiness
    : 0;

class x {
  private readonly rawConfigFromFile$: BehaviorSubject<any> =
    new BehaviorSubject(notRead);
}

Auch das Problem der oft "unnatürlich" wirkenden Umbrüche nach kurzen Eigenschaftsnamen in Objektliteralen gilt als behoben. Prettier 2.3 vermeidet solche Zeilenumbrüche nach Eigenschaftsnamen, die kürzer als tabWidth + 3 sind – also beispielsweise fünf Zeichen in der Standardkonfiguration. Mit tabWidth: 4 lässt sich die Grenze auf sieben Zeichen erhöhen.

Weitere Details sowie ein umfassender Überblick auch aller über JavaScript hinausgehenden Neuerungen in Prettier 2.3 finden sich im Blogbeitrag zur Veröffentlichung der neuen Version. Das Projekt zum Codeformatierungs-Tool für JavaScript, TypeScript, Flow, JSX, JSON, CSS, SCSS, Less, HTML, Vue, Angular, GraphQL, Markdown und YAML ist auf GitHub verfügbar.

(map)