Zum Hauptinhalt springen

Prettier 3.5: Neue objectWrap-Option, experimentalOperatorPosition-Option und Unterstützung für TS-Konfigurationsdateien!

· 9 Min. Lesezeit
Sosuke Suzuki
Sosuke Suzuki
Inoffizielle Beta-Übersetzung

Diese Seite wurde von PageTurner AI übersetzt (Beta). Nicht offiziell vom Projekt unterstützt. Fehler gefunden? Problem melden →

Diese Version enthält zahlreiche Fehlerbehebungen und die folgenden neuen Funktionen:

  • Unterstützung für die neue objectWrap-Option

  • Unterstützung für die neue experimentelle experimentalOperatorPosition-Option

  • Unterstützung für TypeScript-Konfigurationsdateien

Details finden Sie in den jeweiligen Abschnitten.

Falls Sie Prettier schätzen und unsere Arbeit unterstützen möchten, erwägen Sie bitte eine direkte Spende über unser OpenCollective oder durch die Förderung der Projekte, von denen wir abhängen, wie typescript-eslint, remark und Babel. Vielen Dank für Ihre fortlaufende Unterstützung!

Warum wir zwei neue Optionen hinzugefügt haben​

Diese Version führt zwei neue Optionen ein. Wenn Sie mit Prettiers Optionen-Philosophie vertraut sind, fragen Sie sich vielleicht: "Warum werden neue Optionen hinzugefügt?" Seien Sie versichert, dies sind keine typischen Optionen und sie verstoßen nicht gegen unsere Philosophie.

Wie der Name schon sagt, ist experimentalOperatorPosition experimentell. Wir haben eine Richtlinie für experimentelle Optionen, was bedeutet, dass sie irgendwann entfernt wird. In Zukunft könnte das neue Verhalten zum Standard werden, oder diese Option könnte ganz entfallen. Wenn Sie Prettier schon länger verfolgen, erinnern Sie sich vielleicht an die experimentalTernaries-Option – hier verfolgen wir denselben Ansatz.

objectWrap ist etwas Besonderes. Seit langem kämpfen wir mit der Formatierung mehrzeiliger Objekte. Da wir noch keine perfekte Lösung gefunden haben, greifen wir auf einen halb-manuellen Ansatz zurück. Weitere Details finden Sie in unserer Begründung. Das aktuelle Verhalten ist nicht ideal, da das Endergebnis je nach Code-Schreibweise variieren kann. Um ein einheitlicheres Format zu bieten, haben wir die objectWrap-Option eingeführt.

Obwohl diese Version zwei neue Optionen enthält, möchten wir betonen, dass wir Prettiers Optionen-Philosophie nicht vergessen haben. Diese Optionen lösen spezifische, lang bestehende Formatierungsprobleme, ohne unsere Philosophie zu untergraben.

Höhepunkte​

JavaScript​

Experimentelle Option für Zeilenumbrüche vor binären Operatoren hinzufügen (#7111 von @btmills)​

Dies ist hinter dem --experimental-operator-position <start|end>-Flag implementiert.

Wenn binäre Ausdrücke Zeilen umbrechen, positioniert start die Operatoren am Anfang neuer Zeilen. Diese Platzierung macht Operatoren auffälliger und erleichtert das Überfliegen des Codes.

// 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;

Implementierung der objectWrap-Konfigurationsoption (#16163 von @pauldraper, @sosukesuzuki)​

Prettier hat historisch mehrzeilige JavaScript-Objektliterale halb-manuell formatiert.

Konkret: Ein Objekt bleibt mehrzeilig, wenn vor der ersten Eigenschaft ein Zeilenumbruch steht – selbst wenn es in eine Zeile passen würde. Siehe Mehrzeilige Objekte für Details.

Während dieses Verhalten weiterhin der Standard ist, ignoriert --object-wrap=collapse Leerzeichen bei der Formatierung von Objektliteralen.

// 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" };

API​

Unterstützung für TypeScript-Konfigurationsdateien hinzugefügt (#16828 by @itsyoboieltr & @fisker)​

Fügt neue Formate für Konfigurationsdateien hinzu:

  • .prettierrc.ts

  • .prettierrc.mts

  • .prettierrc.cts

  • prettier.config.ts

  • prettier.config.mts

  • prettier.config.cts

Hinweis:

Die TypeScript-Unterstützung in Node.js ist derzeit experimentell.

Für die Nutzung von TypeScript-Konfigurationsdateien ist Node.js>=22.6.0 erforderlich. Bei Node.js v22 muss zusätzlich --experimental-strip-types angegeben werden.

Sie können Prettier ausführen mit:

node --experimental-strip-types node_modules/prettier/bin/prettier.cjs . --write

oder

NODE_OPTIONS="--experimental-strip-types" prettier . --write

Andere TypeScript-Loader sollten ebenfalls funktionieren, wurden aber nicht getestet - Nutzung auf eigene Gefahr.

Beispielsweise mit tsx:

node --import tsx node_modules/prettier/bin/prettier.cjs . --write

oder

tsx node_modules/prettier/bin/prettier.cjs . --write

Weitere Änderungen​

JavaScript​

Verbesserte Behandlung von Randfällen beim Zeilenumbruch in JSX (#16700 by @seiyab)​

// Input
br_triggers_expression_break =
  <div><br />
  text text text text text text text text text text text {this.props.type} </div>

// Prettier 3.4
br_triggers_expression_break = (
  <div>
    <br />
    text text text text text text text text text text text {
      this.props.type
    }{" "}
  </div>
);

// Prettier 3.5
br_triggers_expression_break = (
  <div>
    <br />
    text text text text text text text text text text text{" "}
    {this.props.type}{" "}
  </div>
);

Flow​

Unterstützung für const-Typparameter in Flow (#16947 by @gkz)​

function f<const T>(): void {}

// Prettier 3.4
// Parse error

// Prettier 3.5
function f<const T>(): void {}

CSS​

Zeilenumbruch vor trennenden Kommas in Wertelisten (#16907 by @seiyab)​

/* Input */
a {
  background-image:
    linear-gradient(to bottom, rgb(255 255 0 / 50%), rgb(0 0 255 / 50%)),
    url("catfront.png");
}

/* Prettier 3.4 */
a {
  background-image: linear-gradient(
      to bottom,
      rgb(255 255 0 / 50%),
      rgb(0 0 255 / 50%)
    ),
    url("catfront.png");
}

/* Prettier 3.5 */
a {
  background-image:
    linear-gradient(to bottom, rgb(255 255 0 / 50%), rgb(0 0 255 / 50%)),
    url("catfront.png");
}

Vue​

Unterstützung für .prop-Kurzform (#16920 by @fisker)​

.foo ist die Kurzform für v-bind:foo.prop. Siehe Eingebaute Direktiven v-bind für Details.

<!-- Input -->
<template>
  <button .disabled="   a &&b ">Click!</button>
</template>

<!-- Prettier 3.4 -->
<template>
  <button .disabled="   a &&b ">Click!</button>
</template>

<!-- Prettier 3.5 -->
<template>
  <button .disabled="a && b">Click!</button>
</template>

Angular​

Verbesserte Zeilenumbrüche innerhalb von ICU-Blöcken (#16922 by @fisker)​

<!-- Input -->
<span>The author is {gender, select, male {male} female {female} other {other}}</span>
<span>The author is <span>male consectetur adipiscing elit, sed do eiusmod</span></span>

<!-- Prettier 3.4 -->
<span
  >The author is {gender, select, male {male} female {female} other {other}
}</span>
<span
  >The author is
  <span>male consectetur adipiscing elit, sed do eiusmod</span></span
>

<!-- Prettier 3.5 -->
<span
  >The author is
  {gender, select, male {male} female {female} other {other}}</span
>
<span
  >The author is
  <span>male consectetur adipiscing elit, sed do eiusmod</span></span
>

Behebung zusätzlicher Leerzeilen innerhalb von ICU-Blöcken (#16922 by @fisker)​

<!-- Input -->
{active, select,
  true {
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod temp
  }
  false {
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod temp
  }
}

<!-- Prettier 3.4 -->
{active, select,
  true {
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod temp

  }
  false {
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod temp

  }
}

<!-- Prettier 3.5 -->
{active, select,
  true {
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod temp
  }
  false {
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod temp
  }
}

Ember / Handlebars​

Behandlung von <style>- und <pre>-Tags in Handlebars/Glimmer (#15087 by @jurgenwerk)​

{{!-- Input --}}
<pre>
  cd ~
  ls
  echo "hey"
</pre>
<style>
  .red { color: red }
  .blue {
    color: red
  }
</style>

{{!-- Prettier 3.4 --}}
<pre>
  cd ~ ls echo "hey"
</pre>
<style>
  .red { color: red } .blue { color: blue }
</style>

{{!-- Prettier 3.5 --}}
<pre>
  cd ~
  ls
  echo "hey"
</pre>
<style>
  .red {
    color: red;
  }
  .blue {
    color: red;
  }
</style>

Markdown​

Behandlung von U+FF5E als CJK-Interpunktion (#16832 by @tats-u)​

Das Zeichen U+FF5E FULLWIDTH TILDE (～) wird unter Windows häufig als Ersatz für U+301C WAVE DASH (〜) im Japanischen verwendet. Vollbreite Alphabete kommen in Markdown-Dokumenten seltener vor als in anderen Dokumenttypen (z.B. Microsoft Office-Dateien), und die vollbreite Tilde wird für diesen Zweck viel seltener verwendet als vollbreite Alphabete und Ziffern. Daher können wir davon ausgehen, dass die vollbreite Tilde in Markdown-Dokumenten in der Praxis eine alternative Form des Wellenstrichs darstellt und als CJK-Satzzeichen fungiert.

<!-- Input (--prose-wrap=never) -->
a 字 a 字 a 字
60～
100点
60〜
100点

<!-- Prettier 3.4 -->
a 字 a 字 a 字 60～ 100点 60〜10点


<!-- Prettier 3.5 -->
a 字 a 字 a 字 60～10点 60〜100点

Das erste Symbol zwischen 60 und 100 im obigen Beispiel ist U+FF5E FULLWIDTH TILDE (～) und das zweite ist U+301C WAVE DASH (〜).

API​

Unterstützung für das Lesen von Konfigurationen aus package.json mit JSONC-Syntax unter Bun (#17041 von @fisker)​

Bun 1.2 führte JSONC-Unterstützung in package.json ein. In früheren Prettier-Versionen wurde die prettier-Konfiguration darin ignoriert. Ab Prettier 3.5 können wir die prettier-Konfiguration ohne Fehler auslesen.

Da dies jedoch ein rein Bun-spezifisches Feature ist und nicht von Node.js unterstützt wird, funktioniert es nur, wenn Prettier mit Bun ausgeführt wird.

Wichtiger Hinweis: Prettier verwendet standardmäßig den json-stringify-Parser zur Formatierung von package.json-Dateien. Um package.json-Dateien mit JSONC-Syntax zu formatieren, müssen Sie die Parser-Option überschreiben.

export default {
  overrides: [
    {
      files: ["package.json"],
      options: {
        parser: "jsonc",
      },
    },
  ],
};

Falls Sie Prettier aus bestimmten Gründen nicht aktualisieren können, können Sie weiterhin JSONC-Syntax in package.json verwenden. Platzieren Sie Ihre prettier-Konfiguration jedoch nicht darin – nutzen Sie stattdessen eine andere Konfigurationsdatei.

Verschiedenes​

Verwendung des ESM-Entrypoints für require(ESM) (#16958 von @tats-u)​

Info

Diese Änderung wurde in v3.5.2 rückgängig gemacht. Details finden Sie unter #17139.

Node.js 22.12 oder neuer kann (experimentell) ESM-Module mit der require-Funktion laden ohne Runtime-Flags. Diese Änderung ermöglicht require, Prettier ohne den CommonJS-Entrypoint zu laden, indem fast ausschließlich der ESM-Entrypoint importiert wird.

Das Laden von ES-Modulen mit require ist noch nicht vollständig stabil, kann aber ab Node 22.13 ohne ExperimentalWarning verwendet werden.