Zum Hauptinhalt springen

Prettier 3.2: Unterstützung für JSONC und Angulars ICU-Ausdrücke

· 7 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 →

Dieses Release umfasst neue Funktionen wie die Hinzufügung eines JSONC-Parsers, die Unterstützung von Angulars ICU-Ausdrücken sowie zahlreiche Fehlerbehebungen.

Wir sammeln weiterhin Feedback zur in Prettier 3.1 veröffentlichten Option --experimental-ternaries. Bitte lesen Sie A curious case of the ternaries und geben Sie Ihr Feedback über den bereitgestellten Google-Forms-Link.

Zusätzlich empfehlen wir die Lektüre von Prettier's CLI: A Performance Deep Dive von Fabio Spampinato. Diese schnellere CLI-Version soll als Version 4.0 veröffentlicht werden.

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!

Höhepunkte​

JSON​

Neuer jsonc-Parser hinzugefügt (#15831 von @fisker)​

Bisher wurde der Parser für .jsonc-Dateien als json erkannt. Wollte man jedoch das nachgestellte Komma beibehalten, musste man auf einen umständlichen Workaround in der Konfiguration zurückgreifen: {parser: "json5", quoteProps: "preserve", singleQuote: false}.

Der neu hinzugefügte jsonc-Parser:

  • Setzt Objektschlüssel stets in Anführungszeichen.

  • Umschließt Zeichenketten mit doppelten Anführungszeichen.

  • Respektiert selbstverständlich die trailingComma-Option.

Angular​

Unterstützung der Formatierung für Angular ICU-Ausdrücke (#15777 von @sosukesuzuki)​

Unterstützt zwei Arten von Angular ICU-Ausdrücken: plural und select.

<span i18n>
  Updated:
  {minutes, plural,
    =0 {just now}
    =1 {one minute ago}
    other {{{minutes}} minutes ago}
  }
</span>

<span i18n>
  The author is {gender, select, male {male} female {female} other {other}}
</span>

Weitere Änderungen​

JavaScript​

Vermeidung von Zeilenumbrüchen in Template-Interpolationen (#15209 von @bakkot)​

In einem Template-String wie

`this is a long message which contains an interpolation: ${format(data)} <- like this`;

wird beim Formatieren des Ausdrucks kein Zeilenumbruch hinzugefügt, es sei denn, einer ist bereits vorhanden oder aufgrund von z.B. einer verschachtelten Funktion unvermeidbar. Bisher konnte ein Zeilenumbruch eingefügt werden, sobald eine Interpolation im Template als ausreichend "nicht einfach" galt:

`this is a long message which contains an interpolation: ${format(
  data,
)} <- like this`;

Jetzt bleibt der Ausdruck stattdessen unverändert.

Wenn bereits ein Zeilenumbruch innerhalb von ${...} vorhanden ist, wird normal formatiert.

Behebung nicht-idempotenter Formatierung bei Methodenketten mit Leerzeile (#15522 von @seiyab)​

// Input
Foo.a()

.b();

// Prettier 3.1 (first format)
Foo.a()
.b();

// Prettier 3.1 (second format)
Foo.a().b();


// Prettier 3.2
Foo.a()

  .b();

Behebung der Formatierung ternärer Ausdrücke in Funktionsaufrufen (#15677 von @fisker)​

// Input
stopDirectory = await (useCache
  ? memoizedFindProjectRoot
  : findProjectRootWithoutCache)(path.dirname(path.resolve(filePath)));

// Prettier 3.1
stopDirectory = await (useCache
  ? memoizedFindProjectRoot
  : findProjectRootWithoutCache)(path.dirname(path.resolve(filePath)));

// Prettier 3.2
stopDirectory = await (
  useCache ? memoizedFindProjectRoot : findProjectRootWithoutCache
)(path.dirname(path.resolve(filePath)));

Behebung von Inkonsistenzen bei Optional-Chaining (#15806 von @fisker)​

Tritt nur bei Verwendung von typescript, meriyah oder anderen ESTree-Parsern außer babel auf.

// Input
function someFunctionName() {
  return isEqual(a.map(([t, _]) => t?.id), b.map(([t, _]) => t?.id));
  return isEqual(a?.map(([t, _]) => t?.id), b?.map(([t, _]) => t?.id));
}
theValue = Object.entries(someLongObjectName).filter(
  ([listingId]) => someListToCompareToHere.includes(listingId),
);
theValue = Object.entries(someLongObjectName).filter(
  ([listingId]) => someListToCompareToHere?.includes(listingId),
);

// Prettier 3.1
function someFunctionName() {
  return isEqual(
    a.map(([t, _]) => t?.id),
    b.map(([t, _]) => t?.id),
  );
  return isEqual(a?.map(([t, _]) => t?.id), b?.map(([t, _]) => t?.id));
}
theValue = Object.entries(someLongObjectName).filter(([listingId]) =>
  someListToCompareToHere.includes(listingId),
);
theValue = Object.entries(someLongObjectName).filter(
  ([listingId]) => someListToCompareToHere?.includes(listingId),
);

// Prettier 3.2
function someFunctionName() {
  return isEqual(
    a.map(([t, _]) => t?.id),
    b.map(([t, _]) => t?.id),
  );
  return isEqual(
    a?.map(([t, _]) => t?.id),
    b?.map(([t, _]) => t?.id),
  );
}
theValue = Object.entries(someLongObjectName).filter(([listingId]) =>
  someListToCompareToHere.includes(listingId),
);
theValue = Object.entries(someLongObjectName).filter(([listingId]) =>
  someListToCompareToHere?.includes(listingId),
);

Korrektur von Kommentaren in if-Anweisungen (#15826 von @fisker)​

// Input
if (foo) for (i = 2; i > 0; i--) console.log(i); // comment 1
else bar();

for (;;){
  if (foo) continue; // comment 2
  else bar();
}

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

// Prettier 3.2
if (foo)
  for (i = 2; i > 0; i--) console.log(i); // comment 1
else bar();

for (;;) {
  if (foo)
    continue; // comment 2
  else bar();
}

TypeScript​

Verbesserte Darstellung von Conditional Type Aliases (#15811 von @seiyab)​

// Input
type FallbackFlags<F extends Flags | undefined> =
  Equals<NonNullableFlag<F>["flags"], {}> extends true
    ? Dict<any>
    : NonNullableFlag<F>["flags"];

// Prettier 3.1
type FallbackFlags<F extends Flags | undefined> = Equals<
  NonNullableFlag<F>["flags"],
  {}
> extends true
  ? Dict<any>
  : NonNullableFlag<F>["flags"];

// Prettier 3.2
type FallbackFlags<F extends Flags | undefined> =
  Equals<NonNullableFlag<F>["flags"], {}> extends true
    ? Dict<any>
    : NonNullableFlag<F>["flags"];

HTML​

Korrektur der Formatierung von ignorierten nicht geschlossenen Elementen (#15748 von @fisker)​

<!-- Input -->
<!-- prettier-ignore -->
<h1>
Hello <span>world!

<!-- Prettier 3.1 -->
<!-- prettier-ignore -->
<h1>

<!-- Prettier 3.2 -->
<!-- prettier-ignore -->
<h1>
Hello <span>world!

Angular​

Behebung von prettier-ignore in Angular Control-Flow-Blöcken (#15827 von @fisker)​

<!-- Input -->
<!-- prettier-ignore -->
@if (condition) {
  Foo
} @else {
  Other
}

<!-- Prettier 3.1 -->
<!-- prettier-ignore -->
@if (condition) {
  Foo
}
} @else {
  Other
}

<!-- Prettier 3.2 -->
<!-- prettier-ignore -->
@if (condition) {
  Foo
}
@else {
  Other
}

Vermeidung von Doppelpunkten bei track in dritter Expression von for-Blöcken (#15887 von @sosukesuzuki)​

<!-- Input -->
@for (item of items; let i = $index; track block) {}

<!-- Prettier 3.1 -->
@for (item of items; let i = $index; track: block) {}

<!-- Prettier 3.2 -->
@for (item of items; let i = $index; track block) {}

Ember / Handlebars​

Erhalt von Pfad-Literal-Segmenten (#15605 von @maxpowa)​

Behebt Fälle, in denen Handlebar-Dateien mit Literalsegmenten so formatiert wurden, dass die Segmente entpackt wurden, was zu Syntaxfehlern führte.

<!-- Input -->
{{input.[funky<api!response]}}
{{input.[this one has spaces]}}
{{input.[anotherone].[0]}}

<!-- Prettier 3.1 -->
{{input.funky<api!response}}
{{input.this one has spaces}}
{{input.anotherone.0}}

<!-- Prettier 3.2 -->
{{input.[funky<api!response]}}
{{input.[this one has spaces]}}
{{input.anotherone.[0]}}

GraphQL​

Verbesserte Formatierung von GraphQL-Union-Types (#15870 von @ArchitGajjar)​

# Input
union SearchResult = Conference| Festival | Concert | Venue | Conference| Festival | Concert | Venue

# Prettier 3.1
union SearchResult =
    Conference
  | Festival
  | Concert
  | Venue
  | Conference
  | Festival
  | Concert
  | Venue

# Prettier 3.2
union SearchResult =
  | Conference
  | Festival
  | Concert
  | Venue
  | Conference
  | Festival
  | Concert
  | Venue

API​

Unterstützung absoluter Pfade als Plugin in Konfigurationsdateien (#15666 von @fisker)​

// prettier.config.cjs
module.exports = {
  plugins: [
    // posix style
    "/path/to/plugin.js",
    // Windows style
    "D:\\\\path\\to\\plugin.js",
    // Use `require.resolve`
    require.resolve("my-awesome-prettier-plugin"),
  ],
};

Korrektur der Typdefinitionen für getFileInfo und getSupportInfo (#15854 von @auvred)​

const plugin: Plugin = {};

prettier.getFileInfo("./file.ext", {
  plugins: [plugin],
});

prettier.getSupportInfo({ plugins: [plugin], showDeprecated: true });

Verschiedenes​

Behebung falscher Behauptung in Dokumentation über Inkompatibilität von cursorOffset mit rangeStart/rangeEnd (#15750 von @ExplodingCabbage)​

Die Option cursorOffset ist tatsächlich seit über 5 Jahren mit rangeStart/rangeEnd kompatibel, dank der Arbeit von @ds300. Die Dokumentation von Prettier (inklusive CLI --help) behauptete fälschlicherweise weiterhin das Gegenteil und wurde nun korrigiert.