Prettier 2.2: Neue JavaScript-Parser, TS 4.1 und eigenständige ESM-Bundles

20. November 2020 · 17 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 unterstützt die neuen JavaScript-Parser espree und meriyah, bietet Unterstützung für TypeScript 4.1, liefert eigenständige ESM-Bundles für moderne Browser und enthält viele Fehlerbehebungen und Verbesserungen!

Höhepunkte

JavaScript

Hinzufügen der `espree`- und `meriyah`-Parser (#9000, #9514 von @fisker)

Zwei neue Werte für die parser-Option wurden hinzugefügt:

espree - der Standard-Parser von ESLint.

Beachte, dass espree nur für abgeschlossene ECMAScript-Vorschläge funktioniert und strenger ist als der babel-Parser.
meriyah - Ein schneller JavaScript-Parser, Nachfolger von cherow.

TypeScript

Unterstützung für TypeScript 4.1 (#9473, #9636 von @sosukesuzuki)

Key Remapping In Mapped Types

// Input
type MappedTypeWithNewKeys<T> = {
  [K in keyof T as NewKeyType]: T[K]
};

// Prettier 2.1
SyntaxError: Unexpected token, expected "]" (2:17)
  1 | type MappedTypeWithNewKeys<T> = {
> 2 |   [K in keyof T as NewKeyType]: T[K]
    |                 ^
  3 | };

// Prettier 2.2
type MappedTypeWithNewKeys<T> = {
  [K in keyof T as NewKeyType]: T[K]
};

Template Literal Types

// Input
type HelloWorld = `Hello, ${keyof World}`

// Prettier 2.1
SyntaxError: Unexpected token, expected "}" (1:35)
> 1 | type HelloWorld = `Hello, ${keyof World}`
    |                                   ^

// Prettier 2.2
type HelloWorld = `Hello, ${keyof World}`;

API

Eigenständige ESM-Bundles (#8983 von @Monchi, @fisker)

Prettier bietet jetzt auch ES-Module an, die direkt in modernen Browsern verwendet werden können:

import prettier from "https://unpkg.com/prettier/esm/standalone.mjs";
import parserGraphql from "https://unpkg.com/prettier/esm/parser-graphql.mjs";

prettier.format("query {     }", {
  parser: "graphql",
  plugins: [parserGraphql],
});

Weitere Änderungen

JavaScript

Beachtung des Abstands zwischen Template-Werten in eingebettetem CSS (#9078 von @sosukesuzuki)

// Input
const style = css`
  width: ${size}${sizeUnit};
`;

// Prettier 2.1
const style = css`
  width: ${size} ${sizeUnit};
`;

// Prettier 2.2
const style = css`
  width: ${size}${sizeUnit};
`;

Korrektur von Kommentaren in Template-Literals mit eingebetteter Syntax (#9278 von @fisker)

// Input
html`${
      foo
  /* comment */
}`;
html`
${
      foo
  /* comment */
}
`;
graphql`${
      foo
  /* comment */
}`;
css`${
      foo
  /* comment */
}`;

// Prettier 2.1
html`${foo}`;
/* comment */
html`
  ${foo}
  /* comment */
`;
graphql`
  ${foo}
  /* comment */
`;
css`
  ${foo}
  /* comment */
`;


// Prettier 2.2
html`${
  foo
  /* comment */
}`;
html`
${
  foo
  /* comment */
}
`;
graphql`${
  foo
  /* comment */
}`;
css`${
  foo
  /* comment */
}`;

Verbesserte Formatierung bei Zuweisungen von Klassen mit langen Superklassennamen (#9341 von @sosukesuzuki)

Dies verbessert die Formatierung für Google Closure Library-Namensräume.

// Input
aaaaaaaa.bbbbbbbb.cccccccc.dddddddd.eeeeeeee.ffffffff.gggggggg2 = class extends (
  aaaaaaaa.bbbbbbbb.cccccccc.dddddddd.eeeeeeee.ffffffff.gggggggg1
) {
  method () {
    console.log("foo");
  }
};

// Prettier 2.1
aaaaaaaa.bbbbbbbb.cccccccc.dddddddd.eeeeeeee.ffffffff.gggggggg2 = class extends aaaaaaaa
  .bbbbbbbb.cccccccc.dddddddd.eeeeeeee.ffffffff.gggggggg1 {
  method() {
    console.log("foo");
  }
};

// Prettier 2.2
aaaaaaaa.bbbbbbbb.cccccccc.dddddddd.eeeeeeee.ffffffff.gggggggg2 = class extends (
  aaaaaaaa.bbbbbbbb.cccccccc.dddddddd.eeeeeeee.ffffffff.gggggggg1
) {
  method() {
    console.log("foo");
  }
};

Korrektur der Positionierung von führenden Kommentaren für den Rumpf von `while`-Anweisungen (#9345 von @sosukesuzuki)

// Input
while(1) // Comment
  foo();

// Prettier 2.1
while (
  1 // Comment
)
  foo();

// Prettier 2.2
while (1)
  // Comment
  foo();

Update auf `@babel/parser` 7.12 (#9408, #9476, #9597 von @sosukesuzuki)

Aktualisierung des JavaScript-Parsers auf @babel/parser 7.12. Dies behebt mehrere Fehler und unterstützt neue Syntax.

Unterstützung von Import Assertions

Die in Version 2.1 unterstützte "module attributes"-Proposal wurde signifikant geändert und in "import assertions" umbenannt.

import foo from "./foo.json" assert { type: "json" };

Unterstützung von Imports und Exports mit Zeichenketten-Namen

let happy = "happy";
export { happy as "😃" };

Unterstützung von statischen Klassenblöcken

class C {
  static #x = 42;
  static y;
  static {
    try {
      this.y = doSomethingWith(this.#x);
    } catch {
      this.y = "unknown";
    }
  }
}

Ungültige Template-Literale in HTML und Markdown unverändert belassen (#9431 von @fisker)

// Input
foo = html`<div>\u{prettier}</div>`;
foo = html`\u{prettier}${foo}pr\u{0065}ttier`;
foo = markdown`# \u{prettier}\u{0065}`;

// Prettier 2.1
foo = html``;
foo = html`null${foo}prettier`;
foo = markdown`
# \u{prettier}\u{0065}
`;

// Prettier 2.2
foo = html`<div>\u{prettier}</div>`;
foo = html`\u{prettier}${foo}pr\u{0065}ttier`;
foo = markdown`# \u{prettier}\u{0065}`;

Formatierung für `import {a as a}` und `export {a as a}` korrigieren (#9435 von @fisker)

// Input
import { a as a } from "a";
export { b as b } from "b";

// Prettier 2.1
import { a } from "a";
export { b } from "b";

// Prettier 2.2
import { a as a } from "a";
export { b as b } from "b";

Formatierung von JSX-Ausdrücken in yield-Anweisungen korrigieren (#9650 von @brainkim)

// Input
function* f() {
  yield <div>generator</div>
}
// Prettier 2.1
function* f() {
  yield (<div>generator</div>);
}
// Prettier 2.2
function* f() {
  yield <div>generator</div>;
}

Parameter von Funktionsausdrücken im umarmten letzten Argument vereinfachen (#9662 von @thorn0)

// Prettier 2.1
function* mySagas() {
  yield effects.takeEvery(rexpress.actionTypes.REQUEST_START, function* ({
    id
  }) {
    console.log(id);
    yield rexpress.actions(store).writeHead(id, 400);
    yield rexpress.actions(store).end(id, "pong");
    console.log("pong");
  });
}

// Prettier 2.2
function* mySagas() {
  yield effects.takeEvery(
    rexpress.actionTypes.REQUEST_START,
    function* ({ id }) {
      console.log(id);
      yield rexpress.actions(store).writeHead(id, 400);
      yield rexpress.actions(store).end(id, "pong");
      console.log("pong");
    }
  );
}

Absturz bei `require(/* comment */)` beheben (#9670 von @fisker)

// Input
require(/* comment */)

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

// Prettier 2.2
require(/* comment */);

TypeScript

Letztes Trennzeichen in ignorierten Objekttypen und Interfaces beibehalten (#9318 von @sosukesuzuki)

// Input
let x: {
  // prettier-ignore
  y: z;
};

// Prettier 2.1
let x: {
  // prettier-ignore
  y: z;;
};

// Prettier 2.2
let x: {
  // prettier-ignore
  y: z;
};

Klammern um Zuweisungen in Objektliteral-Eigenschaften hinzufügen (#9484 von @fisker)

// Input
foo = { bar: (a = b) };

// Prettier 2.1
foo = { bar: a = b };

// Prettier 2.2
foo = { bar: (a = b) };

Inkonsistenzen in der Formatierung von Typen zwischen `typescript` und `flow` beheben (#9521 von @fisker)

// Input
const name: SomeGeneric<
  Pick<Config, "ONE_LONG_PROP" | "ANOTHER_LONG_PROP">
> = null;

// Prettier 2.1 (--parser=typescript)
const name: SomeGeneric<Pick<
  Config,
  "ONE_LONG_PROP" | "ANOTHER_LONG_PROP"
>> = null;

// Prettier 2.1 (--parser=flow)
const name: SomeGeneric<
  Pick<Config, "ONE_LONG_PROP" | "ANOTHER_LONG_PROP">
> = null;

// Prettier 2.2 (typescript and flow parser)
const name: SomeGeneric<
  Pick<Config, "ONE_LONG_PROP" | "ANOTHER_LONG_PROP">
> = null;

`prettier-ignore` bei gemappten Typen korrigieren (#9551 von @fisker)

// Input
type a= {
    // prettier-ignore
    [A in B]: C  |  D
  }

// Prettier 2.1
type a = {
  // prettier-ignore
  A in B: C | D;
};

// Prettier 2.2
type a = {
    // prettier-ignore
    [A in B]: C  |  D
  };

Flow

Wechsel des `babel`-Parsers zu `babel-flow` bei Vorhandensein der `@flow`-Pragma (#9071 von @fisker)

Praktisch bedeutet dies: Solange Ihre Flow-Dateien die Pragma enthalten, können Sie sicher die .js-Erweiterung verwenden. Prettier wird sie korrekt parsen und formatieren, ohne zusätzliche Konfiguration. Zuvor erkannte der Parser die Pragma, aber es gab kleinere Probleme mit der Formatierung. Beispielsweise ist es nicht sicher, numerische Keys in Flow ohne Anführungszeichen zu belassen.

// Input (with --parser babel)
// @flow
f<T>({ "2": 2 })

// Prettier 2.1
// @flow
f<T>({ 2: 2 });

// Prettier 2.2
// @flow
f<T>({ "2": 2 });

Enumerationen mit unbekannten Mitgliedern (#9432 von @gkz)

Bisher wurden diese nicht unterstützt. Jetzt wird folgendes formatiert:

// Input
enum E {
  A,
  B,
  ...
}

// Prettier 2.1: parse error

// Prettier 2.2
enum E {
  A,
  B,
  ...
}

`this`-Parameterannotationen (#9457 von @dsainati1, #9489 von @fisker)

// Input
function f(this: string, a: number) {
}

type T = (this: boolean, a: number) => boolean;

// Prettier 2.1
function f(this: string, a: number) {}

type T = (a: number) => boolean;

// Prettier 2.2
function f(this: string, a: number) {
}

type T = (this: boolean, a: number) => boolean;

Unterstützung von `BigIntLiteralTypeAnnotation` und `BigIntTypeAnnotation` (#9523 von @fisker)

Hinzufügen der Unterstützung für BigIntLiteralTypeAnnotation und BigIntTypeAnnotation in Flow.

// Input
const foo: bigint = 1n;
const bar: baz<1n> = 1n;

// Prettier 2.1
Error: unknown type: "BigIntTypeAnnotation"
    at ...

// Prettier 2.2
const foo: bigint = 1n;
const bar: baz<1n> = 1n;

Behandlung weiterer einfacher Typen als nicht umbrechend in generischen Typannotationen (#9543 von @fisker)

// Input
const foo1: Fooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo<symbol> = a
const foo2: Fooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo<"STRING"> = a;
const foo3: Fooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo<0> = a;

// Prettier 2.1
const foo1: Fooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo<
  symbol
> = a;
const foo2: Fooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo<
  "STRING"
> = a;
const foo3: Fooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo<
  0
> = a;

// Prettier 2.2 (typescript and flow parser)
const foo1: Fooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo<symbol> = a
const foo2: Fooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo<"STRING"> = a;
const foo3: Fooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo<0> = a;

Fehlende Klammern um `prettier-ignore`-markierte Typassertionen korrigieren (#9553 von @fisker)

// Input
transform(
  // prettier-ignore
  (pointTransformer: (Point => Point))
);

// Prettier 2.1
transform(
  // prettier-ignore
  pointTransformer: (Point => Point)
);

// Prettier 2.2
transform(
  // prettier-ignore
  (pointTransformer: (Point => Point))
);

Verbesserung der Kommentartypenerkennung (#9563 von @fisker)

// Input
foo/*::<bar>*/(baz);
class Foo {
  bar( data: Array<string>) {}
}

// Prettier 2.1
foo/*:: <bar> */(baz);
class Foo {
  bar(data: Array/*:: <string> */) {}
}

// Prettier 2.2
foo/*:: <bar> */(baz);
class Foo {
  bar(data: Array<string>) {}
}

Less

Kommentare in Wertlisten korrigieren (#9356 von @thorn0)

// Input
@test-space-separated: #aaaaaa // Start with A
  #bbbbbb // then some B
  #cccccc; // and round it out with C

// Prettier 2.1
@test-space-separated: #aaaaaa a // Start with
  #bbbbbb b // then some
  #cccccc; // and round it out with C

// Prettier 2.2
@test-space-separated: #aaaaaa // Start with A
  #bbbbbb // then some B
  #cccccc; // and round it out with C

HTML

Absturz beim Lesen von `Node.sourceSpan` beheben (#9368 von @fisker)

<!-- Input -->
<strong>a</strong>-<strong>b</strong>-

<!-- Prettier 2.1 -->
TypeError: Cannot read property 'line' of undefined
    at forceNextEmptyLine ...

<!-- Prettier 2.2 -->
<strong>a</strong>-<strong>b</strong>-

Vue

Inkonsistente Formatierung von `v-for` beheben (#9225 von @zweimach)

<!-- Input -->
<template>
  <div
    v-for="({ longLongProp=42, anotherLongLongProp='Hello, World!' }, index) of longLongLongLongLongLongLongLongList"
  ></div>
  <div
    v-for="({firstValue, secondValue, thirdValue, fourthValue, fifthValue, sixthValue}, objectKey, index) in objectWithAVeryVeryVeryVeryLongName"
  ></div>
</template>

<!-- Prettier 2.1 -->
<template>
  <div
    v-for="({ longLongProp = 42, anotherLongLongProp = 'Hello, World!' },
    index) of longLongLongLongLongLongLongLongList"
  ></div>
  <div
    v-for="({
      firstValue,
      secondValue,
      thirdValue,
      fourthValue,
      fifthValue,
      sixthValue,
    },
    objectKey,
    index) in objectWithAVeryVeryVeryVeryLongName"
  ></div>
</template>

<!-- Prettier 2.2 -->
<template>
  <div
    v-for="(
      { longLongProp = 42, anotherLongLongProp = 'Hello, World!' }, index
    ) of longLongLongLongLongLongLongLongList"
  ></div>
  <div
    v-for="(
      {
        firstValue,
        secondValue,
        thirdValue,
        fourthValue,
        fifthValue,
        sixthValue,
      },
      objectKey,
      index
    ) in objectWithAVeryVeryVeryVeryLongName"
  ></div>
</template>

Inkonsistente Formatierung von Slots beheben, Unterstützung von Vue 3 `script[setup]` und `style[vars]` (#9609 von @fisker)

<!-- Input -->
<script setup="props, {emit }"></script>
<style vars="{color }"></style>
<template>
  <div>
<div v-slot="{destructuring:{   a:{b}}}"/>
<div v-slot:name="{destructuring:{   a:{b}}}"/>
<div #default="{destructuring:{   a:{b}}}"/>
<slot slot-scope="{destructuring:{   a:{b}}}"/>
</div>
</template>

<!-- Prettier 2.1 -->
<script setup="props, {emit }"></script>
<style vars="{color }"></style>
<template>
  <div>
    <div v-slot="{ destructuring: { a: { b } } }" />
    <div v-slot:name="{ destructuring: { a: { b } } }" />
    <div #default="{ destructuring: { a: { b } } }" />
    <slot
      slot-scope="{
        destructuring: {
          a: { b },
        },
      }"
    />
  </div>
</template>

<!-- Prettier 2.2 -->
<script setup="props, { emit }"></script>
<style vars="{ color }"></style>
<template>
  <div>
    <div
      v-slot="{
        destructuring: {
          a: { b },
        },
      }"
    />
    <div
      v-slot:name="{
        destructuring: {
          a: { b },
        },
      }"
    />
    <div
      #default="{
        destructuring: {
          a: { b },
        },
      }"
    />
    <slot
      slot-scope="{
        destructuring: {
          a: { b },
        },
      }"
    />
  </div>
</template>

Handlebars (Alpha)

Instabile Zeilenumbrüche nach `<Textarea />` beheben (#9403 von @fisker, Fehlerbehebungen in `simple-html-tokenizer` von @rwjblue)

// Input
<Textarea />
{{#if true}}
  Test
{{/if}}

// Prettier 2.1
<Textarea />

{{#if true}}
  Test
{{/if}}

// Prettier 2.1 (second format)
<Textarea />
{{#if true}}
  Test
{{/if}}

// Prettier 2.2
<Textarea />
{{#if true}}
  Test
{{/if}}

Markdown

Aktualisierung von remark-math auf 3.0.1; Dollarzeichen nur bei ursprünglicher Escape-Sequenz escapen (#7938 von @fisker und @thorn0)

<!-- Input -->
Paragraph with $14 million.

Paragraph with $14 million.    But if more $dollars on the same line...

<!-- Prettier 2.1 -->
Paragraph with \$14 million.

Paragraph with $14 million.    But if more $dollars on the same line...

<!-- Prettier 2.2 -->
Paragraph with $14 million.

Paragraph with $14 million. But if more $dollars on the same line...

Fehlende Leerzeilen in eingefassten Codeblöcken ohne abschließenden Fence korrigieren (#8786 von @fisker)

require("prettier").format("```a\n\n\n\n", { parser: "markdown" });

<!-- Prettier 2.1 -->
'```a\n\n```\n'

<!-- Prettier 2.2 -->
'```a\n\n\n\n```\n'

Unterstützung für `[[wiki-style]]`-Links hinzugefügt (#9275 von @iamrecursion)

Die Unterstützung für [[wiki-style]]-Links stellt sicher, dass sie durch die Formatierung von Prettier nicht durch Zeilenumbrüche unterbrochen werden.
Der Inhalt des Links (zwischen den [[]]-Klammern) wird als Rohtext behandelt. Dies liegt daran, dass die verschiedenen Tools, die auf die [[]]-Syntax angewiesen sind, sich nicht darauf einigen, was zwischen ihnen zulässig ist.

<!-- Input -->
If I have a prose that forces a wiki link to end up crossing the [[line width limit]] like this. It's wrapped into an invalid state.

<!-- Prettier 2.1 -->
If I have a prose that forces a wiki link to end up crossing the [[line width
limit]] like this. It's wrapped into an invalid state.

<!-- Prettier 2.2 -->
If I have a prose that forces a wiki link to end up crossing the
[[line width limit]] like this. It's wrapped into an invalid state.

Anpassung der Codeblock-Spracherkennung an andere gängige Tools (#9365 von @kachkaev)

Seit Prettier 1.12 werden Codeblöcke wie ```js {something=something} als JavaScript erkannt und entsprechend formatiert.
Damals nutzten nur wenige Tools Leerzeichen zur Trennung von Sprache und Metadaten, daher wurde beschlossen, Leerzeichen optional zu machen und somit auch ```js{something=something} als JavaScript zu erkennen.

Mit der Veröffentlichung von Remark v8 (das von Prettier verwendet wird) traten bei einigen seltenen Randfällen Inkonsistenzen in der Codeblock-Erkennung auf.
Zudem wurde festgestellt, dass Prettiers Formatierung nicht mit der Syntaxhervorhebung in VSCode übereinstimmte.
Um die Konsistenz zwischen verschiedenen Tools zu fördern und besser an den Commonmark-Standard anzupassen, ist die Verwendung von Leerzeichen zwischen Sprachbezeichner und Metadaten nun verpflichtend.

<!-- Input -->
```js {something=something}
console.log    (    "hello world"    );
```

```js{something=something}
console.log    (    "hello world"    );
```

<!-- Prettier 2.1 -->
```js {something=something}
console.log("hello world");
```

```js{something=something}
console.log("hello world");
```

<!-- Prettier 2.2 -->
```js {something=something}
console.log("hello world");
```

```js{something=something}
console.log    (    "hello world"    );
```

Behebung: Zusätzliche Leerzeile nach leeren Tabellen (#9654 von @fisker)

<!-- Input -->
Test line 1

| Specify the selected option : | Option 1 |
| ----------------------------- | -------- |

Test line 6

<!-- Prettier 2.1 -->
Test line 1

| Specify the selected option : | Option 1 |
| ----------------------------- | -------- |


Test line 6

<!-- Prettier 2.2 -->
Test line 1

| Specify the selected option : | Option 1 |
| ----------------------------- | -------- |

Test line 6

MDX

Behebung: Zusätzliche Leerzeilen in JSX (#9267 von @fisker)

<!-- Input -->
# title

<Jsx>

text

</Jsx>

<!-- Prettier 2.1 -->
# title

<Jsx>

text

</Jsx>

(Extra empty lines added after `<Jsx>` and `</Jsx>`)

<!-- Prettier 2.2 -->
# title

<Jsx>

text

</Jsx>

YAML

Anwendung der `trailingComma`-Option (#9665 von @fisker)

Bei --trailing-comma=none wird kein nachgestelltes Komma zu flowMapping und flowSequence hinzugefügt.

# Input
flow-mapping:
  {
    "object-does-not-fit-within-print-width": "------",
    "TEST": "comma IS added here"
  }
flow-sequence:
  [
    "object-does-not-fit-within-print-width", "------",
    "TEST", "comma IS added here"
  ]

# Prettier 2.1
mapping:
  {
    "object-does-not-fit-within-print-width": "------",
    "TEST": "comma IS added here",
  }
flow-sequence:
  [
    "object-does-not-fit-within-print-width",
    "------",
    "TEST",
    "comma IS added here",
  ]

# Prettier 2.2
flow-mapping:
  {
    "object-does-not-fit-within-print-width": "------",
    "TEST": "comma IS added here"
  }
flow-sequence:
  [
    "object-does-not-fit-within-print-width",
    "------",
    "TEST",
    "comma IS added here"
  ]

Behebung: Kommentare innerhalb von `flowMapping` und `flowSequence` (#9669 von @fisker)

# Input
a:
  [
    a, b,
    # comment
  ]

b:
  # prettier-ignore
  {
    a: 1, b: 2,
    # comment
  }

# Prettier 2.1
a: [a, b]
  # comment

b:
  # prettier-ignore
  {
    a: 1, b: 2,
    # comment
  }
  # comment


# Prettier 2.1 (second format)
a:
  [a, b]
  # comment

b:
  # prettier-ignore
  {
    a: 1, b: 2,
    # comment
  }
  # comment
  # comment


# Prettier 2.2
a: [
    a,
    b,
    # comment
  ]

b:
  # prettier-ignore
  {
    a: 1, b: 2,
    # comment
  }

API

Keine automatische Erkennung des `json`-Parsers für `.jsonl`-Dateien (#9371 von @fisker)

// Prettier 2.1
$ prettier --check .
Checking formatting...
[error] bad.jsonl: SyntaxError: Unexpected token (2:1)
[error]   1 | '{"type": "t/f", "head": "England", "relation": "invaded", "tail": "United States"}'
[error] > 2 | '{"type": "t/f", "head": "England", "relation": "attacked", "tail": "Baltimore"}'
[error]     | ^
[error]   3 |
All matched files use Prettier code style!

// Prettier 2.2
$ prettier --check .
Checking formatting...
All matched files use Prettier code style!

Leerzeichen-Suffix-Inhalte am Dokumentende ausgeben (#9703 von @dangmai)

Prettier gab Leerzeichen-Suffix-Inhalte am Dokumentende nicht aus, wenn kein nachgestellter Zeilenumbruch vorhanden war. Diese Korrektur erzwingt die Ausgabe aller Inhalte, auch ohne abschließende Zeilenumbrüche.

CLI

Verschiebung der pre-commit-Unterstützung nach github.com/pre-commit/mirrors-prettier (#8937 von @FloChehab)

Die pre-commit-Unterstützung wurde nach https://github.com/pre-commit/mirrors-prettier verschoben. Bitte aktualisieren Sie Ihre .pre-commit-config.yaml-Datei entsprechend.

- - repo: https://github.com/prettier/prettier
+ - repo: https://github.com/pre-commit/mirrors-prettier
-   rev: "2.2.0"
+   rev: "v2.2.0"
    hooks:
     - id: prettier

Korrektur: Fehler bei Verzeichnissen und Dateien mit numerischen Namen (#9298 von @fisker)

$ cat 1/index.js
hello('world')

// Prettier 2.1
$ prettier 1
[error] The "path" argument must be of type string. Received type number (1)

// Prettier 2.2
$ prettier 1
hello("world");

Höhepunkte​

JavaScript​

Hinzufügen der espree- und meriyah-Parser (#9000, #9514 von @fisker)​

TypeScript​

Unterstützung für TypeScript 4.1 (#9473, #9636 von @sosukesuzuki)​

Key Remapping In Mapped Types​

Template Literal Types​

API​

Eigenständige ESM-Bundles (#8983 von @Monchi, @fisker)​

Weitere Änderungen​

JavaScript​

Beachtung des Abstands zwischen Template-Werten in eingebettetem CSS (#9078 von @sosukesuzuki)​

Korrektur von Kommentaren in Template-Literals mit eingebetteter Syntax (#9278 von @fisker)​

Verbesserte Formatierung bei Zuweisungen von Klassen mit langen Superklassennamen (#9341 von @sosukesuzuki)​

Korrektur der Positionierung von führenden Kommentaren für den Rumpf von while-Anweisungen (#9345 von @sosukesuzuki)​

Update auf @babel/parser 7.12 (#9408, #9476, #9597 von @sosukesuzuki)​

Unterstützung von Import Assertions​

Unterstützung von Imports und Exports mit Zeichenketten-Namen​

Unterstützung von statischen Klassenblöcken​

Ungültige Template-Literale in HTML und Markdown unverändert belassen (#9431 von @fisker)​

Formatierung für import {a as a} und export {a as a} korrigieren (#9435 von @fisker)​

Formatierung von JSX-Ausdrücken in yield-Anweisungen korrigieren (#9650 von @brainkim)​

Parameter von Funktionsausdrücken im umarmten letzten Argument vereinfachen (#9662 von @thorn0)​

Absturz bei require(/* comment */) beheben (#9670 von @fisker)​

TypeScript​

Letztes Trennzeichen in ignorierten Objekttypen und Interfaces beibehalten (#9318 von @sosukesuzuki)​

Klammern um Zuweisungen in Objektliteral-Eigenschaften hinzufügen (#9484 von @fisker)​

Inkonsistenzen in der Formatierung von Typen zwischen typescript und flow beheben (#9521 von @fisker)​

prettier-ignore bei gemappten Typen korrigieren (#9551 von @fisker)​

Flow​

Wechsel des babel-Parsers zu babel-flow bei Vorhandensein der @flow-Pragma (#9071 von @fisker)​

Enumerationen mit unbekannten Mitgliedern (#9432 von @gkz)​

this-Parameterannotationen (#9457 von @dsainati1, #9489 von @fisker)​

Unterstützung von BigIntLiteralTypeAnnotation und BigIntTypeAnnotation (#9523 von @fisker)​

Behandlung weiterer einfacher Typen als nicht umbrechend in generischen Typannotationen (#9543 von @fisker)​

Fehlende Klammern um prettier-ignore-markierte Typassertionen korrigieren (#9553 von @fisker)​

Verbesserung der Kommentartypenerkennung (#9563 von @fisker)​

Less​

Kommentare in Wertlisten korrigieren (#9356 von @thorn0)​

HTML​

Absturz beim Lesen von Node.sourceSpan beheben (#9368 von @fisker)​

Vue​

Inkonsistente Formatierung von v-for beheben (#9225 von @zweimach)​

Inkonsistente Formatierung von Slots beheben, Unterstützung von Vue 3 script[setup] und style[vars] (#9609 von @fisker)​

Handlebars (Alpha)​

Instabile Zeilenumbrüche nach <Textarea /> beheben (#9403 von @fisker, Fehlerbehebungen in simple-html-tokenizer von @rwjblue)​

Markdown​

Aktualisierung von remark-math auf 3.0.1; Dollarzeichen nur bei ursprünglicher Escape-Sequenz escapen (#7938 von @fisker und @thorn0)​

Fehlende Leerzeilen in eingefassten Codeblöcken ohne abschließenden Fence korrigieren (#8786 von @fisker)​

Unterstützung für [[wiki-style]]-Links hinzugefügt (#9275 von @iamrecursion)​

Anpassung der Codeblock-Spracherkennung an andere gängige Tools (#9365 von @kachkaev)​

Behebung: Zusätzliche Leerzeile nach leeren Tabellen (#9654 von @fisker)​

MDX​

Behebung: Zusätzliche Leerzeilen in JSX (#9267 von @fisker)​

YAML​

Anwendung der trailingComma-Option (#9665 von @fisker)​

Behebung: Kommentare innerhalb von flowMapping und flowSequence (#9669 von @fisker)​

API​

Keine automatische Erkennung des json-Parsers für .jsonl-Dateien (#9371 von @fisker)​

Leerzeichen-Suffix-Inhalte am Dokumentende ausgeben (#9703 von @dangmai)​

CLI​

Verschiebung der pre-commit-Unterstützung nach github.com/pre-commit/mirrors-prettier (#8937 von @FloChehab)​

Korrektur: Fehler bei Verzeichnissen und Dateien mit numerischen Namen (#9298 von @fisker)​

Höhepunkte

JavaScript

Hinzufügen der `espree`- und `meriyah`-Parser (#9000, #9514 von @fisker)

TypeScript

Unterstützung für TypeScript 4.1 (#9473, #9636 von @sosukesuzuki)

Key Remapping In Mapped Types

Template Literal Types

API

Eigenständige ESM-Bundles (#8983 von @Monchi, @fisker)

Weitere Änderungen

JavaScript

Beachtung des Abstands zwischen Template-Werten in eingebettetem CSS (#9078 von @sosukesuzuki)

Korrektur von Kommentaren in Template-Literals mit eingebetteter Syntax (#9278 von @fisker)

Verbesserte Formatierung bei Zuweisungen von Klassen mit langen Superklassennamen (#9341 von @sosukesuzuki)

Korrektur der Positionierung von führenden Kommentaren für den Rumpf von `while`-Anweisungen (#9345 von @sosukesuzuki)

Update auf `@babel/parser` 7.12 (#9408, #9476, #9597 von @sosukesuzuki)

Unterstützung von Import Assertions

Unterstützung von Imports und Exports mit Zeichenketten-Namen

Unterstützung von statischen Klassenblöcken

Ungültige Template-Literale in HTML und Markdown unverändert belassen (#9431 von @fisker)

Formatierung für `import {a as a}` und `export {a as a}` korrigieren (#9435 von @fisker)

Formatierung von JSX-Ausdrücken in yield-Anweisungen korrigieren (#9650 von @brainkim)

Parameter von Funktionsausdrücken im umarmten letzten Argument vereinfachen (#9662 von @thorn0)

Absturz bei `require(/* comment */)` beheben (#9670 von @fisker)

TypeScript

Letztes Trennzeichen in ignorierten Objekttypen und Interfaces beibehalten (#9318 von @sosukesuzuki)

Klammern um Zuweisungen in Objektliteral-Eigenschaften hinzufügen (#9484 von @fisker)

Inkonsistenzen in der Formatierung von Typen zwischen `typescript` und `flow` beheben (#9521 von @fisker)

`prettier-ignore` bei gemappten Typen korrigieren (#9551 von @fisker)

Flow

Wechsel des `babel`-Parsers zu `babel-flow` bei Vorhandensein der `@flow`-Pragma (#9071 von @fisker)

Enumerationen mit unbekannten Mitgliedern (#9432 von @gkz)

`this`-Parameterannotationen (#9457 von @dsainati1, #9489 von @fisker)

Unterstützung von `BigIntLiteralTypeAnnotation` und `BigIntTypeAnnotation` (#9523 von @fisker)

Behandlung weiterer einfacher Typen als nicht umbrechend in generischen Typannotationen (#9543 von @fisker)

Fehlende Klammern um `prettier-ignore`-markierte Typassertionen korrigieren (#9553 von @fisker)

Verbesserung der Kommentartypenerkennung (#9563 von @fisker)

Less

Kommentare in Wertlisten korrigieren (#9356 von @thorn0)

HTML

Absturz beim Lesen von `Node.sourceSpan` beheben (#9368 von @fisker)

Vue

Inkonsistente Formatierung von `v-for` beheben (#9225 von @zweimach)

Inkonsistente Formatierung von Slots beheben, Unterstützung von Vue 3 `script[setup]` und `style[vars]` (#9609 von @fisker)

Handlebars (Alpha)

Instabile Zeilenumbrüche nach `<Textarea />` beheben (#9403 von @fisker, Fehlerbehebungen in `simple-html-tokenizer` von @rwjblue)

Markdown

Aktualisierung von remark-math auf 3.0.1; Dollarzeichen nur bei ursprünglicher Escape-Sequenz escapen (#7938 von @fisker und @thorn0)

Fehlende Leerzeilen in eingefassten Codeblöcken ohne abschließenden Fence korrigieren (#8786 von @fisker)

Unterstützung für `[[wiki-style]]`-Links hinzugefügt (#9275 von @iamrecursion)

Anpassung der Codeblock-Spracherkennung an andere gängige Tools (#9365 von @kachkaev)

Behebung: Zusätzliche Leerzeile nach leeren Tabellen (#9654 von @fisker)

MDX

Behebung: Zusätzliche Leerzeilen in JSX (#9267 von @fisker)

YAML

Anwendung der `trailingComma`-Option (#9665 von @fisker)

Behebung: Kommentare innerhalb von `flowMapping` und `flowSequence` (#9669 von @fisker)

API

Keine automatische Erkennung des `json`-Parsers für `.jsonl`-Dateien (#9371 von @fisker)

Leerzeichen-Suffix-Inhalte am Dokumentende ausgeben (#9703 von @dangmai)

CLI

Verschiebung der pre-commit-Unterstützung nach github.com/pre-commit/mirrors-prettier (#8937 von @FloChehab)

Korrektur: Fehler bei Verzeichnissen und Dateien mit numerischen Namen (#9298 von @fisker)