Prettier 1.15: Unterstützung für HTML, Vue, Angular und MDX

7. November 2018 · 30 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 fügt Unterstützung für HTML, Vue, Angular und MDX hinzu. Es respektiert außerdem Dekorator-Positionen, fügt eine Option für einfache Anführungszeichen in JSX hinzu, ermöglicht Parser-Erkennung via Shebang, unterstützt mehrere neue Syntax-Features und enthält kleinere Formatierungsanpassungen.

Höhepunkte

HTML/Vue/Angular

Unterstützung für HTML, Vue und Angular (#5259 by @ikatyang, #4753 by @evilebottnawi, #2083 by @azz)

Prettier kann jetzt HTML-, Vue- und Angular-Dateien formatieren! 🎉

Wir verwenden angular-html-parser, einen HTML-Parser extrahiert aus Angular, um diese HTML- und HTML-Template-Dateien zu parsen. Dadurch sollte es dank des Angular-Teams hochgradig kompatibel mit dem HTML-Standard sein.

Einige Highlights:

Whitespace-sensitives Formatieren

Wie Ihnen bei täglicher HTML-Arbeit aufgefallen sein dürfte, erzeugen diese beiden Fälle unterschiedliche Ergebnisse:

	html	output
with spaces	`1<b> 2 </b>3`	1 2 3
without spaces	`1<b>2</b>3`	123

Dies geschieht, weil Leerzeichen in Inline-Elementen signifikant sind.

Aus diesem Grund können wir nicht sicher

<a href="https://prettier.io/">Prettier is an opinionated code formatter.</a>

<a href="https://prettier.io/">
  Prettier is an opinionated code formatter.
</a>

formatieren, da dies die Darstellung im Browser verändern könnte.

Statt Ihren Code zu brechen oder nichts zu tun, führen wir whitespace-sensitives Formatieren ein, das:

den Standardwert der CSS-display-Eigenschaft jedes Elements verwendet, um signifikante Leerzeichen zu identifizieren,
und Tags so umbricht, dass signifikante Leerzeichen weder hinzugefügt noch entfernt werden.

Beispiel:

<!-- <span> is an inline element, <div> is a block element -->

<!-- input -->
<span class="dolorum atque aspernatur">Est molestiae sunt facilis qui rem.</span>
<div class="voluptatem architecto at">Architecto rerum architecto incidunt sint.</div>

<!-- output -->
<span class="dolorum atque aspernatur"
  >Est molestiae sunt facilis qui rem.</span
>
<div class="voluptatem architecto at">
  Architecto rerum architecto incidunt sint.
</div>

Wir erlauben auch spezielle Kommentare (z.B. ), um Prettier die Formatierung von Elementen mitzuteilen, da sich die CSS-Darstellung ändern kann:

<!-- input -->
<!-- display: block -->
<span class="dolorum atque aspernatur">Est molestiae sunt facilis qui rem.</span>

<!-- output -->
<!-- display: block -->
<span class="dolorum atque aspernatur">
  Est molestiae sunt facilis qui rem.
</span>

Es gibt auch eine Option für globale Whitespace-Sensitivität, falls maximale Sicherheit gewünscht ist oder Leerzeichen irrelevant sind:

--html-whitespace-sensitivity (Standard: css)

css - Respektiert den Standardwert der CSS-display-Eigenschaft.
strict - Alle Leerzeichen werden als signifikant betrachtet.
ignore - Alle Leerzeichen werden als irrelevant betrachtet.

Automatische Parser-Erkennung

Prettier nutzt Dateinamen, um den zu verwendenden Parser abzuleiten. Hier die Standardmuster für HTML, Vue und Angular:

*.html: --parser html
*.component.html: --parser angular
*.vue: --parser vue

Stellen Sie sicher, dass Ihr Dateiname zum richtigen Parser passt (besonders für Angular-Nutzer). Falls nicht, müssen Sie den Parser manuell im overrides-Bereich festlegen.

Beachten Sie, dass frameworkspezifische Formatierung bei --parser html nicht aktiviert wird.

HTML-Template-Literale in JavaScript

Dieses Release unterstützt auch das html-Template-Tag (oder einen "Tag"-Kommentar mit HTML):

html`code`
/* HTML */ `code`

// input
const foo = html`<div class="voluptatem architecto at">Architecto rerum ${interpolation} architecto incidunt sint.</div>`;

// output
const foo = html`
  <div class="voluptatem architecto at">
    Architecto rerum ${interpolation} architecto incidunt sint.
  </div>
`;

Vue-Formatierung

Folgende Vue-spezifische Syntaxstrukturen werden unterstützt:

Interpolation
- {{ something }}
Attribute
- v-something
- :something
- @something
- v-for
- slot-scope

Angular-Formatierung

Die folgenden Angular-spezifischen Syntaxstrukturen werden unterstützt:

Interpolation
- {{ something }}
Attribute
- (something)
- [something]
- [(something)]
- *something
Inline-Templates
- @Component({ template: `<div>Hello World</div>` })

MDX

MDX-Unterstützung (#4975 by @ikatyang)

MDX ist eine Markdown-Erweiterung, die JSX zur Erstellung von Dokumentation ermöglicht. Prettier formatiert nun sowohl Markdown- als auch JSX-Bestandteile in MDX-Dateien!

<!-- Input -->

import {
  colors } from
   './theme'
import     Palette from     './components/palette'

#      Colors

<Palette colors={
      colors}
  />

<!-- Output -->

import { colors } from "./theme";
import Palette from "./components/palette";

# Colors

<Palette colors={colors} />

JavaScript

Vereinfachung verschachtelter Ternär-Operatoren (#5039 by @suchipi, #5272 by @duailibe, #5333 by @ikatyang)

Bisher wurden verschachtelte Ternär-Operatoren stets eingerückt, was bei tiefen Verschachtelungen zu unübersichtlichem Code führte. Ähnlich der Formatierung von if..else if..else-Blöcken vereinfachen wir nun die Else-Zweige verschachtelter Ternär-Operatoren.

// Input
const example1 =
    someValue === 'a' ? 'hello world, branch a'
  : someValue === 'b' ? 'hello world, branch a && b'
  : someValue === 'c' ? 'hello world, branch a && b && c'
  : someValue === 'd' ? 'hello world, branch a && b && c && d'
  : null;

const example2 =
  someValue === 'a'
    ? someValue === 'b'
      ? someValue === 'c'
        ? 'hello world, branch a && b && c'
        : 'hello world, branch a && b && !c'
      : 'hello world, branch a && !b'
    : null;

// Output (Prettier 1.14)
const example1 =
  someValue === "a"
    ? "hello world, branch a"
    : someValue === "b"
      ? "hello world, branch a && b"
      : someValue === "c"
        ? "hello world, branch a && b && c"
        : someValue === "d"
          ? "hello world, branch a && b && c && d"
          : null;

const example2 =
  someValue === "a"
    ? someValue === "b"
      ? someValue === "c"
        ? "hello world, branch a && b && c"
        : "hello world, branch a && b && !c"
      : "hello world, branch a && !b"
    : null;

// Output (Prettier 1.15)
const example1 =
  someValue === "a"
    ? "hello world, branch a"
    : someValue === "b"
    ? "hello world, branch a && b"
    : someValue === "c"
    ? "hello world, branch a && b && c"
    : someValue === "d"
    ? "hello world, branch a && b && c && d"
    : null;

const example2 =
  someValue === "a"
    ? someValue === "b"
      ? someValue === "c"
        ? "hello world, branch a && b && c"
        : "hello world, branch a && b && !c"
      : "hello world, branch a && !b"
    : null;

Beibehaltung inline geschriebener Dekoratoren (#5188 by @duailibe)

Vor Prettier 1.14 platzierte Prettier Dekoratoren stets in derselben Zeile wie das dekorierte Element.

Auf Nutzerfeedback hin änderte sich dies in Version 1.14: Dekoratoren wurden stets in einer separaten Zeile platziert.

Weiteres Feedback zeigte jedoch, dass dieses Verhalten nicht immer ideal ist.

Nach Diskussionen über eine Formatierungsheuristik (#4924) entschieden wir uns für Prettier 1.15: Die ursprüngliche Schreibweise wird beibehalten – ohne Newline zwischen Dekorator und Element bleibt diese erhalten, mit Newline wird sie beibehalten.

Originalreihenfolge von Dekoratoren respektieren (#5207 by @duailibe)

// Input
class Hello {
  @decorator inline = 'value';

  @decorator
  ownLine = 'value';

  @decorator({
    hello: 'world'
  }) multiLine = 'value';
}

// Output (Prettier 1.14)
class Hello {
  @decorator
  inline = "value";

  @decorator
  ownLine = "value";

  @decorator({
    hello: "world"
  })
  multiLine = "value";
}

// Output (Prettier 1.15)
class Hello {
  @decorator inline = "value";

  @decorator
  ownLine = "value";

  @decorator({
    hello: "world"
  })
  multiLine = "value";
}

Dekoratoren sind noch nicht ECMA-Standard, und die Position bei exportierten Klassen ist ungeklärt. Babel 7 unterstützt beide Varianten. Prettier 1.15 respektiert nun Ihre gewählte Dekoratorposition. (Sobald standardisiert, werden wir eine konsistente Formatierung erzwingen.)

Dekoratoren sind immer noch nicht Teil des offiziellen ECMA-Standards und [wo Dekoratoren auf exportierten Klassen platziert werden sollten] ist eine Frage, deren Antwort noch nicht entschieden wurde. Um Vorschlagsautoren bei der Einholung von Feedback zu unterstützen, hat Babel 7 Unterstützung für Dekoratoren sowohl vor als auch nach den exportierten Klassen hinzugefügt. Prettier 1.15 fügt Unterstützung für diese hinzu und respektiert, wo Sie den (die) Dekorator(en) setzen. (Sobald die Spezifikation standardisiert ist, werden wir sie ändern, um konsistent zu sein und keine Benutzereingaben mehr zu berücksichtigen.)

// decorator before export
@decorator export class Bar {}

// decorator after export
export @decorator class Foo {}

Verbesserte Heuristik für Objektumbrüche (#5205 by @j-f1)

Bisher hat Prettier Objekte automatisch in mehrere Zeilen umgebrochen, wenn sie die Druckbreite überschritten. Prettier behielt Objekte auch dann in mehreren Zeilen, wenn im Eingabecode irgendwo innerhalb ein Zeilenumbruch vorhanden war. Dies erschwerte das Zusammenführen von Objekten, da man sie manuell in eine Zeile bringen musste. Da Prettier manuelle Formatierungsänderungen eliminieren möchte, wurde das Verhalten geändert: Es prüft jetzt nur noch einen Zeilenumbruch zwischen { und dem ersten Schlüssel:

// Input
const data = {  foo: 'bar',
  baz: 'quux'
}
/* You’d get this format by deleting the newline after the `{` */

// Output (Prettier 1.14)
const data = {
  foo: 'bar',
  baz: 'quux'
}

// Output (Prettier 1.15)
const data = { foo: 'bar', baz: 'quux' }

JSX

Option für einfache Anführungszeichen in JSX (#4798 von @smirea)

Nach [großer Nachfrage] aus der Community fügt Prettier 1.15 eine Option für einfache Anführungszeichen in JSX hinzu: --jsx-single-quote (oder jsxSingleQuote in der Konfiguration/API).

// with --jsx-single-quote
<div class='hello'>world</div>

// without --jsx-single-quote
<div class="hello">world</div>

JSX-Text korrekt aufteilen (#5006 von @yuliaHope)

Prettier 1.14 führte versehentlich einige unglückliche Zeilenumbrüche in JSX ein. Diese Fälle wurden nun behoben.

// Input
<div>
  Sales tax estimated using a rate of {salesTax * 100}%.
</div>;
<BasicText light>(avg. {value}/5)</BasicText>;
<Link to={orgURL(this.props.org.name)}>
  Go to {this.props.org.name}'s profile
</Link>;

// Output (Prettier 1.14)
<div>
  Sales tax estimated using a rate of {salesTax * 100}
  %.
</div>;
<BasicText light>
  (avg. {value}
  /5)
</BasicText>;
<Link to={orgURL(this.props.org.name)}>
  Go to {this.props.org.name}
  's profile
</Link>;

// Output (Prettier 1.15)
<div>Sales tax estimated using a rate of {salesTax * 100}%.</div>;
<BasicText light>(avg. {value}/5)</BasicText>;
<Link to={orgURL(this.props.org.name)}>
  Go to {this.props.org.name}'s profile
</Link>;

Flow

Unterstützung für inexact (#5304 von @jbrown215, #5356 von @existentialism)

Das Flow-Team plant, alle Objekttypen standardmäßig als exact zu behandeln in der Zukunft, daher wurde eine neue Syntax eingeführt, um anzuzeigen, ob ein Objekttyp inexact ist. Diese Syntax wird nun in Prettier 1.15 unterstützt.

type T = {
  a: number,
  ...
}

Kein Umbruch von Flow-Typecast-Kommentaren (#5280, #5290 von @swac)

Zuvor wurden Klammern, die Flow-Typecast-Kommentare umgeben, manchmal entfernt, was die Kommentarsyntax von Flow beschädigt hätte. Dieses Problem wurde in Prettier 1.15 behoben.

// Input
(obj /*: Class */).property

// Output (Prettier 1.14)
obj /*: Class */.property;

// Output (Prettier 1.15)
(obj /*: Class */).property;

Markdown

Math-Syntax beibehalten (#5050, #5220 von @ikatyang)

Zuvor wurden einige Syntaxstrukturen von remark-math beschädigt, da wir sie als normalen Text behandelten. Sie werden nun in Prettier 1.15 beibehalten, sodass Sie die Math-Syntax sicher verwenden können.

$inline-math$

$$
block-math
$$

Weitere Änderungen

API/CLI

Parser über Shebang ableiten, wenn der Dateiname keine Erweiterung hat (#5149 von @haggholm)

Bisher haben wir Dateiname und Erweiterung verwendet, um den zu verwendenden Parser abzuleiten. Oft gibt es jedoch bei CLI-Skripten keine Erweiterung, daher musste der Benutzer den Parser manuell angeben, was nicht ideal ist. In Prettier 1.15 wird bei der Formatierung einer Datei ohne Erweiterung die erste Zeile der Datei betrachtet, und wenn ein Shebang vorhanden ist, wird dieser zur Ableitung des Parsers verwendet.

# Input

$ cat bin/example

#!/usr/bin/env node

  require ( "../src/cli" ) . run ( )
$ prettier bin/example
# Output (Prettier 1.14)

[error] No parser could be inferred for file: bin/example

# Output (Prettier 1.15) #!/usr/bin/env node require("../src/cli").run();

Neuen `trim`-Befehl hinzufügen, um Leerzeichen in der aktuellen Zeile zu trimmen (#4772 von @warrenseine)

Bisher gab es in der Plugin-API keine Methode, um den Einzug der aktuellen Zeile zu löschen. Es war möglich, einige Workarounds zu verwenden, um dasselbe Ziel zu erreichen, aber es gab keinen zuverlässigen Workaround. Daher haben wir einen neuen trim-Befehl eingeführt, um Leerzeichen auf zuverlässige Weise zu trimmen.

Farbige Validierungsmeldung (#5020, #5057 von @ikatyang)

Bisher gab es keine Farbe für die Validierungsfehlermeldung von Optionen, daher war es nicht einfach zu erkennen, welcher Option ein ungültiger Wert übergeben wurde und was die gültigen Werte waren. In Prettier 1.15 sollten Sie auf einen Blick verstehen können, was passiert.

# Input

$ prettier filename.js --trailing-comma wow
# Output (Prettier 1.14)

[error] Invalid ``--trailing-comma`` value. Expected "all", "es5" or "none", but received `"wow"`.

# Output (Prettier 1.15) [error] Invalid --trailing-comma value. Expected "all", "es5" or "none", but received "wow".

Vorverarbeitung des AST durch den Printer erlauben (#5041 von @ikatyang)

Manchmal ist es notwendig, den AST zu transformieren, um das Drucken zu erleichtern. Bisher geschah dies im Parser, wodurch jedoch interne Details für externe Nutzer sichtbar wurden, die möglicherweise einen eigenen Parser erstellen wollten – was nicht ideal ist. In Prettier 1.15 können Sie nun printer.preprocess verwenden, um den AST vorzuverarbeiten, ohne API-Interna preiszugeben.

interface Printer {
  preprocess(ast: AST, options: object): AST;
}

Bessere Fehlermeldung für nicht unterstützte Konfigurationsformate (#4969 von @ikatyang)

Bisher warf das Laden einer Konfigurationsdatei in einem nicht unterstützten Format eine Fehlermeldung, die wie ein Bug in Prettier aussah. In Version 1.15 haben wir diese Meldung verbessert.

# Input

$ prettier filename.js --config .prettierrc.wow
# Output (Prettier 1.14)

[error] Invalid configuration file: Cannot read property 'sync' of undefined

# Output (Prettier 1.15) [error] Invalid configuration file: No sync loader specified for extension ".wow"

Option zur Erzwingung von Zeilenenden hinzugefügt (#5327 von @kachkaev)

Bisher respektierte Prettier stets Ihre ursprünglichen Zeilenenden, was in den meisten Fällen akzeptabel ist. Wenn jedoch mehrere Personen aus verschiedenen Betriebssystemen an einem Projekt zusammenarbeiten, kann es leicht zu gemischten Zeilenenden im zentralen Git-Repository kommen, was große Diffs verursacht. Prettier 1.15 führt die Option --end-of-line <auto|lf|crlf|cr> ein, um solche Probleme mit Zeilenenden zu lösen.

JavaScript

Ein-Stern-Kommentare als JSDoc behandeln (#5206 von @j-f1, #5330 von @lydell)

Prettier erkennt nun JSDoc-artige Kommentare mit nur einem * in der ersten Zeile (/* vs /**) korrekt und rückt sie bei Änderungen der Einrückungsebene ordnungsgemäß ein:

// Input
if (true) {
    /*
     * Oh no
     */
}

// Output (Prettier 1.14)
if (true) {
  /*
   	 * Oh no
 	   */
}

// Output (Prettier 1.15)
if (true) {
  /*
 	 * Oh no
 	 */
}

Korrekte Klammern für gemischte Exponentiation/Modulo-Operationen (#5243 von @bakkot)

Bisher wurden Klammern bei gemischter Exponentiation/Modulo fälschlich entfernt. Dies wurde in Prettier 1.15 behoben.

// Input
const val = (n % 10) ** 2

// Output (Prettier 1.14)
const val = n % 10 ** 2;

// Output (Prettier 1.15)
const val = (n % 10) ** 2;

Kommentare in `try..finally` korrekt ausgeben (#5252 von @aquibm)

In früheren Versionen wurden manche Kommentare in try-finally-Anweisungen in falscher Reihenfolge ausgegeben. Prettier gibt sie nun korrekt aus.

// Input
// comment 1
try {
    // comment 2
}
// comment 3
finally // comment 4
{
    // comment 5
}

// Output (Prettier 1.14)
// comment 1
try {
  // comment 2
} finally { // comment 4
  // comment 3
  // comment 5
}

// Output (Prettier 1.15)
// comment 1
try {
  // comment 2
} finally {
  // comment 3
  // comment 4
  // comment 5
}

Kommentare in catch-Klauseln an korrekter Position ausgeben (#5202 von @duailibe)

Kommentare in catch-Klauseln werden nun wie bei anderen Klauseln in einer eigenen Zeile ausgegeben.

// Input
try {} catch (
  // comment
  e
) {}

// Output (Prettier 1.14)
try {
} catch (// comment
e) {}

// Output (Prettier 1.15)
try {
} catch (
  // comment
  e
) {}

Argumente einzeilig ausgeben, wenn es sich um Pfeilfunktionen mit Konditionalausdrücken handelt (#5209 von @duailibe)

Es ist nicht nötig, eine zusätzliche Einrückungsebene für Funktionsargumente hinzuzufügen, die als Pfeilfunktion mit Konditionalausdruck definiert sind. In Prettier 1.15 werden diese nun einzeilig ausgegeben.

// Input
x.then(() => a ?
  veryVerVeryveryVerVeryveryVerVeryveryVerVeryLong:
  veryVerVeryveryVerVeryveryVerVeryveryVerVeryLong
);

// Output (Prettier 1.14)
x.then(
  () =>
    a
      ? veryVerVeryveryVerVeryveryVerVeryveryVerVeryLong
      : veryVerVeryveryVerVeryveryVerVeryveryVerVeryLong
);

// Output (Prettier 1.15)
x.then(() =>
  a
    ? veryVerVeryveryVerVeryveryVerVeryveryVerVeryLong
    : veryVerVeryveryVerVeryveryVerVeryveryVerVeryLong
);

Unerwartete Einrückung in Variablendeklaration durch Kommentare behoben (#5190 von @duailibe)

Frühere Versionen führten bei Kommentaren in Variablendeklarationen dazu, dass Variablendeklaratoren ohne Einrückung ausgegeben wurden. Dies wurde in Prettier 1.15 korrigiert.

// Input
const // Comment
	a = 1;

// Output (Prettier 1.14)
const // Comment
a = 1;

// Output (Prettier 1.15)
const // Comment
  a = 1;

Klammern bei ternären Operatoren in optionalen Member-Ausdrücken nicht entfernen (#5179 von @existentialism)

Prettier 1.14 entfernte fälschlich Klammern um ternäre Operatoren innerhalb optionaler Member-Ausdrücke (?.). Diese Fälle werden in Version 1.15 korrekt ausgegeben.

// Input
(a ? b : c)?.d;

// Output (Prettier 1.14)
a ? b : c?.d;

// Output (Prettier 1.15)
(a ? b : c)?.d;

`${` sowie Backticks in GraphQL-Tags escapen (#5137 von @lydell)

Bisher wurden interpolationsähnliche Zeichenketten in eingebettetem GraphQL fälschlich nicht escapt, was dazu führte, dass JavaScript sie als Interpolation interpretierte. In Prettier 1.15 werden diese korrekt escapt.

// Input
const schema = gql`
type Project {
    "Pattern: \`\${project}\`"
    pattern: String
}
`;

// Output (Prettier 1.14)
const schema = gql`
  type Project {
    "Pattern: \`${project}\`"
    pattern: String
  }
`;

// Output (Prettier 1.15)
const schema = gql`
  type Project {
    "Pattern: \`\${project}\`"
    pattern: String
  }
`;

Anführungszeichen in Keys nicht entfernen, wenn sie nicht ES5-kompatibel sind (#5157 von @koba04)

Bisher entfernte Prettier Anführungszeichen in Keys, wenn sie in ES2015 nicht notwendig waren, was zu ES5-Inkompatibilität führen konnte. Prettier 1.15 entfernt sie nur, wenn sie auch in ES5 nicht erforderlich sind.

// Input
var obj = {
  "𐊧": 'ok',
  𐊧: 'ok'
};

// Output (Prettier 1.14)
var obj = {
  𐊧: "ok",
  𐊧: "ok"
};

// Output (Prettier 1.15)
var obj = {
 "𐊧": "ok",
  𐊧: "ok"
};

Argumente nicht zusammenführen, wenn das zweite Argument einer Funktion ein ternärer Ausdruck ist (#5151 von @onurtemizkan)

Es gibt Sonderfälle, in denen Funktionsaufrufargumente zusammengefasst werden, wenn das erste eine Funktion ist und das zweite kein komplexer Ausdruck. Ternäre Ausdrücke wurden jedoch als nicht komplex eingestuft. Diese können tatsächlich komplex sein, daher haben wir dies in Prettier 1.15 geändert.

// Input
func(
  () => { thing(); },
  something(longArgumentName, anotherLongArgumentName) ? someOtherThing() : somethingElse(true, 0)
);

// Output (Prettier 1.14)
func(() => {
  thing();
}, something(longArgumentName, anotherLongArgumentName) ? someOtherThing() : somethingElse(true, 0));

// Output (Prettier 1.15)
func(
  () => {
    thing();
  },
  something(longArgumentName, anotherLongArgumentName)
    ? someOtherThing()
    : somethingElse(true, 0)
);

Unterstützung für Timeouts als Zahlen in Testfunktionen hinzufügen (#5085 von @j-f1)

Dies erhält die spezielle Formatierung von Prettier für Testfunktionen, wenn ein Timeout (Zahl) als dritter Parameter übergeben wird:

// Input
it('Handles at least 10k untracked files without failing', async () => {
  hello()
}, 25000)

// Output (Prettier 1.14)
it(
  "Handles at least 10k untracked files without failing",
  async () => {
    hello();
  },
  25000
);

// Output (Prettier 1.15)
it('Handles at least 10k untracked files without failing', async () => {
  hello()
}, 25000)

beforeEach-ähnliche Aufrufe wie reguläre Funktionsaufrufe formatieren (#5011 von @ericsakmar)

Zuvor wurden Argumente in beforeEach fälschlicherweise zusammengefasst. Dieses Problem wurde in Prettier 1.15 behoben.

// Input
beforeEach(done =>
  startService()
    .pipe(tap(service => (instance = service)))
    .subscribe(() => done()),
);

// Output (Prettier 1.14)
beforeEach(done =>
  startService()
    .pipe(tap(service => (instance = service)))
    .subscribe(() => done()));

// Output (Prettier 1.15)
beforeEach(done =>
  startService()
    .pipe(tap(service => (instance = service)))
    .subscribe(() => done())
);

Führenden Kommentar des Pipeline-Operators in eigener Zeile ausgeben (#5015 von @flxwu)

In Prettier 1.14 führte ein Kommentar vor einem Pipeline-Operator dazu, dass das rechte Argument nicht eingerückt wurde. Dieses Problem wurde in Prettier 1.15 behoben.

// Input
function pipeline() {
	0
	// Comment
	|> x
}

// Output (Prettier 1.14)
function pipeline() {
  0
    |> // Comment
    x;
}

// Output (Prettier 1.15)
function pipeline() {
  0 |>
    // Comment
    x;
}

Hängende Kommentare in `new`-Ausdrücken erhalten (#5017 von @flxwu)

Kommentare anstelle von Ausdrücken in new-Aufrufen werden nun beibehalten anstatt aus den Klammern gezogen zu werden.

// Input
new Thing(/* comment */)

// Output (Prettier 1.14)
new Thing /* comment */();

// Output (Prettier 1.15)
new Thing(/* comment */);

Redundante ASI-Schutzmaßnahme für Bind-Ausdrücke entfernen (#4970 von @TitanSnow)

Überflüssige Semikolons für Bind-Ausdrücke werden mit --no-semi in Prettier 1.15 entfernt.

// Input
a::b.c

// Output (Prettier 1.14)
;a::b.c

// Output (Prettier 1.15)
a::b.c

Notwendige Klammern in Bind-Ausdrücken nicht entfernen (#4964 von @TitanSnow)

Erforderliche Klammern in Bind-Ausdrücken werden in Prettier 1.15 beibehalten.

// Input
a::(b.c());

// Output (Prettier 1.14)
a::b.c();

// Output (Prettier 1.15)
a::(b.c());

Einrückung für ternären Ausdruck in Funktionsaufruf korrigieren (#4368 von @malcolmsgroves)

Logische Ausdrücke in einem ternären Operator innerhalb eines Funktionsaufrufs werden nun korrekt eingerückt.

// Input
fn(
  bifornCringerMoshedPerplexSawder,
  askTrovenaBeenaDependsRowans,
  glimseGlyphsHazardNoopsTieTie === averredBathersBoxroomBuggyNurl &&
    anodyneCondosMalateOverateRetinol // <--
    ? annularCooeedSplicesWalksWayWay
    : kochabCooieGameOnOboleUnweave
);

// Output (Prettier 1.14)
fn(
  bifornCringerMoshedPerplexSawder,
  askTrovenaBeenaDependsRowans,
  glimseGlyphsHazardNoopsTieTie === averredBathersBoxroomBuggyNurl &&
  anodyneCondosMalateOverateRetinol // <--
    ? annularCooeedSplicesWalksWayWay
    : kochabCooieGameOnOboleUnweave
);

// Output (Prettier 1.15)
fn(
  bifornCringerMoshedPerplexSawder,
  askTrovenaBeenaDependsRowans,
  glimseGlyphsHazardNoopsTieTie === averredBathersBoxroomBuggyNurl &&
    anodyneCondosMalateOverateRetinol // <--
    ? annularCooeedSplicesWalksWayWay
    : kochabCooieGameOnOboleUnweave
);

Kommentare in `import`-Anweisungen nicht verschieben (#5016 von @ericsakmar)

Kommentare in import-Anweisungen werden nicht mehr an das Ende des import verschoben.

// Input
import x, {
  // comment
  y
} from 'z';


// Output (Prettier 1.14)
import x, { y } from "z";
// comment

// Output (Prettier 1.15)
import x, {
  // comment
  y
} from "z";

Instabile Kommentarformatierung in `while`-Schleifen beheben (#5251 von @jaideng123)

Kommentare in while-Schleifen werden nun korrekt formatiert, sodass keine doppelte Formatierung mehr nötig ist, um ein stabiles Ergebnis zu erzielen.

// Input
while(
    true
    // Comment
) {}

// First Output (Prettier 1.14)
while (true) // Comment
{}

// Second Output (Prettier 1.14)
while (
  true // Comment
) {}

// First & Second Output (Prettier 1.15)
while (
  true
  // Comment
) {}

Kommentare zwischen Funktionsdeklaration und Rumpf stabil formatieren (#5250 von @jaideng123)

Kommentare zwischen einer Funktionsdeklaration und ihrem Rumpf müssen nun nicht mehr zweimal formatiert werden, um das Endergebnis zu erhalten.

// Input
function foo() // this is a function
{
  return 42
}

// First Output (Prettier 1.14)
function foo() { // this is a function
  return 42;
}

// Second Output (Prettier 1.14)
function foo() {
  // this is a function
  return 42;
}

// First & Second Output (Prettier 1.15)
function foo() {
  // this is a function
  return 42;
}

JSX

Logische Ausdrucksketten in JSX nicht umbrechen (#5092 von @duailibe)

Überflüssige Einrückungen bei logischen Ausdrucksketten in JSX werden nun verhindert.

// Input
const TestComponent = () => {
  return (
    <>
      {cats && memes && (
        <Foo bar><Trololol /></Foo>
      )}
    </>
  );
}

// Output (Prettier 1.14)
const TestComponent = () => {
  return (
    <>
      {cats &&
        memes && (
          <Foo bar>
            <Trololol />
          </Foo>
        )}
    </>
  );
};

// Output (Prettier 1.15)
const TestComponent = () => {
  return (
    <>
      {cats && memes && (
        <Foo bar>
          <Trololol />
        </Foo>
      )}
    </>
  );
};

Geschütztes Leerzeichen nicht in reguläres Leerzeichen umwandeln (#5165 von @vjeux, #5334 von @ikatyang)

Zuvor wurden geschützte Leerzeichen wie reguläre Leerzeichen behandelt, was dazu führte, dass sie ersetzt wurden. Dieses Problem wurde in Prettier 1.15 behoben.

(· repräsentiert ein geschütztes Leerzeichen)

// Input
function OhMyWhitespace() {
  return (
    <Dialog>
      <p>
        Supprimer l’objectif «·{goal.name}·»·?
      </p>
    </Dialog>
  )
}

// Output (Prettier 1.14)
function OhMyWhitespace() {
  return (
    <Dialog>
      <p>
        Supprimer l’objectif «
        {goal.name}
        ·»·?
      </p>
    </Dialog>
  );
}

// Output (Prettier 1.15)
function OhMyWhitespace() {
  return (
    <Dialog>
      <p>Supprimer l’objectif «·{goal.name}·»·?</p>
    </Dialog>
  );
}

Einfache JSX-Öffnungstags nicht umbrechen (#5078 von @duailibe)

Einfache JSX-Öffnungstags werden nicht mehr in mehrere Zeilen umgebrochen.

// Input
function HelloWorld() {
  const listItemText = (
    <ListItemText
      primary={
        <PrimaryText>{`Two Factor Authentication is ${enabledText}`}</PrimaryText>
      }
    />
  );
}

// Output (Prettier 1.14)
function HelloWorld() {
  const listItemText = (
    <ListItemText
      primary={
        <PrimaryText
        >{`Two Factor Authentication is ${enabledText}`}</PrimaryText>
      }
    />
  );
}

// Output (Prettier 1.15)
function HelloWorld() {
  const listItemText = (
    <ListItemText
      primary={
        <PrimaryText>{`Two Factor Authentication is ${enabledText}`}</PrimaryText>
      }
    />
  );
}

Regression bei Pfeilfunktionen in JSX-Ausdrücken beheben (#5063 von @ikatyang)

// Input
<div className="search-filter-chips">
    {scopes.filter(scope => scope.value !== "").map((scope, i) => (
        <FilterChip
            query={this.props.query}
            onFilterChosen={this.onSearchScopeClicked}
        />
    ))}
</div>;

// Output (Prettier 1.14)
<div className="search-filter-chips">
  {scopes.filter(scope => scope.value !== "").map((scope, i) => (
    <FilterChip
      query={this.props.query}
      onFilterChosen={this.onSearchScopeClicked}
    />
  ))}
</div>;

// Output (Prettier 1.15)
<div className="search-filter-chips">
  {scopes
    .filter(scope => scope.value !== "")
    .map((scope, i) => (
      <FilterChip
        query={this.props.query}
        onFilterChosen={this.onSearchScopeClicked}
      />
    ))}
</div>;

Flow

Inline-Generics mit einem einzelnen Bezeichner (#5066 von @duailibe)

Generics mit einem einzelnen Bezeichner werden jetzt immer inline gesetzt.

// Input
const longVariableName: Array<number> = this.foo.bar.baz.collider.body.vertices.reduce();

// Output (Prettier 1.14)
const longVariableName: Array<
  number
> = this.foo.bar.baz.collider.body.vertices.reduce();

// Output (Prettier 1.15)
const longVariableName: Array<number> = this.foo.bar.baz.collider.body.vertices.reduce();

Klassen in `extends` nicht immer inline setzen (#5244 von @aquibm)

Klassen in extends werden jetzt korrekt in mehrere Zeilen umgebrochen.

// Input
declare interface ExtendsMany extends Interface1, Interface2, Interface3, Interface4, Interface5, Interface6, Interface7 {
  x: string;
}

// Output (Prettier 1.14)
declare interface ExtendsMany
  extends Interface1, Interface2, Interface3, Interface4, Interface5, Interface6, Interface7 {
  x: string;
}

// Output (Prettier 1.15)
declare interface ExtendsMany
  extends Interface1,
    Interface2,
    Interface3,
    Interface4,
    Interface5,
    Interface6,
    Interface7 {
  x: string;
}

Überflüssige Klammern für Async-Funktionen in `export default` entfernen (#5303 von @jbrown215)

Überflüssige Klammern um export default async function wurden entfernt.
Dieser Fehler trat ausschließlich bei Verwendung des flow-Parsers auf.

// Input
export default async function foo() {};

// Output (Prettier 1.14)
export default (async function foo() {});

// Output (Prettier 1.15)
export default async function foo() {}

TypeScript

ASI-Schutz für Non-Null-Assertion hinzugefügt (#5262 by @duailibe)

Notwendige Semikolons für Non-Null-Assertions werden im --no-semi-Modus nicht entfernt.

// Input
const el = ReactDOM.findDOMNode(ref)
;(el as HTMLElement)!.style.cursor = 'pointer'

// Output (Prettier 1.14)
const el = ReactDOM.findDOMNode(ref)
(el as HTMLElement)!.style.cursor = "pointer"

// Output (Prettier 1.15)
const el = ReactDOM.findDOMNode(ref)
;(el as HTMLElement)!.style.cursor = "pointer"

Kein zusätzliches Semikolon für Methodensignatur bei `prettier-ignore` (#5160 von @onurtemizkan)

Das zusätzliche Semikolon für Methodensignaturen wurde in Prettier 1.15 entfernt.

// Input
interface SharedWorkerGlobalScope extends WorkerGlobalScope {
    // prettier-ignore
    addEventListener(): void;
    addEventListener(type: string): void;
}

// Output (Prettier 1.14)
interface SharedWorkerGlobalScope extends WorkerGlobalScope {
  // prettier-ignore
  addEventListener(): void;;
  addEventListener(type: string): void;
}

// Output (Prettier 1.15)
interface SharedWorkerGlobalScope extends WorkerGlobalScope {
  // prettier-ignore
  addEventListener(): void;
  addEventListener(type: string): void;
}

Ungültige Klammern bei Destrukturierung mit Standardwert korrigiert (#5096 von @ikatyang)

Zuvor erzeugte Prettier ungültige Klammern bei Destrukturierungen mit Standardwerten. Dies wurde in Version 1.15 behoben.

// Input
({ prop: toAssign = "default" } = { prop: "propval" });

// Output (Prettier 1.14)
({ prop: (toAssign = "default") } = { prop: "propval" });

// Output (Prettier 1.15)
({ prop: toAssign = "default" } = { prop: "propval" });

Kein Semikolon für Klassen-Eigenschaften mit Modifikatoren im `--no-semi`-Modus (#5083 von @ikatyang)

In Prettier 1.14 wurden unnötige Semikolons am Ende von Klassen-Eigenschaften hinzugefügt,
wenn die folgende Eigenschaft Modifikatoren enthielt. Diese wurden in Version 1.15 entfernt.

// Input
class Reader {
  private [kBuffer]: Buffer
  private [kOffset]: number
}

// Output (1.14)
class Reader {
  private [kBuffer]: Buffer;
  private [kOffset]: number
}

// Output (1.15)
class Reader {
  private [kBuffer]: Buffer
  private [kOffset]: number
}

Klammern für komplexe Knoten in `extends` von ClassExpression beibehalten (#5074 von @ikatyang)

Zuvor wurden erforderliche Klammern für komplexe Knoten in extends von ClassExpression fälschlich entfernt,
was ungültigen Code erzeugte. Dies wurde in Version 1.15 korrigiert.

// Input
let Subclass2 = class extends (Superclass as AssertedSuperclass) {};

// Output (Prettier 1.14)
let Subclass2 = class extends Superclass as AssertedSuperclass {};

// Output (Prettier 1.15)
let Subclass2 = class extends (Superclass as AssertedSuperclass) {};

Notwendige Klammern für TSOptionalType beibehalten (#5056 von @ikatyang)

Zuvor wurden erforderliche Klammern für optionale Typen in Tuplen fälschlich entfernt.
Dies wurde in Version 1.15 behoben.

// Input
type T = [("a" | "b")?];

// Output (Prettier 1.14)
type T = ["a" | "b"?];

// Output (Prettier 1.15)
type T = [("a" | "b")?];

CSS

Korrekte Ausgabe bei Frontmatter und `/* prettier-ignore */` (#5103 von @ikatyang)

In Prettier 1.14 führte die Frontmatter-Extraktion zu verschobenen AST-Positionsdaten,
was bei /* prettier-ignore */ zu fehlerhaften Ausgaben führte. Dies wurde in Version 1.15 behoben.

/* Input */
---
hello: world
---

/* prettier-ignore */
.foo {}

/* Output (Prettier 1.14) */
---
hello: world
---

/* prettier-ignore */
 pretti

/* Output (Prettier 1.15) */
---
hello: world
---

/* prettier-ignore */
.foo {}

Zeilenumbrüche in CSS-in-JS-Templates beibehalten (#5240 von @onurtemizkan)

Da Interpolationen in CSS-in-JS-Templates beliebigen Inhalt haben können,
werden Zeilenumbrüche dafür in Prettier 1.15 beibehalten.

// Input
const foo = styled.div`
  ${secondary}
  flex: 0 0 auto;
`;

// Output (Prettier 1.14)
const foo = styled.div`
  ${secondary} flex: 0 0 auto;
`;

// Output (Prettier 1.15)
const foo = styled.div`
  ${secondary}
  flex: 0 0 auto;
`;

Markdown

Nachgestellte Leerzeichen bei Frontmatter-Trennzeichen erlaubt (#5107 von @ikatyang)

Zuvor wurden nur Frontmatter ohne nachgestellte Leerzeichen erkannt,
was dazu führte, dass thematische Trennzeichen (z.B. ---) fälschlich als Frontmatter-Ende interpretiert wurden.
Durch die Zulassung nachgestellter Leerzeichen in Prettier 1.15 wurde dies behoben –
entsprechend der Verarbeitung durch GitHub.

(· repräsentiert ein Leerzeichen)

<!-- Input -->
---
Title: Title
---···

__strong__ **strong**

---

<!-- Output (Prettier 1.14) -->
---
Title: Title
---···
__strong__ **strong**
---

<!-- Output (Prettier 1.15) -->
---
Title: Title
---···

**strong** **strong**

---

Keine Leerzeichen zwischen Latein und Hangul einfügen (#5040 von @ikatyang)

Bisher fügten wir immer Leerzeichen zwischen lateinischen und CJK-Zeichen ein, um die Lesbarkeit zu verbessern. Aufgrund von Rückmeldungen haben wir jedoch erfahren, dass im Koreanischen konventionelle Leerzeichen verwendet werden und das Einfügen zusätzlicher Leerzeichen dort Probleme verursachen würde. Daher wurde dieses Verhalten für Hangul in Prettier 1.15 deaktiviert. Für Chinesisch oder Japanisch bleibt das Verhalten unverändert.

<!-- Input -->
예문Latin예문Latin 예문Latin예문 Latin예문Latin 예문 Latin 예문

<!-- Output (Prettier 1.14) -->
예문 Latin 예문 Latin 예문 Latin 예문 Latin 예문 Latin 예문 Latin 예문

<!-- Output (Prettier 1.15) -->
예문Latin예문Latin 예문Latin예문 Latin예문Latin 예문 Latin 예문

Führende und abschließende Zeilenumbrüche in umrandeten Codeblöcken erhalten (#5038 by @ikatyang)

In Prettier 1.14 wurden führende und abschließende Zeilenumbrüche in umrandeten Codeblöcken entfernt, was dazu führte, dass andere Plugins (z.B. php) diese Codeblöcke nicht formatieren konnten. In Prettier 1.15 werden diese Zeilenumbrüche nun beibehalten.

<!-- Input -->
```

hello

```

<!-- Output (Prettier 1.14) -->
```
hello
```

<!-- Output (Prettier 1.15) -->
```

hello

```

Fußnotendefinition inline darstellen, wenn nur ein einzeiliger Absatz vorhanden ist (#5025 by @ikatyang)

Bisher wurden Fußnotendefinitionen, die die Druckbreite überschritten, in mehrere Zeilen umgebrochen. Da das Aufteilen eines einzeiligen Absatzes die Lesbarkeit kaum verbesserte, werden solche Absätze in Prettier 1.15 nun immer inline dargestellt.

<!-- Input -->
[^1]: In eos repellat fugit dolor veritatis doloremque nobis. Provident ut est illo.

<!-- Output (Prettier 1.14) -->
[^1]:

  In eos repellat fugit dolor veritatis doloremque nobis. Provident ut est illo.

<!-- Output (Prettier 1.15) -->
[^1]: In eos repellat fugit dolor veritatis doloremque nobis. Provident ut est illo.

Listen korrekt vor Leerzeichen-basierten Zeilenumbrüchen darstellen (#5024 by @ikatyang)

In Prettier 1.14 wurden Listen vor Leerzeichen-basierten Zeilenumbrüchen fälschlich als lockere Listen erkannt. Dies führte dazu, dass Code zweimal formatiert werden musste, um stabil zu werden, wobei dann jedoch fehlerhafte Ausgaben entstanden. Dieses Problem wurde in Prettier 1.15 behoben.

// Input
if (condition) {
  md`
- 123
  - 456
`;
}

// First Output (Prettier 1.14)
if (condition) {
  md`
- 123
  - 456
  `;
}

// Second Output (Prettier 1.14)
if (condition) {
  md`
- 123

  - 456
  `;
}

// First & Second Output (Prettier 1.15)
if (true) {
  md`
- 123
  - 456
  `;
}

YAML

Anführungszeichen korrekt escapen (#5236 by @ikatyang)

Bisher führten Strings mit escapten Anführungszeichen in doubleQuote zu ungültigen Ausgaben. Diese werden in Prettier 1.15 nun korrekt behandelt.

# Input
"'a\"b"

# Output (Prettier 1.14)
''a"b'

# Output (Prettier 1.15)
'''a"b'

Nachfolgende Kommentare für Dokumente und Dokumentköpfe erhalten (#5027 by @ikatyang)

In Prettier 1.14 konnten nachfolgende Kommentare für Dokumente und Dokumentköpfe in bestimmten Situationen verschoben werden. In Prettier 1.15 bleiben diese Kommentare nun stets erhalten.

# Input
--- # hello
... # world

# Output (Prettier 1.14)
# hello
# world

# Output (Prettier 1.15)
--- # hello
... # world

Keinen Fehler für Flow-Mapping-Elemente mit langen Werten werfen (#5027 by @ikatyang)

Bisher wurden lange Werte in Flow-Mappings fälschlich als Schlüssel interpretiert, was Syntaxfehler verursachte, da implizite Schlüssel mit mehr als [1024 Zeichen] nicht erlaubt sind. Dieses Problem wurde in Prettier 1.15 behoben.

(long repräsentiert einen Text mit mehr als 1024 Zeichen)

# Input
{x: long}

# Output (Prettier 1.14)
SyntaxError: The "undefine...ndefined" key is too long

# Output (Prettier 1.15)
{
  x: long
}

Bevorzuge implizite Schlüssel für leere Mapping-Werte (#4972 by @ikatyang)

Bisher wurden Mapping-Elemente mit leeren Werten stets mit einem [expliziten Schlüssel] dargestellt, was unüblich war und Nutzer verwirrte. In Prettier 1.15 werden solche Fälle nun immer mit impliziten Schlüsseln formatiert.

# Input
a:
  b:

# Output (Prettier 1.14)
a:
  ? b

# Output (Prettier 1.15)
a:
  b:

Danke! ❤️

Vielen Dank an alle, die zu diesem Release beigetragen haben, sowie an diejenigen, die Probleme gemeldet und Feedback gegeben haben. Prettier ist ein community-getriebenes Projekt und kann nur dank Menschen wie euch weiter existieren. Herzlichen Dank!

Besonderer Dank geht an @j-f1, @suchipi und @existentialism für die Durchsicht dieses Blogposts!

Höhepunkte​

HTML/Vue/Angular​

Unterstützung für HTML, Vue und Angular (#5259 by @ikatyang, #4753 by @evilebottnawi, #2083 by @azz)​

Whitespace-sensitives Formatieren​

Automatische Parser-Erkennung​

HTML-Template-Literale in JavaScript​

Vue-Formatierung​

Angular-Formatierung​

MDX​

MDX-Unterstützung (#4975 by @ikatyang)​

JavaScript​

Vereinfachung verschachtelter Ternär-Operatoren (#5039 by @suchipi, #5272 by @duailibe, #5333 by @ikatyang)​

Beibehaltung inline geschriebener Dekoratoren (#5188 by @duailibe)​

Originalreihenfolge von Dekoratoren respektieren (#5207 by @duailibe)​

Verbesserte Heuristik für Objektumbrüche (#5205 by @j-f1)​

JSX​

Option für einfache Anführungszeichen in JSX (#4798 von @smirea)​

JSX-Text korrekt aufteilen (#5006 von @yuliaHope)​

Flow​

Unterstützung für inexact (#5304 von @jbrown215, #5356 von @existentialism)​

Kein Umbruch von Flow-Typecast-Kommentaren (#5280, #5290 von @swac)​

Markdown​

Math-Syntax beibehalten (#5050, #5220 von @ikatyang)​

Weitere Änderungen​

API/CLI​

Parser über Shebang ableiten, wenn der Dateiname keine Erweiterung hat (#5149 von @haggholm)​

Neuen trim-Befehl hinzufügen, um Leerzeichen in der aktuellen Zeile zu trimmen (#4772 von @warrenseine)​

Farbige Validierungsmeldung (#5020, #5057 von @ikatyang)​

Vorverarbeitung des AST durch den Printer erlauben (#5041 von @ikatyang)​

Bessere Fehlermeldung für nicht unterstützte Konfigurationsformate (#4969 von @ikatyang)​

Option zur Erzwingung von Zeilenenden hinzugefügt (#5327 von @kachkaev)​

JavaScript​

Ein-Stern-Kommentare als JSDoc behandeln (#5206 von @j-f1, #5330 von @lydell)​

Korrekte Klammern für gemischte Exponentiation/Modulo-Operationen (#5243 von @bakkot)​

Kommentare in try..finally korrekt ausgeben (#5252 von @aquibm)​

Kommentare in catch-Klauseln an korrekter Position ausgeben (#5202 von @duailibe)​

Argumente einzeilig ausgeben, wenn es sich um Pfeilfunktionen mit Konditionalausdrücken handelt (#5209 von @duailibe)​

Unerwartete Einrückung in Variablendeklaration durch Kommentare behoben (#5190 von @duailibe)​

Klammern bei ternären Operatoren in optionalen Member-Ausdrücken nicht entfernen (#5179 von @existentialism)​

${ sowie Backticks in GraphQL-Tags escapen (#5137 von @lydell)​

Anführungszeichen in Keys nicht entfernen, wenn sie nicht ES5-kompatibel sind (#5157 von @koba04)​

Argumente nicht zusammenführen, wenn das zweite Argument einer Funktion ein ternärer Ausdruck ist (#5151 von @onurtemizkan)​

Unterstützung für Timeouts als Zahlen in Testfunktionen hinzufügen (#5085 von @j-f1)​

beforeEach-ähnliche Aufrufe wie reguläre Funktionsaufrufe formatieren (#5011 von @ericsakmar)​

Führenden Kommentar des Pipeline-Operators in eigener Zeile ausgeben (#5015 von @flxwu)​

Hängende Kommentare in new-Ausdrücken erhalten (#5017 von @flxwu)​

Redundante ASI-Schutzmaßnahme für Bind-Ausdrücke entfernen (#4970 von @TitanSnow)​

Notwendige Klammern in Bind-Ausdrücken nicht entfernen (#4964 von @TitanSnow)​

Einrückung für ternären Ausdruck in Funktionsaufruf korrigieren (#4368 von @malcolmsgroves)​

Kommentare in import-Anweisungen nicht verschieben (#5016 von @ericsakmar)​

Instabile Kommentarformatierung in while-Schleifen beheben (#5251 von @jaideng123)​

Kommentare zwischen Funktionsdeklaration und Rumpf stabil formatieren (#5250 von @jaideng123)​

JSX​

Logische Ausdrucksketten in JSX nicht umbrechen (#5092 von @duailibe)​

Geschütztes Leerzeichen nicht in reguläres Leerzeichen umwandeln (#5165 von @vjeux, #5334 von @ikatyang)​

Einfache JSX-Öffnungstags nicht umbrechen (#5078 von @duailibe)​

Regression bei Pfeilfunktionen in JSX-Ausdrücken beheben (#5063 von @ikatyang)​

Flow​

Inline-Generics mit einem einzelnen Bezeichner (#5066 von @duailibe)​

Klassen in extends nicht immer inline setzen (#5244 von @aquibm)​

Überflüssige Klammern für Async-Funktionen in export default entfernen (#5303 von @jbrown215)​

TypeScript​

ASI-Schutz für Non-Null-Assertion hinzugefügt (#5262 by @duailibe)​

Kein zusätzliches Semikolon für Methodensignatur bei prettier-ignore (#5160 von @onurtemizkan)​

Ungültige Klammern bei Destrukturierung mit Standardwert korrigiert (#5096 von @ikatyang)​

Kein Semikolon für Klassen-Eigenschaften mit Modifikatoren im --no-semi-Modus (#5083 von @ikatyang)​

Klammern für komplexe Knoten in extends von ClassExpression beibehalten (#5074 von @ikatyang)​

Notwendige Klammern für TSOptionalType beibehalten (#5056 von @ikatyang)​

CSS​

Korrekte Ausgabe bei Frontmatter und /* prettier-ignore */ (#5103 von @ikatyang)​

Zeilenumbrüche in CSS-in-JS-Templates beibehalten (#5240 von @onurtemizkan)​

Markdown​

Nachgestellte Leerzeichen bei Frontmatter-Trennzeichen erlaubt (#5107 von @ikatyang)​

Keine Leerzeichen zwischen Latein und Hangul einfügen (#5040 von @ikatyang)​

Führende und abschließende Zeilenumbrüche in umrandeten Codeblöcken erhalten (#5038 by @ikatyang)​

Fußnotendefinition inline darstellen, wenn nur ein einzeiliger Absatz vorhanden ist (#5025 by @ikatyang)​

Listen korrekt vor Leerzeichen-basierten Zeilenumbrüchen darstellen (#5024 by @ikatyang)​

YAML​

Anführungszeichen korrekt escapen (#5236 by @ikatyang)​

Nachfolgende Kommentare für Dokumente und Dokumentköpfe erhalten (#5027 by @ikatyang)​

Höhepunkte

HTML/Vue/Angular

Unterstützung für HTML, Vue und Angular (#5259 by @ikatyang, #4753 by @evilebottnawi, #2083 by @azz)

Whitespace-sensitives Formatieren

Automatische Parser-Erkennung

HTML-Template-Literale in JavaScript

Vue-Formatierung

Angular-Formatierung

MDX

MDX-Unterstützung (#4975 by @ikatyang)

JavaScript

Vereinfachung verschachtelter Ternär-Operatoren (#5039 by @suchipi, #5272 by @duailibe, #5333 by @ikatyang)

Beibehaltung inline geschriebener Dekoratoren (#5188 by @duailibe)

Originalreihenfolge von Dekoratoren respektieren (#5207 by @duailibe)

Verbesserte Heuristik für Objektumbrüche (#5205 by @j-f1)

JSX

Option für einfache Anführungszeichen in JSX (#4798 von @smirea)

JSX-Text korrekt aufteilen (#5006 von @yuliaHope)

Flow

Unterstützung für inexact (#5304 von @jbrown215, #5356 von @existentialism)

Kein Umbruch von Flow-Typecast-Kommentaren (#5280, #5290 von @swac)

Markdown

Math-Syntax beibehalten (#5050, #5220 von @ikatyang)

Weitere Änderungen

API/CLI

Parser über Shebang ableiten, wenn der Dateiname keine Erweiterung hat (#5149 von @haggholm)

Neuen `trim`-Befehl hinzufügen, um Leerzeichen in der aktuellen Zeile zu trimmen (#4772 von @warrenseine)

Farbige Validierungsmeldung (#5020, #5057 von @ikatyang)

Vorverarbeitung des AST durch den Printer erlauben (#5041 von @ikatyang)

Bessere Fehlermeldung für nicht unterstützte Konfigurationsformate (#4969 von @ikatyang)

Option zur Erzwingung von Zeilenenden hinzugefügt (#5327 von @kachkaev)

JavaScript

Ein-Stern-Kommentare als JSDoc behandeln (#5206 von @j-f1, #5330 von @lydell)

Korrekte Klammern für gemischte Exponentiation/Modulo-Operationen (#5243 von @bakkot)

Kommentare in `try..finally` korrekt ausgeben (#5252 von @aquibm)

Kommentare in catch-Klauseln an korrekter Position ausgeben (#5202 von @duailibe)

Argumente einzeilig ausgeben, wenn es sich um Pfeilfunktionen mit Konditionalausdrücken handelt (#5209 von @duailibe)

Unerwartete Einrückung in Variablendeklaration durch Kommentare behoben (#5190 von @duailibe)

Klammern bei ternären Operatoren in optionalen Member-Ausdrücken nicht entfernen (#5179 von @existentialism)

`${` sowie Backticks in GraphQL-Tags escapen (#5137 von @lydell)

Anführungszeichen in Keys nicht entfernen, wenn sie nicht ES5-kompatibel sind (#5157 von @koba04)

Argumente nicht zusammenführen, wenn das zweite Argument einer Funktion ein ternärer Ausdruck ist (#5151 von @onurtemizkan)

Unterstützung für Timeouts als Zahlen in Testfunktionen hinzufügen (#5085 von @j-f1)

beforeEach-ähnliche Aufrufe wie reguläre Funktionsaufrufe formatieren (#5011 von @ericsakmar)

Führenden Kommentar des Pipeline-Operators in eigener Zeile ausgeben (#5015 von @flxwu)

Hängende Kommentare in `new`-Ausdrücken erhalten (#5017 von @flxwu)

Redundante ASI-Schutzmaßnahme für Bind-Ausdrücke entfernen (#4970 von @TitanSnow)

Notwendige Klammern in Bind-Ausdrücken nicht entfernen (#4964 von @TitanSnow)

Einrückung für ternären Ausdruck in Funktionsaufruf korrigieren (#4368 von @malcolmsgroves)

Kommentare in `import`-Anweisungen nicht verschieben (#5016 von @ericsakmar)

Instabile Kommentarformatierung in `while`-Schleifen beheben (#5251 von @jaideng123)

Kommentare zwischen Funktionsdeklaration und Rumpf stabil formatieren (#5250 von @jaideng123)

JSX

Logische Ausdrucksketten in JSX nicht umbrechen (#5092 von @duailibe)

Geschütztes Leerzeichen nicht in reguläres Leerzeichen umwandeln (#5165 von @vjeux, #5334 von @ikatyang)

Einfache JSX-Öffnungstags nicht umbrechen (#5078 von @duailibe)

Regression bei Pfeilfunktionen in JSX-Ausdrücken beheben (#5063 von @ikatyang)

Flow

Inline-Generics mit einem einzelnen Bezeichner (#5066 von @duailibe)

Klassen in `extends` nicht immer inline setzen (#5244 von @aquibm)

Überflüssige Klammern für Async-Funktionen in `export default` entfernen (#5303 von @jbrown215)

TypeScript

ASI-Schutz für Non-Null-Assertion hinzugefügt (#5262 by @duailibe)

Kein zusätzliches Semikolon für Methodensignatur bei `prettier-ignore` (#5160 von @onurtemizkan)

Ungültige Klammern bei Destrukturierung mit Standardwert korrigiert (#5096 von @ikatyang)

Kein Semikolon für Klassen-Eigenschaften mit Modifikatoren im `--no-semi`-Modus (#5083 von @ikatyang)

Klammern für komplexe Knoten in `extends` von ClassExpression beibehalten (#5074 von @ikatyang)

Notwendige Klammern für TSOptionalType beibehalten (#5056 von @ikatyang)

CSS

Korrekte Ausgabe bei Frontmatter und `/* prettier-ignore */` (#5103 von @ikatyang)

Zeilenumbrüche in CSS-in-JS-Templates beibehalten (#5240 von @onurtemizkan)

Markdown

Nachgestellte Leerzeichen bei Frontmatter-Trennzeichen erlaubt (#5107 von @ikatyang)

Keine Leerzeichen zwischen Latein und Hangul einfügen (#5040 von @ikatyang)

Führende und abschließende Zeilenumbrüche in umrandeten Codeblöcken erhalten (#5038 by @ikatyang)

Fußnotendefinition inline darstellen, wenn nur ein einzeiliger Absatz vorhanden ist (#5025 by @ikatyang)

Listen korrekt vor Leerzeichen-basierten Zeilenumbrüchen darstellen (#5024 by @ikatyang)

YAML

Anführungszeichen korrekt escapen (#5236 by @ikatyang)

Nachfolgende Kommentare für Dokumente und Dokumentköpfe erhalten (#5027 by @ikatyang)