Codeformatierungstool Prettier 3.0 bringt Breaking Changes für JavaScript

Das Prettier-Team hat Version 3.0 des quelloffenen Codeformatierungswerkzeugs vorgelegt. Prettier kann unter anderem mit JavaScript, TypeScript, JSX, Angular, HTML, CSS und Markdown umgehen – und für viele dieser Technologien bringt das Release Neuerungen mit. Abwärtsinkompatibel sind diese beispielsweise für JavaScript. Da das Entwicklungsteam die gesamte Codebasis von Prettier zu ECMAScript Modules migriert hat, erleichtere das dessen Arbeit. Beim Einsatz von Prettier als Library können Entwicklerinnen und Entwickler jedoch weiterhin CommonJS verwenden.

Als weitere bedeutende Neuerung hebt das Team hervor, dass Prettier nun mit Plug-ins umgehen kann, die unter Verwendung von ECMAScript Modules und Async Parsern erstellt wurden. Plug-in-Entwicklerinnen und -Entwickler sollten beim Updaten vorsichtig sein. Sie können den Migrationsguide für Plug-ins zurate ziehen.

Abwärtsinkompatible Änderungen für JavaScript

Prettier 3.0 setzt in JavaScript den Standardwert für trailingComma auf all, was einen abwärtsinkompatiblen Bruch zur Vorgängerversion 2.8 bedeutet. Seit Prettier 2.0 war der Standardwert es5. Die Änderung liegt darin begründet, dass der Internet Explorer 11 am 15. Juni 2022 aus dem Microsoft-Support gefallen ist und der letzte Browser war, der Trailing Commas in Funktionsaufrufen nicht zuließ. Wer das frühere Verhalten verwenden möchte, kann Prettier entsprechend konfigurieren: { "trailingComma": "es5" }.

Eine weitere abwärtsinkompatible Neuerung ist das Entfernen des Supports für die Flow-Syntax aus dem babel-Parser. Bisher erkannte Prettier Flow-Syntax in JavaScript-Dateien, wenn die parser-Option auf babel gestellt war, selbst wenn die Datei kein @flow-Pragma enthielt. Da der Support begrenzt war und sich negativ auf die Performance auswirkte, hat sich das Entwicklungsteam dazu entschieden, dieses Verhalten zu entfernen. Beim Verwenden von Prettier mit dem babel-Parser wechselt es weiterhin automatisch zur Flow-Syntax, wenn es das @flow-Pragma findet oder die Datei die Endung .js.flow besitzt.

Weitere abwärtsinkompatible Neuerungen sind für Flow, CSS, GraphQL, API und CLI zu verzeichnen.

Lesen Sie auch

Warum der Einstieg ins Programmieren mit JavaScript eine gute Idee ist

Prettier lernt neue Markdown-Leerzeichenregeln

Die Markdown-Änderungen im neuen Release betreffen unter anderem den Umgang mit Whitespace beim Kombinieren von chinesischen oder japanischen und westlichen Zeichen. Bisher fügte Prettier dazwischen ein Leerzeichen ein, was laut dem Entwicklungsteam zwar von manchen bevorzugt wird, jedoch nicht den offiziellen Richtlinien entspricht. Bestehende Leerzeichen entfernt Prettier allerdings nicht. Als Alternativen für den Umgang mit Leerzeichen empfiehlt das Entwicklungsteam, auf textlint-ja oder lint-md mit den Regeln space-round-alphabet und space-round-number zurückzugreifen.

Durch das neue Verhalten muss Prettier nun bei uneindeutigen Zeilenumbrüchen zwischen den verschiedenen Zeichensätzen entscheiden, ob es diese entfernen oder durch ein Leerzeichen ersetzen soll. Dafür berücksichtigt das Tool den umgebenden Text.

Ein Beispiel zeigt die Unterschiede zwischen Prettier 2.8 und 3.0:

<!-- Input -->
漢字
Alphabetsひらがな12345カタカナ67890

漢字 Alphabets ひらがな 12345 カタカナ 67890

<!-- Prettier 2.8 -->
漢字 Alphabets ひらがな 12345 カタカナ 67890

漢字 Alphabets ひらがな 12345 カタカナ 67890

<!-- Prettier 3.0 -->
漢字Alphabetsひらがな12345カタカナ67890

漢字 Alphabets ひらがな 12345 カタカナ 67890

Als eine weitere Markdown-Neuerung bleiben nun – im Einklang mit der CommonMark-Spezifikation – multiple Leerzeichen in Inline-Code bestehen. Zuvor machte Prettier daraus jeweils ein einziges:

<!-- Input -->
`   foo   bar   baz   `

<!-- Prettier 2.8 -->
` foo bar baz `

<!-- Prettier 3.0 -->
`   foo   bar   baz   `

Einen ausführlichen Überblick samt Beispielen über die Neuerungen unter anderem für JavaScript, TypeScript, Vue und Angular bietet der Prettier-Blog.

(mai)