Prettier 2.3: Wo Zuweisungen konsistent werden, kurze Schlüssel nicht umbrechen und Handlebars offiziell ist

9. Mai 2021 · 32 Min. Lesezeit

Inoffizielle Beta-Übersetzung

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

Dieses Release konzentriert sich auf die Behebung langjähriger Probleme im JavaScript-Drucker. Seien Sie gewarnt: Das Neformatieren eines Projekts mit der neuen Version könnte leider zu recht umfangreichen Diffs führen. Wenn Sie nicht ignoreRevsFile verwenden, um solche Massenänderungen vor git blame zu verbergen, ist es vielleicht an der Zeit.

Ein bemerkenswerter Meilenstein ist das lang erwartete Release des Ember / Handlebars-Formatters. Es soll der letzte direkt in die Kernbibliothek integrierte Formatter sein. Zukünftig sollen Sprachen aus Gründen der Nachhaltigkeit nur noch über Plugins hinzugefügt werden.

Wir danken unseren finanziellen Unterstützern: Salesforce, Indeed, Frontend Masters, Airbnb, Shogun Labs, Skyscanner, Konstantin Pschera und vielen anderen, die uns helfen, weiterzumachen. Wenn Sie Prettier mögen und unsere Arbeit unterstützen wollen, besuchen Sie unser OpenCollective. Bitte erwägen Sie auch, die Projekte zu unterstützen, von denen Prettier abhängt, wie typescript-eslint, remark und Babel.

Die meisten Änderungen in diesem Release sind der harten Arbeit von Fisker Cheung, Georgii Dolzhykov und Sosuke Suzuki sowie vielen anderen Mitwirkenden zu verdanken.

Nur zur Erinnerung: Bei Installation oder Aktualisierung von Prettier wird dringend empfohlen, die exakte Version in package.json anzugeben: "2.3.0", nicht "^2.3.0".

Höhepunkte

JavaScript

Zuweisungen konsistenter formatieren (#10222, #10643, #10672 von @thorn0; #10158 von @sosukesuzuki)

Bisher hatte Prettier große Schwierigkeiten, Zeilenumbrüche in Zuweisungen korrekt zu setzen. Beispielsweise blieben lange rechte Seiten oft ungebrochen. Das ist jetzt anders.

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

Zeilenumbrüche bei kurzen Objekteigenschaften vermeiden (#10335 von @thorn0)

Zeilenumbrüche nach kurzen Eigenschaftsnamen in Objektliteralen wirken oft unnatürlich. Selbst wenn ein solcher Umbruch einen Vorteil von 1-2 Zeichen in der Zeilenlänge bringt, erscheint er selten gerechtfertigt. Prettier 2.3 vermeidet Zeilenumbrüche nach Eigenschaftsnamen, die kürzer als tabWidth + 3 sind – beispielsweise 5 Zeichen in der Standardkonfiguration oder 7 Zeichen bei tabWidth: 4. Diese Heuristik könnte in zukünftigen Versionen angepasst werden.

// Prettier 2.2
const importantLink = {
  url:
    "https://prettier.io/docs/en/rationale.html#what-prettier-is-concerned-about",
  gitHubUrl:
    "https://github.com/prettier/prettier/blob/main/docs/rationale.md#what-prettier-is-concerned-about",
};

// Prettier 2.3
const importantLink = {
  url: "https://prettier.io/docs/en/rationale.html#what-prettier-is-concerned-about",
  gitHubUrl:
    "https://github.com/prettier/prettier/blob/main/docs/rationale.md#what-prettier-is-concerned-about",
};

Ember / Handlebars

Handlebars-Unterstützung von Alpha- auf Release-Status heben (#10290 von @dcyriller & @thorn0)

Alles begann 2017. Die Unterstützung für Handlebars war zwar schon länger in Prettier vorhanden, wurde aber nie offiziell veröffentlicht, da sie nicht wirklich ausgereift war. Ihr Status wechselte von "Alpha" zu "Experimentell" zu "Beta" und wenn man ältere Release-Notes liest, sieht man, dass sie nach "Beta" irgendwie wieder "Alpha" wurde...

Wie dem auch sei, es ist endlich soweit: Prettier kann jetzt offiziell HTML-Templates mit Handlebars formatieren! 🎉

Es nutzt Glimmer, den Handlebars-Parser von Ember, und sollte dank des Ember-Teams mit der HTML-Spezifikation konform sein.

Die Option --html-whitespace-sensitivity wird unterstützt und standardmäßig auf strict gesetzt. Das bedeutet, Prettier respektiert stets vorhandene oder fehlende Leerzeichen um Tags herum und betrachtet es als unsicher, Leerzeichen dort hinzuzufügen oder zu entfernen, wo keine waren (oder umgekehrt), da dies das Rendering im Browser beeinflussen kann. Der Wert css wird noch nicht unterstützt (aktuell wie strict behandelt).

Die Funktion heißt "Ember / Handlebars" und nicht einfach "Handlebars", weil Glimmer einige Syntaxelemente und Anwendungsfälle von Handlebars nicht unterstützt. Hauptgrund ist, dass Handlebars als Template-Engine (Präprozessor) die zugrundeliegende Syntax des verarbeiteten Inhalts ignoriert, während Glimmer zwei Syntaxen – HTML und Handlebars – gleichzeitig parst und zu einem einzigen Baum kombiniert, den Prettier ausgeben kann. Daher formatiert Prettier keine Handlebars-Dateien, die nicht in einen solchen Baum geparst werden können, entweder weil die zugrundeliegende Syntax nicht HTML ist oder weil Template-Direktiven und Tags sich überlappen (z.B. {{#if foo}}<div>{{/if}). Trotz dieser Einschränkungen scheint das Tool für Nicht-Ember-Handlebars-Nutzer nützlich genug zu sein. Für die von Ember nicht unterstützte Syntax besteht gute Aussicht auf zukünftige Prettier-Versionen, da Glimmer einen vollwertigen Handlebars-Parser nutzt.

Dateien mit den Endungen .hbs und .handlebars werden standardmäßig als Handlebars erkannt. Für andere Dateiendungen muss die Option --parser mit dem Wert glimmer angegeben werden – beispielsweise über die Kommandozeile oder besser mittels Configuration Overrides.

Sehen Sie das Tool in Aktion auf dem Playground!

Verbesserungen an der Formatierung

JavaScript

Verbesserte Formatierung von Curry-Pfeilfunktionen (#9992, #10543 von @sosukesuzuki & @thorn0)

// Prettier 2.2
const currying = (argument1) => (argument2) => (argument3) => (argument4) => (
  argument5
) => (argument6) => foo;

// Prettier 2.3
const currying =
  (argument1) =>
  (argument2) =>
  (argument3) =>
  (argument4) =>
  (argument5) =>
  (argument6) =>
    foo;

Bessere Formatierung für React-Hooks-Aufrufe (#10238 von @sosukesuzuki)

// Prettier 2.2
const { firstName, lastName } = useMemo(() => parseFullName(fullName), [
  fullName,
]);

// Prettier 2.3
const { firstName, lastName } = useMemo(
  () => parseFullName(fullName),
  [fullName]
);

Verbesserte visuelle Trennung zwischen Header und Body bei Klassen mit mehrzeiligen Headern (#10085 von @sosukesuzuki)

// Prettier 2.2
class loooooooooooooooooooong
  extends looooooooooooooooooong
  implements loooooooooooooooooooong {
  property: string;
}

// Prettier 2.3
class loooooooooooooooooooong
  extends looooooooooooooooooong
  implements loooooooooooooooooooong
{
  property: string;
}

Kompakte Formatierung von Arrays mit reinen Zahlen (#10106, #10160 von @thorn0)

Obwohl Prettier generell solche Formatierungen vermeidet, da sie diff-unfreundlich sind, haben wir uns in diesem Spezialfall dafür entschieden, dass die Vorteile die Risiken überwiegen.

Wenn mindestens ein Element einen einzeiligen Kommentar (// ...) in derselben Zeile hat, wird die kompakte Formatierung nicht angewendet. Einzeilige Kommentare in separaten Zeilen haben diesen Effekt hingegen nicht und können – ebenso wie Leerzeilen – zur logischen Gruppierung genutzt werden.

// Input
const lazyCatererNumbers  =  [1, 2, 4, 7, 11, 16, 22, 29, 37, 46,

// n > 10
56, 67, 79, 92, 106, 121, 137, 154, 172, 191, 211, 232, 254, 277, 301, 326, 352, 379, 407, 436, 466,
497, 529, 562, 596, 631, 667, 704, 742, 781,
// n > 40
821, 862, 904, 947, 991, 1036, 1082, 1129, 1177, 1226, 1276, 1327, 1379];

// Prettier 2.2
const lazyCatererNumbers = [
  1,
  2,
  4,
  7,
  11,
  16,
  22,
  29,
  37,
  // ... ✂ 46 lines ✂ ...
  1379,
];

// Prettier 2.3
const lazyCatererNumbers = [
  1, 2, 4, 7, 11, 16, 22, 29, 37, 46,

  // n > 10
  56, 67, 79, 92, 106, 121, 137, 154, 172, 191, 211, 232, 254, 277, 301, 326,
  352, 379, 407, 436, 466, 497, 529, 562, 596, 631, 667, 704, 742, 781,
  // n > 40
  821, 862, 904, 947, 991, 1036, 1082, 1129, 1177, 1226, 1276, 1327, 1379,
];

Verbesserte Formatierung für verschachtelte await-Ausdrücke in Kopfbereichen von Member- und Aufrufausdrücken (#10342 von @thorn0)

Auch wenn Prettier hier hilfreich sein möchte: Bitte schreibt solchen Code nicht. Habt Erbarmen mit euren Teammitgliedern und verwendet Zwischenvariablen.

// Input
const getAccountCount = async () =>
  (await
    (await (
      await focusOnSection(BOOKMARKED_PROJECTS_SECTION_NAME)
    ).findItem("My bookmarks")).getChildren()
  ).length

// Prettier 2.2
const getAccountCount = async () =>
  (
    await (
      await (await focusOnSection(BOOKMARKED_PROJECTS_SECTION_NAME)).findItem(
        "My bookmarks"
      )
    ).getChildren()
  ).length;

// Prettier 2.3
const getAccountCount = async () =>
  (
    await (
      await (
        await focusOnSection(BOOKMARKED_PROJECTS_SECTION_NAME)
      ).findItem("My bookmarks")
    ).getChildren()
  ).length;

Verbesserte Formatierung für `do`-Ausdrücke in Funktionsaufrufen (#10693 von @sosukesuzuki)

„do-Ausdrücke“ sind ein ECMAScript-Proposal der Stufe 1.

// Prettier 2.2
expect(
  do {
    var bar = "foo";
    bar;
  }
).toBe("foo");

// Prettier 2.3
expect(do {
  var bar = "foo";
  bar;
}).toBe("foo");

Konsistente Einrückung für bedingte Operatoren (#10187, #10266 von @sosukesuzuki)

// Prettier 2.2
const dotNotationMemberExpression = (callNode.parent?.type ===
AST_NODE_TYPES.ChainExpression
  ? callNode.parent.parent
  : callNode.parent
).TSESTree.BinaryExpression;

const computedMemberExpression = (callNode.parent?.type ===
AST_NODE_TYPES.ChainExpression
  ? callNode.parent.parent
  : callNode.parent)[TSESTree.BinaryExpression];

const callExpressionCallee = (callNode.parent?.type ===
  AST_NODE_TYPES.ChainExpression
  ? callNode.parent.parent
  : callNode.parent)(TSESTree.BinaryExpression);

const typeScriptAsExpression = (callNode.parent?.type ===
AST_NODE_TYPES.ChainExpression
  ? callNode.parent.parent
  : callNode.parent) as TSESTree.BinaryExpression;

// Prettier 2.3
const dotNotationMemberExpression = (
  callNode.parent?.type === AST_NODE_TYPES.ChainExpression
    ? callNode.parent.parent
    : callNode.parent
).TSESTree.BinaryExpression;

const computedMemberExpression = (
  callNode.parent?.type === AST_NODE_TYPES.ChainExpression
    ? callNode.parent.parent
    : callNode.parent
)[TSESTree.BinaryExpression];

const callExpressionCallee = (
  callNode.parent?.type === AST_NODE_TYPES.ChainExpression
    ? callNode.parent.parent
    : callNode.parent
)(TSESTree.BinaryExpression);

const typeScriptAsExpression = (
  callNode.parent?.type === AST_NODE_TYPES.ChainExpression
    ? callNode.parent.parent
    : callNode.parent
) as TSESTree.BinaryExpression;

HTML

Präfixbasierte Mehrzeilenformatierung für das `class`-Attribut (#7865 von @thorn0)

Die Formatierung von HTML-Klassennamen behält Klassen nun in einer Zeile, bis die Zeilenlängenbegrenzung erreicht ist. An diesem Punkt werden aufeinanderfolgende Klassen mit demselben Präfix gruppiert und jeweils in einer Zeile zusammengefasst. Für Layout-Frameworks wie Bootstrap und Tailwind CSS, die einem Element viele Klassen hinzufügen, ist dies für Lesbarkeit und Wartbarkeit entscheidend - im Vergleich zum vorherigen Verhalten (alle Klassen in einer Zeile) oder etwa dem Ansatz, jede Klasse in eine eigene Zeile zu setzen.

<!-- Prettier 2.2 -->
<div
  class="SomeComponent__heading-row d-flex flex-column flex-lg-row justify-content-start justify-content-lg-between align-items-start align-items-lg-center"
></div>

<!-- Prettier 2.3 -->
<div
  class="
    SomeComponent__heading-row
    d-flex
    flex-column flex-lg-row
    justify-content-start justify-content-lg-between
    align-items-start align-items-lg-center
  "
></div>

Weitere Änderungen

JavaScript

Behebung von Instabilität bei mehreren Kommentaren in derselben Zeile (#9672 von @fisker)

// Input
a;
/*1*//*2*/
/*3*/
b;

// Prettier 2.2
a; /*2*/
/*1*/ /*3*/
b;

// Prettier 2.2 (second format)
a; /*2*/ /*3*/
/*1*/ b;

// Prettier 2.3
a;
/*1*/ /*2*/
/*3*/
b;

Knoten nicht formatieren, die kurz vor `rangeStart` enden (#9704 von @fisker)

Zuvor wurden bei der Bereichsformatierung solche Knoten als Teil des Bereichs betrachtet, jetzt sind sie ausgeschlossen. Dies betrifft andere Sprachen, die die Bereichsformatierung unterstützen, nicht nur JavaScript.

// Input
foo = 1.0000;bar = 1.0000;baz=1.0000;
             ^^^^^^^^^^^^^ Range

// Prettier 2.2
foo = 1.0;
bar = 1.0;baz=1.0000;

// Prettier 2.3
foo = 1.0000;bar = 1.0;baz=1.0000;

Korrektur von Kommentaren innerhalb des JSX-End-Tags (#9711 von @fisker)

// Input
<a><// comment
/a>;

// Prettier 2.2
<a></// comment
a>;

// Prettier 2.3
<a></
  // comment
  a
>;

Behebung inkonsistenter Erkennung von Sprachkommentaren (#9743 von @fisker)

Ein /* HTML */-Kommentar sollte direkt vor einem Template-Literal stehen, damit letzteres als HTML-in-JS erkannt wird. Zuvor wurde der Kommentar fälschlicherweise an anderen Positionen erkannt.

// Input
foo /* HTML */ = `<DIV>
</DIV>`;

// Prettier 2.2 (--parser=babel)
foo /* HTML */ = `<div></div>`;

// Prettier 2.2 (--parser=meriyah)
foo /* HTML */ = `<DIV>
</DIV>`;

// Prettier 2.3 (All JavaScript parsers)
foo /* HTML */ = `<DIV>
</DIV>`;

Korrektur eines zusätzlichen Semikolons bei ignorierten Direktiven (#9850 von @fisker)

// Input
// prettier-ignore
'use strict';

function foo() {
// prettier-ignore
"use strict";;
}

// Prettier 2.2
// prettier-ignore
'use strict';;

function foo() {
  // prettier-ignore
  "use strict";;
}

// Prettier 2.3
// prettier-ignore
'use strict';

function foo() {
  // prettier-ignore
  "use strict";
}

Behebung von instabiler JSX-Formatierung mit U+3000 (#9866 von @fisker)

// Input
<p>
  <span />　{this.props.data.title}　<span />
  //----- ^ U+3000 --------------- ^ U+3000
</p>

// Prettier 2.2
<p>
  <span />
  　{this.props.data.title}　<span />
  //----- ^ U+3000 --------------- ^ U+3000
</p>;

// Prettier 2.2 (second format)
<p>
  <span />　{this.props.data.title}　<span />
  //----- ^ U+3000 --------------- ^ U+3000
</p>;

// Prettier 2.3
<p>
  <span />　{this.props.data.title}　<span />
  //----- ^ U+3000 --------------- ^ U+3000
</p>;

Behebung eines Fehlers bei Ausdrücken wie `a(b => c => function (){})` (#10278 von @thorn0)

Regression seit v2.2.0.

// Input
a(b => c => function (){})

// Prettier 2.2
TypeError: Cannot read property 'length' of undefined

// Prettier 2.3
a((b) => (c) => function () {});

Verbesserte Formatierung für Inline-Dekoratoren (#10296 von @fisker)

// Input
class Foo {
  @decorator([]) bar() {}
  @decorator(
    []
  ) baz() {}
}

// Prettier 2.2
class Foo {
  @decorator([]) bar() {}
  @decorator([])
  baz() {}
}

// Prettier 2.3
class Foo {
  @decorator([]) bar() {}
  @decorator([]) baz() {}
}

Behebung des ASI-Schutzes für private Felder (#10334 von @thorn0)

// Input
class C {
  #field = 'value';
  ["method"]() {}
}

// Prettier 2.2 (with --no-semi)
class C {
  #field = "value"
  ["method"]() {}
}

// Prettier 2.3 (with --no-semi)
class C {
  #field = "value";
  ["method"]() {}
}

Unterstützung des Module-Blocks-Vorschlags (#10417 von @sosukesuzuki, @thorn0)

Unterstützung der Formatierung für den Module-Blocks-Stage-2-Vorschlag.

// Input
module { export let foo = "foo"; };

// Prettier 2.2
SyntaxError: Unexpected token, expected ";"

// Prettier 2.3
module {
  export let foo = "foo";
};

Fehlende Klammern für `yield` in Pipelines korrigieren (#10446 von @fisker)

// Input
function* f() {
  return x |> (yield #);
}

// Prettier 2.2
function* f() {
  return x |> yield #;
}

// Prettier 2.3
function* f() {
  return x |> (yield #);
}

Bessere Fehlerbehandlung bei Babel (#10495 von @fisker, #9787 von @sosukesuzuki, #10065, #10322 von @thorn0)

Früher war der Babel-Parser aufgrund der Fehlerbehandlung zu nachsichtig, was zu AST-Strukturen führte, die Prettier nicht formatieren konnte. Prettier 2.3 lässt Babel jetzt nur noch harmlose Fehler wie mehrere const-Deklarationen mit gleichem Namen zu. Andere Syntaxfehler werden korrekt gemeldet.

// Input
foo("a", , "b");

// Prettier 2.2
TypeError: Cannot read property 'type' of null

// Prettier 2.3
[error] stdin: SyntaxError: Argument expression expected. (1:10)
[error] > 1 | foo("a", , "b");
[error]     |          ^

// Input
const \u{20} = 1

// Prettier 2.2
const   = 1;

// Prettier 2.3
[error] stdin: SyntaxError: Invalid Unicode escape (1:7)
[error] > 1 | const \u{20} = 1
[error]     |       ^         ^

Letztes Argument-Anhängen bei Zahlen-Arrays vermeiden (#10517 von @thorn0)

Eine weitere Sonderbehandlung für reine Zahlen-Arrays.

// Input
instantiate(game, [
  transform([-0.7, 0.5, 0]),
  render_colored_diffuse(game.MaterialDiffuse, game.Meshes["monkey_flat"], [1, 1, 0.3, 1]),
]);

// Prettier 2.2
instantiate(game, [
  transform([-0.7, 0.5, 0]),
  render_colored_diffuse(game.MaterialDiffuse, game.Meshes["monkey_flat"], [
    1,
    1,
    0.3,
    1,
  ]),
]);

// Prettier 2.3
instantiate(game, [
  transform([-0.7, 0.5, 0]),
  render_colored_diffuse(
    game.MaterialDiffuse,
    game.Meshes["monkey_flat"],
    [1, 1, 0.3, 1]
  ),
]);

Bessere Erkennung von AMD `define` (#10528 von @thorn0)

Prettier behandelt AMD define-Aufrufe speziell, um unerwartete Zeilenumbrüche zu vermeiden. Jetzt werden define-Aufrufe nur noch formatiert, wenn sie auf oberster Ebene stehen und Argumente im AMD-typischen Stil übergeben werden.

// Prettier 2.2
const someVariable = define("some string literal", anotherVariable, yetAnotherVariable);

// Prettier 2.3
const someVariable = define(
  "some string literal",
  anotherVariable,
  yetAnotherVariable
);

Doppelte `prettier-ignore`-Kommentare korrigieren (#10666 von @fisker)

// Input
foo = a.
  // prettier-ignore
  b;

// Prettier 2.2
foo =
  // prettier-ignore
  a.
  // prettier-ignore
  b;

// Prettier 2.3
foo = a.
  // prettier-ignore
  b;

Behandlung bedingter Gruppen in `mapDoc` (#10695 von @thorn0)

Korrigiert insbesondere fehlerhafte Substitutionen in HTML-in-JS.

// Input
export default function include_photoswipe(
	gallery_selector = ".my-gallery"
): string {
	return /* HTML */ `
		<script>
			window.addEventListener("load", () =>
				initPhotoSwipeFromDOM("${gallery_selector}")
			);
		</script>`;
}

// Prettier 2.2
export default function include_photoswipe(
  gallery_selector = ".my-gallery"
): string {
  return /* HTML */ ` <script>
    window.addEventListener("load", () =>
      initPhotoSwipeFromDOM("PRETTIER_HTML_PLACEHOLDER_0_13_IN_JS")
    );
  </script>`;
}

// Prettier 2.3
export default function include_photoswipe(
  gallery_selector = ".my-gallery"
): string {
  return /* HTML */ ` <script>
    window.addEventListener("load", () =>
      initPhotoSwipeFromDOM("${gallery_selector}")
    );
  </script>`;
}

Vermeidung von Argument-Expansion, die zu fehlerhaftem Code führt (#10712 von @thorn0)

// Input
glimseGlyphsHazardNoopsTieTie(({ a, b = () => {
  console.log();
}}) => averredBathersBoxroomBuggyNurl());

// Prettier 2.2
glimseGlyphsHazardNoopsTieTie(({ a, b = () => {
    console.log();
  } }) => averredBathersBoxroomBuggyNurl());

// Prettier 2.3
glimseGlyphsHazardNoopsTieTie(
  ({
    a,
    b = () => {
      console.log();
    },
  }) => averredBathersBoxroomBuggyNurl()
);

Fehlende Klammern um `async` in `for-of` korrigieren (#10781 von @fisker)

Siehe https://github.com/tc39/ecma262/issues/2034

// Input
for ((async) of []);

// Prettier 2.2
for (async of []);

// Prettier 2.2 (second format)
SyntaxError: Unexpected token, expected "=>" (1:15)
> 1 | for (async of []);

// Prettier 2.3
for ((async) of []);

Unterstützung für `async do`-Expressions-Proposal (#10813 von @sosukesuzuki)

Siehe https://github.com/tc39/proposal-async-do-expressions

// Input
const x = async do {
  await requestAPI().json();
};

// Prettier 2.2
SyntaxError: Unexpected token, expected ";" (1:17)

// Prettier 2.3
const x = async do {
  await requestAPI().json();
};

TypeScript

Fehlende Kommentare in `MethodDefinition` korrigieren (#9872 von @fisker)

Nur beim typescript-Parser, babel-ts ist nicht betroffen.

// Input
class Foo {
  bar() /* bat */;
}

// Prettier 2.2
Error: Comment "bat" was not printed. Please report this error!

// Prettier 2.3
class Foo {
  bar /* bat */();
}

Behebt unnötige Zeilenumbrüche bei Parametern von Methodentyp-Deklarationen (#10024 von @sosukesuzuki, #10357 von @thorn0)

// Input
type Foo = {
  method(foo: "foo"): `
  `
};

// Prettier 2.2
type Foo = {
  method(
    foo: "foo"
  ): `
  `;
};

// Prettier 2.3
type Foo = {
  method(foo: "foo"): `
  `;
};

Fügt nachgestellte Kommas bei Typparametern ein (#10109 von @sosukesuzuki, #10353 von @thorn0)

TypeScript unterstützt nachgestellte Kommas bei Typparametern seit Version 2.7 aus Januar 2018. Prettier 2.3 fügt sie ein, wenn die Option trailingComma auf all gesetzt ist. Belasse diese Option bei der konservativeren Standardeinstellung es5, wenn Kompatibilität mit TypeScript 2.7 oder älter benötigt wird. Hinweis: TypeScript unterstützt nachgestellte Kommas bei Typargumenten (Instanziierungen von Typparametern) weiterhin nicht.

// Input
export class BaseSingleLevelProfileTargeting<
	T extends ValidSingleLevelProfileNode,
> {
  // ...
}

// Prettier 2.2
export class BaseSingleLevelProfileTargeting<
  T extends ValidSingleLevelProfileNode
> {
  // ...
}

// Prettier 2.3 with --trailling-comma=all
export class BaseSingleLevelProfileTargeting<
  T extends ValidSingleLevelProfileNode,
> {
  // ...
}

Ermöglicht kompakte Darstellung von Argumenten bei Pfeilfunktionen mit Rückgabetyp-Annotationen (#10316 von @thorn0)

// Prettier 2.2
users.map(
  (user: User): User => {
    return user;
  }
);

// Prettier 2.3
users.map((user: User): User => {
  return user;
})

Korrigiert Klammern für Non-Null Assertions (#10337 von @thorn0)

Notwendige Klammern wurden in Ausdrücken mit Non-Null Assertions manchmal nicht gesetzt. Dies wurde behoben.

// Input
const myFunction2 = (key: string): number =>
  ({
    a: 42,
    b: 42,
  }[key]!)

// Prettier 2.2 (invalid syntax)
const myFunction2 = (key: string): number =>
  {
    a: 42,
    b: 42,
  }[key]!;

// Prettier 2.3
const myFunction2 = (key: string): number =>
  ({
    a: 42,
    b: 42,
  }[key]!);

Rückt Typ-Assertions in Kopfbereichen von Member- und Aufrufausdrücken ein (#10341 von @thorn0)

// Input
const accountCount = (findItemInSection(BOOKMARKED_PROJECTS_SECTION_NAME,
  "My bookmarks") as TreeItem).getChildren().length;

// Prettier 2.2
const accountCount = (findItemInSection(
  BOOKMARKED_PROJECTS_SECTION_NAME,
  "My bookmarks"
) as TreeItem).getChildren().length;

// Prettier 2.3
const accountCount = (
  findItemInSection(
    BOOKMARKED_PROJECTS_SECTION_NAME,
    "My bookmarks"
  ) as TreeItem
).getChildren().length;

Unterstützung für das intrinsic-Schlüsselwort (#10390 von @sosukesuzuki)

// Input
type Uppercase<S extends string> = intrinsic;

// Prettier 2.2
Error: unknown type: "TSIntrinsicKeyword"

// Prettier 2.3
type Uppercase<S extends string> = intrinsic;

Unterstützung für TypeScript 4.2 (#10418, #10466, #10546, #10589 von @sosukesuzuki)

`abstract` Construct Signatures

// Input
type T = abstract new () => void;

// Prettier 2.2
SyntaxError: Unexpected token, expected ";" (1:19)

// Prettier 2.3
type T = abstract new () => void;

Type-Imports in require-Deklarationen

// Input
import type A = require("A");

// Prettier 2.2
SyntaxError: Only ECMAScript imports may use 'import type'.

// Prettier 2.3
import type A = require("A");

Korrigiert falsch platzierte Kommentare in Unions und Schnittmengen (#10457 von @thorn0)

// Input
type Foo = "1" | "2" /* two */ | "3";

// Prettier 2.2
type Foo = "1" | "2" | /* two */ "3";

// Prettier 2.3
type Foo = "1" | "2" /* two */ | "3";

Druckt keine Klammern um geschachtelte Typ-Assertions (#10702 von @thorn0)

// Input
foo as unknown as Bar

// Prettier 2.2
(foo as unknown) as Bar;

// Prettier 2.3
foo as unknown as Bar;

Unterstützt TypeScript 4.3 via `babel-ts` (#10811 von @sosukesuzuki)

`override`-Modifikatoren in Klassenelementen

class Foo extends  {
  override method() {}
}

Statische Indexsignaturen (`[key: KeyType]: ValueType`) in Klassen

class Foo {
  static [key: string]: Bar;
}

`get` / `set` in Typdeklarationen

interface Foo {
  set foo(value);
  get foo(): string;
}

Flow

Fehlendes Semikolon in `declare export * from …` beheben (#9767 von @fisker)

// Input
declare export * from "ES6_ExportAllFrom_Source2";

// Prettier 2.2
declare export * from "ES6_ExportAllFrom_Source2"

// Prettier 2.3
declare export * from "ES6_ExportAllFrom_Source2";

Unterstützung für `this`-Typannotationen in Funktionen via `babel-flow` (#10397 von @sosukesuzuki)

this-Typannotationen werden seit Babel 7.13 unterstützt.

// Input
var foo: (this: boolean) => void;

// Prettier 2.2
SyntaxError: Unexpected token, expected ")" (1:15)

// Prettier 2.3
var foo: (this: boolean) => void;

Probleme bei der Bereichsformatierung beheben (#10505 von @thorn0)

Prettier hatte Probleme, bestimmte Bereiche in Funktionsdeklarationen zu formatieren. Dabei wurde ein SyntaxError ausgelöst. Prettier 2.3 formatiert diese Fälle fehlerfrei. Beispiele für problematische Bereiche werden unten gezeigt:

declare export function graphql<Props, Variables, Component: React$ComponentType<Props>>
  //                            ^^^^^ range 1
  (query: GQLDocument, config?: Config<Props, QueryConfigOptions<Variables>>):
  (Component: Component) => React$ComponentType<$Diff<React$ElementConfig<Component>, {
    data: Object|void,
    //           ^^^^ range 2
    mutate: Function|void
  }>>

Unterstützung für den indizierten Zugriffstyp von Flow (#10594 von @gkz)

// Input
const x: Obj['foo'] = 1;

// Prettier 2.2
// Error: unsupported node type "IndexedAccessType"

// Prettier 2.3
const x: Obj["foo"] = 1;

Unterstützung für Flows indizierte Zugriffstypen (#10788 von @gkz)

// Input
type T = Obj?.['foo'];

// Prettier 2.2
// Error: unsupported node type "OptionalIndexedAccessType"

// Prettier 2.3
type T = Obj?.['foo'];

JSON

Verwenden Sie keine typografischen Anführungszeichen für JSON5 mit `--quote-props=preserve` (#10323 von @thorn0)

Wenn die Option quoteProps auf preserve und singleQuotes auf false (Standard) gesetzt ist, werden doppelte Anführungszeichen immer für das Ausgeben von Zeichenketten verwendet, auch in Situationen wie "bla\"bla". Dies ermöglicht effektiv die Verwendung von --parser json5 für "JSON mit Kommentaren und nachgestellten Kommas".

// Input
{
  "char": "\"",
}

// Prettier 2.2
{
  "char": '"',
}

// Prettier 2.3
{
  "char": "\"",
}

Strengerer JSON-Parser (#10346, #10443, #10456, #10434 von @fisker)

Prettier verwendet intern einen JavaScript-Expression-Parser, um JSON zu parsen. Deshalb waren die Parser json und json5 sehr nachsichtig und erlaubten alle Arten von JavaScript-Ausdrücken. Jetzt sind sie viel strenger, obwohl einige einfache nicht-standardkonforme Syntax weiterhin erlaubt ist (z. B. wird JSON6 unterstützt, außer bei mehreren Minuszeichen: ----123).

// Input
[1, 2, 1 + 2]

// Prettier 2.2
[1, 2, 1 + 2]

// Prettier 2.3
SyntaxError: BinaryExpression is not allowed in JSON. (1:8)
> 1 | [1, 2, 1 + 2]
    |        ^

Fehlermeldungen verbessern (#10433 von @fisker)

// Input
{key: "foo" + "bar"}

// Prettier 2.2 (--parser=json-stringify)
SyntaxError: BinaryExpression is not allowed in JSON. (1:7)
> 1 | {key: "foo" + "bar"}
    |       ^

// Prettier 2.3
SyntaxError: BinaryExpression is not allowed in JSON. (1:7)
> 1 | {key: "foo" + "bar"}
    |       ^^^^^^^^^^^^^

Syntaxfehler bei der JSON-Bereichsformatierung beheben (#10497 von @fisker)

// Input
[{ a: 1.0000}, {"b":   2.0000 }]
//                 ^^^^^^^^^^^ range

// Prettier 2.2
SyntaxError: Unexpected token (1:4)
> 1 | "b":   2.0000
    |    ^

// Prettier 2.3
[{ a: 1.0000}, { "b": 2.0 }]

CSS

Korrektur absoluter Pfade in benutzerdefinierten CSS `-custom-url()`-Aufrufen (#9966 von @vjeux)

Der CSS-Parser interpretiert dies als ["division", "absolute/path"] statt als ein einzelnes "/absolute/path"-Token, es sei denn, es handelt sich um einen url()-Aufruf. Da wir nach Divisionen ein Leerzeichen einfügen, entsteht ein falscher Pfad. Die Lösung bestand darin, das Leerzeichen wegzulassen, wenn die Division das erste Token eines Aufrufs ist – was hoffentlich sicher sein sollte.

/* Input */
-custom-url(/absolute/path)

/* Prettier 2.2 */
-custom-url(/ absolute/path)

/* Prettier 2.3 */
-custom-url(/absolute/path)

Verhindern, dass `@keyframes`-Parameter als Less-Variable interpretiert werden (#10773 von @tmazeika)

/* Input */
@keyframes :global(spin) {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Prettier 2.2 */
@keyframes: global(spin){
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
};

/* Prettier 2.3 */
@keyframes :global(spin) {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

SCSS

Korrektur kaputter Kommentare innerhalb von Klammern (#9710 von @fisker)

// Input
.simplification {
  foo: (
    calc() // not a comment anymore
  );
}

// Prettier 2.2
.simplification {
  foo: (calc() // not a comment anymore);
}

// Prettier 2.3
.simplification {
  foo: (
    calc() // not a comment anymore
  );
}

Korrektur von Maps mit Listen oder Maps als Keys (#10005 von @fisker)

// Input
$map: (
  ('my list'): 'hello world',
);

// Prettier 2.2
TypeError: Cannot read property 'length' of undefined

// Prettier 2.3
$map: (
  ("my list"): "hello world",
);

Ember / Handlebars

Erhalt von Tilde-Kommentaren (#9082 von @kangax, @fisker)

{{!-- Input --}}
{{~! Comment }}
{{! Comment ~}}
{{~! Comment ~}}

{{!-- Prettier 2.2 --}}
{{! Comment }}
{{! Comment }}
{{! Comment }}

{{!-- Prettier 2.3 --}}
{{~! Comment }}
{{! Comment ~}}
{{~! Comment ~}}

Hinzufügen eines whitespace-sensitiven Modus (#9885 von @dcyriller)

--html-whitespace-sensitivity strict

{{!-- Input --}}
<span>123 {{mustache}}</span>
<span>
123 {{mustache}}</span>
<span>123 {{mustache}}
</span>
<span>
123 {{mustache}}
</span>

{{!-- Prettier 2.2 --}}
<span>
  123 {{mustache}}
</span>
<span>
  123 {{mustache}}
</span>
<span>
  123 {{mustache}}
</span>
<span>
  123 {{mustache}}
</span>

{{!-- Prettier 2.3 --}}
<span>123 {{mustache}}</span>
<span>
  123
  {{mustache}}</span>
<span>123
  {{mustache}}
</span>
<span>
  123
  {{mustache}}
</span>

Ausgabe des finalen `blockParam` in eigener Zeile (#9978 von @dcyriller)

{{!-- Input --}}
<MyComponent @prop={{true}} @prop2={{true}} @prop3={{true}} @prop4={{true}} as |thing|></MyComponent>
{{#block param hashKey=hashValue hashKey=hashValue hashKey=hashValue as |blockParam|}}
  Hello
{{/block}}

{{!-- Prettier 2.2 --}}
<MyComponent
  @prop={{true}}
  @prop2={{true}}
  @prop3={{true}}
  @prop4={{true}} as |thing|
/>
{{#block
  param
  hashKey=hashValue
  hashKey=hashValue
  hashKey=hashValue as |blockParam|
}}
  Hello
{{/block}}

{{!-- Prettier 2.3 --}}
<MyComponent
  @prop={{true}}
  @prop2={{true}}
  @prop3={{true}}
  @prop4={{true}}
  as |thing|
/>
{{#block
  param
  hashKey=hashValue
  hashKey=hashValue
  hashKey=hashValue
  as |blockParam|
}}
  Hello
{{/block}}

Korrektur der Attributformatierung (#10145 von @thorn0)

Korrektur des Escapings von {{ in Attributen und Texten
Korrektur der Wahl zwischen ' und " für Attribute mit Interpolationen
Behebung des Bugs mit [object Object] in class-Attributen
Einführung einer einfachen Formatierung für class-Attribute, ähnlich der Prettier-Formatierung in HTML vor v2.3.0

{{!-- Input --}}
<div class="
foo"></div>
<div bar='"{{expr}}"'></div>
<div baz="\{{ non-expression }}"></div>

{{!-- Prettier 2.2 --}}
<div class="[object Object],foo"></div>
<div bar=""{{expr}}""></div>
<div baz="{{ non-expression }}"></div>

{{!-- Prettier 2.3 --}}
<div class="foo"></div>
<div bar='"{{expr}}"'></div>
<div baz="\{{ non-expression }}"></div>

Aufteilung von Textinhalten über mehrere Zeilen (#10179 von @dcyriller)

{{!-- Input --}}
<div>
  A long enough string to trigger a line break that would prevent wrapping more and more.
</div>

{{!-- Prettier 2.2 --}}
<div>
  A long enough string to trigger a line break that would prevent wrapping more and more.
</div>

{{!-- Prettier 2.3 --}}
<div>
  A long enough string to trigger a line break that would prevent wrapping more
  and more.
</div>

Erhalt numerischer Zeichenreferenzen (#10550 von @rwjblue und @thorn0)

{{! Input }}
<span class="stampFont" style="font-family: 'stampfont'">&#xf000;</span>

{{! Prettier 2.2 }}
<span class="stampFont" style="font-family: 'stampfont'"></span>

{{! Prettier 2.3 }}
<span class="stampFont" style="font-family: 'stampfont'">&#xf000;</span>

Vermeidung von Zeilenumbrüchen nach öffnender Mustache und Pfad (#10586 von @dcyriller)

{{!-- Input --}}
<GlimmerComponent
  @errors={{or this.aVeryLongProperty (and this.aProperty (v-get bike "number" "message"))}}
  data-test-beneficiary-account-number
/>
<GlimmerComponent
  @progress={{aPropertyEngdingAfterEightiethColumnToHighlightAWeirdClosingParenIssue}}
/>

{{!-- Prettier 2.2 --}}
<GlimmerComponent
  @errors={{
    or
    this.aVeryLongProperty
    (and this.aProperty (v-get bike "number" "message"))
  }}
  data-test-beneficiary-account-number
/>
<GlimmerComponent
  @progress={{
    aPropertyEngdingAfterEightiethColumnToHighlightAWeirdClosingParenIssue
  }}
/>

{{!-- Prettier 2.3 --}}
<GlimmerComponent
  @errors={{or
    this.aLongProperty
    (and this.aProperty (v-get bike "number" "message"))
  }}
  data-test-beneficiary-account-number
/>
<GlimmerComponent
  @progress={{aPropertyEngdingAfterEightiethColumnToHighlightAWeirdClosingParenIssue}}
/>

GraphQL

Korrektur fehlenden Leerzeichens nach Schlüsselwort in anonymen Operationen (#10689 von @patriscus)

# Input
query ($unnamed: String) {
  id
}

# Prettier 2.2
query($unnamed: String) {
  id
}

# Prettier 2.3
query ($unnamed: String) {
  id
}

Markdown

Korrektur überflüssiger Zeilenumbrüche am Ende von JavaScript-Codeblöcken mit String-Literalen (#9736 von @fisker)

<!-- Input -->
Markdown

```js
"· "
```

<!-- Prettier 2.2 -->
Markdown

```js
"· ";

```

<!-- Prettier 2.3 -->
Markdown

```js
"· ";
```

Korrektur der Formatierung leerer Frontmatter-Bereiche (#9791 von @fisker)

<!-- Input -->
---
---

# Title

a|b|c|
|:--|:-:|--:|
|d|e|f|

---

text

<!-- Prettier 2.2 -->
---
---
# Title

a|b|c|
|:--|:-:|--:|
|d|e|f|
---

text

<!-- Prettier 2.3 -->
---
---

# Title

| a   |  b  |   c |
| :-- | :-: | --: |
| d   |  e  |   f |

---

text

Unterstützung für YAML-Dokumentendmarker in Front Matter (#9878 von @michaelbeaumont)

Fügt die Möglichkeit hinzu, das Ende des Front Matter mit ... zu begrenzen.

<!-- Input -->
---
title: Hello
slug: home
...

Markdown

<!-- Prettier 2.2 -->
---

title: Hello
slug: home
...

Markdown

<!-- Prettier 2.3 -->
---
title: Hello
slug: home
...

Markdown

YAML

Behebt SyntaxError, der fälschlicherweise bei Ankern gefolgt von Leerzeilen ausgelöst wurde (#10516 von @eemeli & @thorn0)

Prettier konnte dieses gültige YAML nicht parsen. Dank an Eemeli Aro für die Behebung dieses Fehlers im zugrundeliegenden Parser.

# Input
key1: &default

  subkey1: value1

key2:
  <<: *default

# Prettier 2.2
SyntaxError: Nested mappings are not allowed in compact mappings (1:7)

# Prettier 2.3
key1: &default
  subkey1: value1

key2:
  <<: *default

API

Behandelt `.prettierrc` als YAML beim Formatieren (#8105 von @fisker)

Die .prettierrc-Datei kann in JSON oder YAML geschrieben werden. Bisher wurde beim Formatieren durch Prettier der Parser standardmäßig als json angenommen, was zu einem SyntaxError führte, wenn der Inhalt YAML war. Jetzt wird sie als YAML-Datei behandelt. Handelt es sich jedoch um JSON, wird sie als JSON formatiert (nicht als JSON-ähnliches YAML).

Verwendet Arrays statt `concat` (#9733 von @fisker, @thorn0)

Um den Code der AST-Printer zu vereinfachen, wurde die Datenstruktur für den Verkettungsbefehl von { type: 'concat', parts: Doc[] } auf Doc[] geändert. Das alte Format ist veraltet, wird aber aus Kompatibilitätsgründen weiterhin unterstützt. Die Funktionen doc.builders.concat und einige andere Builder-Funktionen werden es bis zur nächsten Major-Version von Prettier weiterverwenden.

Wenn Sie Plug-in-Autor sind, betrifft Sie diese Änderung nur, wenn Ihr Plug-in zusammengesetzte Docs untersucht oder modifiziert. In diesem Fall passen Sie bitte Ihren Code an, um das neue Format zu unterstützen. Es gibt eine geringe Wahrscheinlichkeit, dass diese Änderung Probleme verursacht, insbesondere wenn ein Plug-in ein anderes Plug-in aufruft, um eine eingebettete Sprache zu formatieren, und dann das zurückgegebene Doc untersucht. Es gibt jedoch keinen erkennbaren Grund, warum Plug-ins dies tun sollten.

Um concat(…)-Aufrufe in Ihren Plug-ins zu ersetzen, können Sie den automatischen Fix über diese ESLint-Regel versuchen: prettier-doc/no-concat.

// Prettier 2.2
myDoc = group(concat(["foo", line, "bar"]));

// Prettier 2.3
myDoc = group(["foo", line, "bar"]);

Behebt den `lineSuffixBoundary`-IR-Befehl (#10122 von @thorn0)

Es gab einen Fehler in der Implementierung des lineSuffixBoundary-Befehls, der seine Nützlichkeit erheblich einschränkte: Der Druckalgorithmus erkannte ihn nicht korrekt als potenziellen Zeilenumbruch. Jetzt, da der Fehler behoben ist, empfehlen wir Plug-in-Autoren, diesen Befehl erneut zu testen, um das Drucken von nachgestellten Kommentaren zu vereinfachen.

// Input
group([
  "let foo = [",
  indent([
    softline,
    [lineSuffixBoundary, "item1,"],
    line,
    [lineSuffixBoundary, "item2,", lineSuffix(" // comment")],
    line,
    [lineSuffixBoundary, "item3"],
  ]),
  softline,
  "];",
])

// Prettier 2.2
let foo = [item1, item2,  // comment
  item3];

// Prettier 2.3
let foo = [
  item1,
  item2, // comment
  item3
];

Fügt den `indentIfBreak`-IR-Befehl hinzu (#10221 von @thorn)

indentIfBreak(doc, { groupId }) ist eine optimierte Version von ifBreak(indent(doc), doc, { groupId }).

Vereinfachter `print`-Callback (#10557 von @fisker)

Der dritte Parameter der print-Methode von Plugin-Druckern (der print-Callback) wurde aktualisiert. Sein erster Parameter kann nun ein String oder ein Array von Strings sein.

Um den aktuellen Knoten auszugeben, rufen Sie print ohne Argumente auf:

 function print(path, options, print) {
   const parts = [];
   path.each((childPath) => {
-    parts.push(print(childPath));
+    parts.push(print());
   }, "children");
   return parts;
 }

Um eine Eigenschaft des aktuellen Knotens auszugeben, verwenden Sie "property" oder ["property"]:

 function print(path, options, print) {
-  return path.call(print, "property");
+  return print("property");
 }

Um eine Untereigenschaft des aktuellen Knotens auszugeben, verwenden Sie ["property1", "property2"]:

 function print(path, options, print) {
   // print `node.child.child`
-  return path.call(print, "child", "child");
+  return print(["child", "child"]);
 }

Siehe auch ein Beispiel in der Dokumentation.

CLI

CLI-Option hinzugefügt, um Fehler bei nicht übereinstimmendem Muster zu verhindern (#10058 von @daronmcintosh)

Die Prettier-CLI zeigt nun keinen Fehler mehr an, wenn keine Dateien mit dem als Eingabe übergebenen Glob-Muster übereinstimmen.

# Prettier 2.2
$ npx prettier --check "prettier/docs/*.yaml"
Checking formatting...
[error] No files matching the pattern were found: "prettier/docs/*.yaml".
All matched files use Prettier code style!

# Prettier 2.3
$ npx prettier --check --no-error-on-unmatched-pattern "prettier/docs/*.yaml"
Checking formatting...
All matched files use Prettier code style!

CLI-Flag für das Debugging von Kommentar-Anhängeproblemen hinzugefügt (#10124 von @thorn0)

Ein neues --debug-print-comments CLI-Flag und entsprechende Funktionalität für den Playground.

Rundlauf-fähiges `--debug-print-doc` (#10169, #10177 von @thorn0)

Die Idee ist, die Ausgabe von --debug-print-doc näher an tatsächlichen Code zur Erzeugung von Docs (Prettiers Zwischendarstellung) zu bringen. Im Idealfall sollte es möglich sein, dass es ohne Änderung nach dem Kopieren in eine JS-Datei funktioniert. Dieses Ideal wurde wahrscheinlich durch diesen PR noch nicht erreicht, aber es kommt ziemlich nahe. Dadurch werden --debug-print-doc und der entsprechende Teil des Playgrounds etwas nützlicher.

Fehlermeldung ausgeben, wenn `--find-config-path` keine Konfigurationsdatei finden kann (#10208 von @fisker)

# Prettier 2.2
$ prettier --find-config-path /prettier.js
# Silently failed

# Prettier 2.3
$ prettier --find-config-path /prettier.js
[error] Can not find configure file for "/prettier.js"

Formatierte lange Dateinamen von Formatierungsdateien bereinigen (#10217 von @fisker)

# Prettier 2.2
$ prettier tests/flow-repo/config_module_system_node_resolve_dirname --check
Checking formatting...
tests\flow-repo\config_module_system_node_resolve_dirname\custom_resolve_dir\tes
tests\flow-repo\config_module_system_node_resolve_dirname\custom_resolve_dir\tes
tests\flow-repo\config_module_system_node_resolve_dirname\subdir\custom_resolve_
All matched files use Prettier code style!

# Prettier 2.3
$ prettier tests/flow-repo/config_module_system_node_resolve_dirname --check
Checking formatting...
All matched files use Prettier code style!

Dateipfade, die spezielle Wörter wie `constructor` enthalten, nicht überspringen (#10256 von @ashlkv)

Verzeichnisse, deren Namen zufällig mit den Eigenschaften von Object.prototype übereinstimmten, wurden von der Prettier-CLI ignoriert, aufgrund eines klassischen Fehlers (eingeführt in Prettier 2.0.0), bei dem Objekteigenschaften nicht auf Eigentümerschaft geprüft wurden.

# Prettier 2.2
$ prettier "js/constructor/*.js" --write
[error] No matching files. Patterns: js/constructor/*.js

# Prettier 2.3
$ prettier "js/constructor/*.js" --write
js/constructor/test.js 42ms

Höhepunkte​

JavaScript​

Zuweisungen konsistenter formatieren (#10222, #10643, #10672 von @thorn0; #10158 von @sosukesuzuki)​

Zeilenumbrüche bei kurzen Objekteigenschaften vermeiden (#10335 von @thorn0)​

Ember / Handlebars​

Handlebars-Unterstützung von Alpha- auf Release-Status heben (#10290 von @dcyriller & @thorn0)​

Verbesserungen an der Formatierung​

JavaScript​

Verbesserte Formatierung von Curry-Pfeilfunktionen (#9992, #10543 von @sosukesuzuki & @thorn0)​

Bessere Formatierung für React-Hooks-Aufrufe (#10238 von @sosukesuzuki)​

Verbesserte visuelle Trennung zwischen Header und Body bei Klassen mit mehrzeiligen Headern (#10085 von @sosukesuzuki)​

Kompakte Formatierung von Arrays mit reinen Zahlen (#10106, #10160 von @thorn0)​

Verbesserte Formatierung für verschachtelte await-Ausdrücke in Kopfbereichen von Member- und Aufrufausdrücken (#10342 von @thorn0)​

Verbesserte Formatierung für do-Ausdrücke in Funktionsaufrufen (#10693 von @sosukesuzuki)​

Konsistente Einrückung für bedingte Operatoren (#10187, #10266 von @sosukesuzuki)​

HTML​

Präfixbasierte Mehrzeilenformatierung für das class-Attribut (#7865 von @thorn0)​

Weitere Änderungen​

JavaScript​

Behebung von Instabilität bei mehreren Kommentaren in derselben Zeile (#9672 von @fisker)​

Knoten nicht formatieren, die kurz vor rangeStart enden (#9704 von @fisker)​

Korrektur von Kommentaren innerhalb des JSX-End-Tags (#9711 von @fisker)​

Behebung inkonsistenter Erkennung von Sprachkommentaren (#9743 von @fisker)​

Korrektur eines zusätzlichen Semikolons bei ignorierten Direktiven (#9850 von @fisker)​

Behebung von instabiler JSX-Formatierung mit U+3000 (#9866 von @fisker)​

Behebung eines Fehlers bei Ausdrücken wie a(b => c => function (){}) (#10278 von @thorn0)​

Verbesserte Formatierung für Inline-Dekoratoren (#10296 von @fisker)​

Behebung des ASI-Schutzes für private Felder (#10334 von @thorn0)​

Unterstützung des Module-Blocks-Vorschlags (#10417 von @sosukesuzuki, @thorn0)​

Fehlende Klammern für yield in Pipelines korrigieren (#10446 von @fisker)​

Bessere Fehlerbehandlung bei Babel (#10495 von @fisker, #9787 von @sosukesuzuki, #10065, #10322 von @thorn0)​

Letztes Argument-Anhängen bei Zahlen-Arrays vermeiden (#10517 von @thorn0)​

Bessere Erkennung von AMD define (#10528 von @thorn0)​

Doppelte prettier-ignore-Kommentare korrigieren (#10666 von @fisker)​

Behandlung bedingter Gruppen in mapDoc (#10695 von @thorn0)​

Vermeidung von Argument-Expansion, die zu fehlerhaftem Code führt (#10712 von @thorn0)​

Fehlende Klammern um async in for-of korrigieren (#10781 von @fisker)​

Unterstützung für async do-Expressions-Proposal (#10813 von @sosukesuzuki)​

TypeScript​

Fehlende Kommentare in MethodDefinition korrigieren (#9872 von @fisker)​

Behebt unnötige Zeilenumbrüche bei Parametern von Methodentyp-Deklarationen (#10024 von @sosukesuzuki, #10357 von @thorn0)​

Fügt nachgestellte Kommas bei Typparametern ein (#10109 von @sosukesuzuki, #10353 von @thorn0)​

Ermöglicht kompakte Darstellung von Argumenten bei Pfeilfunktionen mit Rückgabetyp-Annotationen (#10316 von @thorn0)​

Korrigiert Klammern für Non-Null Assertions (#10337 von @thorn0)​

Rückt Typ-Assertions in Kopfbereichen von Member- und Aufrufausdrücken ein (#10341 von @thorn0)​

Unterstützung für das intrinsic-Schlüsselwort (#10390 von @sosukesuzuki)​

Unterstützung für TypeScript 4.2 (#10418, #10466, #10546, #10589 von @sosukesuzuki)​

abstract Construct Signatures​

Type-Imports in require-Deklarationen​

Korrigiert falsch platzierte Kommentare in Unions und Schnittmengen (#10457 von @thorn0)​

Druckt keine Klammern um geschachtelte Typ-Assertions (#10702 von @thorn0)​

Unterstützt TypeScript 4.3 via babel-ts (#10811 von @sosukesuzuki)​

override-Modifikatoren in Klassenelementen​

Statische Indexsignaturen ([key: KeyType]: ValueType) in Klassen​

get / set in Typdeklarationen​

Flow​

Fehlendes Semikolon in declare export * from … beheben (#9767 von @fisker)​

Unterstützung für this-Typannotationen in Funktionen via babel-flow (#10397 von @sosukesuzuki)​

Probleme bei der Bereichsformatierung beheben (#10505 von @thorn0)​

Unterstützung für den indizierten Zugriffstyp von Flow (#10594 von @gkz)​

Unterstützung für Flows indizierte Zugriffstypen (#10788 von @gkz)​

JSON​

Verwenden Sie keine typografischen Anführungszeichen für JSON5 mit --quote-props=preserve (#10323 von @thorn0)​

Strengerer JSON-Parser (#10346, #10443, #10456, #10434 von @fisker)​

Fehlermeldungen verbessern (#10433 von @fisker)​

Syntaxfehler bei der JSON-Bereichsformatierung beheben (#10497 von @fisker)​

CSS​

Korrektur absoluter Pfade in benutzerdefinierten CSS -custom-url()-Aufrufen (#9966 von @vjeux)​

Verhindern, dass @keyframes-Parameter als Less-Variable interpretiert werden (#10773 von @tmazeika)​

SCSS​

Korrektur kaputter Kommentare innerhalb von Klammern (#9710 von @fisker)​

Korrektur von Maps mit Listen oder Maps als Keys (#10005 von @fisker)​

Ember / Handlebars​

Erhalt von Tilde-Kommentaren (#9082 von @kangax, @fisker)​

Hinzufügen eines whitespace-sensitiven Modus (#9885 von @dcyriller)​

Ausgabe des finalen blockParam in eigener Zeile (#9978 von @dcyriller)​

Korrektur der Attributformatierung (#10145 von @thorn0)​

Aufteilung von Textinhalten über mehrere Zeilen (#10179 von @dcyriller)​

Erhalt numerischer Zeichenreferenzen (#10550 von @rwjblue und @thorn0)​

Vermeidung von Zeilenumbrüchen nach öffnender Mustache und Pfad (#10586 von @dcyriller)​

Höhepunkte

JavaScript

Zuweisungen konsistenter formatieren (#10222, #10643, #10672 von @thorn0; #10158 von @sosukesuzuki)

Zeilenumbrüche bei kurzen Objekteigenschaften vermeiden (#10335 von @thorn0)

Ember / Handlebars

Handlebars-Unterstützung von Alpha- auf Release-Status heben (#10290 von @dcyriller & @thorn0)

Verbesserungen an der Formatierung

JavaScript

Verbesserte Formatierung von Curry-Pfeilfunktionen (#9992, #10543 von @sosukesuzuki & @thorn0)

Bessere Formatierung für React-Hooks-Aufrufe (#10238 von @sosukesuzuki)

Verbesserte visuelle Trennung zwischen Header und Body bei Klassen mit mehrzeiligen Headern (#10085 von @sosukesuzuki)

Kompakte Formatierung von Arrays mit reinen Zahlen (#10106, #10160 von @thorn0)

Verbesserte Formatierung für verschachtelte await-Ausdrücke in Kopfbereichen von Member- und Aufrufausdrücken (#10342 von @thorn0)

Verbesserte Formatierung für `do`-Ausdrücke in Funktionsaufrufen (#10693 von @sosukesuzuki)

Konsistente Einrückung für bedingte Operatoren (#10187, #10266 von @sosukesuzuki)

HTML

Präfixbasierte Mehrzeilenformatierung für das `class`-Attribut (#7865 von @thorn0)

Weitere Änderungen

JavaScript

Behebung von Instabilität bei mehreren Kommentaren in derselben Zeile (#9672 von @fisker)

Knoten nicht formatieren, die kurz vor `rangeStart` enden (#9704 von @fisker)

Korrektur von Kommentaren innerhalb des JSX-End-Tags (#9711 von @fisker)

Behebung inkonsistenter Erkennung von Sprachkommentaren (#9743 von @fisker)

Korrektur eines zusätzlichen Semikolons bei ignorierten Direktiven (#9850 von @fisker)

Behebung von instabiler JSX-Formatierung mit U+3000 (#9866 von @fisker)

Behebung eines Fehlers bei Ausdrücken wie `a(b => c => function (){})` (#10278 von @thorn0)

Verbesserte Formatierung für Inline-Dekoratoren (#10296 von @fisker)

Behebung des ASI-Schutzes für private Felder (#10334 von @thorn0)

Unterstützung des Module-Blocks-Vorschlags (#10417 von @sosukesuzuki, @thorn0)

Fehlende Klammern für `yield` in Pipelines korrigieren (#10446 von @fisker)

Bessere Fehlerbehandlung bei Babel (#10495 von @fisker, #9787 von @sosukesuzuki, #10065, #10322 von @thorn0)

Letztes Argument-Anhängen bei Zahlen-Arrays vermeiden (#10517 von @thorn0)

Bessere Erkennung von AMD `define` (#10528 von @thorn0)

Doppelte `prettier-ignore`-Kommentare korrigieren (#10666 von @fisker)

Behandlung bedingter Gruppen in `mapDoc` (#10695 von @thorn0)

Vermeidung von Argument-Expansion, die zu fehlerhaftem Code führt (#10712 von @thorn0)

Fehlende Klammern um `async` in `for-of` korrigieren (#10781 von @fisker)

Unterstützung für `async do`-Expressions-Proposal (#10813 von @sosukesuzuki)

TypeScript

Fehlende Kommentare in `MethodDefinition` korrigieren (#9872 von @fisker)

Behebt unnötige Zeilenumbrüche bei Parametern von Methodentyp-Deklarationen (#10024 von @sosukesuzuki, #10357 von @thorn0)

Fügt nachgestellte Kommas bei Typparametern ein (#10109 von @sosukesuzuki, #10353 von @thorn0)

Ermöglicht kompakte Darstellung von Argumenten bei Pfeilfunktionen mit Rückgabetyp-Annotationen (#10316 von @thorn0)

Korrigiert Klammern für Non-Null Assertions (#10337 von @thorn0)

Rückt Typ-Assertions in Kopfbereichen von Member- und Aufrufausdrücken ein (#10341 von @thorn0)

Unterstützung für das intrinsic-Schlüsselwort (#10390 von @sosukesuzuki)

Unterstützung für TypeScript 4.2 (#10418, #10466, #10546, #10589 von @sosukesuzuki)

`abstract` Construct Signatures

Type-Imports in require-Deklarationen

Korrigiert falsch platzierte Kommentare in Unions und Schnittmengen (#10457 von @thorn0)

Druckt keine Klammern um geschachtelte Typ-Assertions (#10702 von @thorn0)

Unterstützt TypeScript 4.3 via `babel-ts` (#10811 von @sosukesuzuki)

`override`-Modifikatoren in Klassenelementen

Statische Indexsignaturen (`[key: KeyType]: ValueType`) in Klassen

`get` / `set` in Typdeklarationen

Flow

Fehlendes Semikolon in `declare export * from …` beheben (#9767 von @fisker)

Unterstützung für `this`-Typannotationen in Funktionen via `babel-flow` (#10397 von @sosukesuzuki)

Probleme bei der Bereichsformatierung beheben (#10505 von @thorn0)

Unterstützung für den indizierten Zugriffstyp von Flow (#10594 von @gkz)

Unterstützung für Flows indizierte Zugriffstypen (#10788 von @gkz)

JSON

Verwenden Sie keine typografischen Anführungszeichen für JSON5 mit `--quote-props=preserve` (#10323 von @thorn0)

Strengerer JSON-Parser (#10346, #10443, #10456, #10434 von @fisker)

Fehlermeldungen verbessern (#10433 von @fisker)

Syntaxfehler bei der JSON-Bereichsformatierung beheben (#10497 von @fisker)

CSS

Korrektur absoluter Pfade in benutzerdefinierten CSS `-custom-url()`-Aufrufen (#9966 von @vjeux)

Verhindern, dass `@keyframes`-Parameter als Less-Variable interpretiert werden (#10773 von @tmazeika)

SCSS

Korrektur kaputter Kommentare innerhalb von Klammern (#9710 von @fisker)

Korrektur von Maps mit Listen oder Maps als Keys (#10005 von @fisker)

Ember / Handlebars

Erhalt von Tilde-Kommentaren (#9082 von @kangax, @fisker)

Hinzufügen eines whitespace-sensitiven Modus (#9885 von @dcyriller)

Ausgabe des finalen `blockParam` in eigener Zeile (#9978 von @dcyriller)

Korrektur der Attributformatierung (#10145 von @thorn0)

Aufteilung von Textinhalten über mehrere Zeilen (#10179 von @dcyriller)

Erhalt numerischer Zeichenreferenzen (#10550 von @rwjblue und @thorn0)

Vermeidung von Zeilenumbrüchen nach öffnender Mustache und Pfad (#10586 von @dcyriller)