Zum Hauptinhalt springen

Prettier 3.3: Neue Flow-Funktionen und viele Fehlerbehebungen

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

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

Dieses Release enthält Unterstützung für neue Flow-Funktionen wie Komponenten- und Hook-Deklarationen. Alle diese Funktionen wurden von den Ingenieur*innen des Flow-Teams implementiert – vielen Dank.

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

Höhepunkte​

Flow​

Unterstützung für declare namespace-Ausgabe (#16066 von @SamChou19815)​

// Input
declare namespace foo {
  declare var bar: string;
}

// Prettier 3.2
// does not parse

// Prettier 3.3
declare namespace foo {
  declare var bar: string;
}

Unterstützung für die Ausgabe der Komponentensyntax (#16191 von @SamChou19815)​

// Input
component MyComponent(a: string, b: number) renders SomeComponent {
  return <OtherComponent />;
}
hook useMyHook(a: string) {
  return useState(a);
}

// Prettier 3.2
// does not parse

// Prettier 3.3
component MyComponent(a: string, b: number) renders SomeComponent {
  return <OtherComponent />;
}
hook useMyHook(a: string) {
  return useState(a);
}

Unterstützung für Big-Int-Enums (#16268 von @gkz)​

Fügt Unterstützung für Big-Int-Flow-Enums hinzu.

// Input
enum E {
  A = 0n,
  B = 1n,
}

// Prettier 3.2
// error

// Prettier 3.3
enum E {
  A = 0n,
  B = 1n,
}

Unterstützung für inexakte Tupeltypen (#16271 von @gkz)​

Fügt Unterstützung für inexakte Tupeltypen in Flow hinzu.

// Input
type T = [number, ...];

// Prettier 3.2
type T = [number];

// Prettier 3.3
type T = [number, ...];

Unterstützung für die 'implies'-Typwächter-Variante (#16272 von @gkz)​

Fügt Unterstützung für Flows implies-Typwächter-Variante hinzu. Aktualisiert außerdem die flow-parser-Abhängigkeit.

// Input
declare function f(x: mixed): implies x is T;

// Prettier 3.2
// error

// Prettier 3.3
declare function f(x: mixed): implies x is T;

Weitere Änderungen​

JavaScript​

Entfernen von Anführungszeichen bei Schlüsseln in Import-Attributen (#15888 von @sosukesuzuki)​

// Input
import json from "./mod.json" with { "type": "json" };

// Prettier 3.2
import json from "./mod.json" with { "type": "json" };

// Prettier 3.3
import json from "./mod.json" with { type: "json" };

Behebung instabiler Objektausgabe (#16058 von @fisker)​

// Input
a = {"\a": 1, "b": 2}

// Prettier 3.2 (--quote-props consistent)
a = { "a": 1, "b": 2 };

// Prettier 3.2 (--quote-props as-needed)
a = { "a": 1, b: 2 };

// Prettier 3.3
a = { a: 1, b: 2 };

Formatierung eingebetteten GQL in Template-Literal-Anweisungen (#16064 von @keithlayne)​

// Input
/* GraphQL */ `
  query foo { id }
`;

// Prettier 3.2
/* GraphQL */ `
  query foo { id }
`;

// Prettier 3.3
/* GraphQL */ `
  query foo {
    id
  }
`;

Verbesserte Formatierung des React-useImperativeHandle-Hooks (#16070 von @Jaswanth-Sriram-Veturi)​

// Input
useImperativeHandle(ref, () => {
  /* Function body */
}, []);

// Prettier 3.2
useImperativeHandle(
  ref,
  () => {
    /* Function body */
  },
  [],
);

// Prettier 3.3
useImperativeHandle(ref, () => {
  /* Function body */
}, []);

Ermöglicht Zeilenumbrüche in Member-Ausdrücken innerhalb von Template-Interpolationen (#16116 von @bakkot)​

Wenn bereits ein Zeilenumbruch in einer Template-Interpolation vorhanden ist, bleibt dieser auch bei Member-Ausdrücken erhalten. Hinweis: (seit #15209) fügt Prettier keinen Zeilenumbruch in Interpolationen ein, wo noch keiner vorhanden ist.

// Input
`template with ${
    very.very.very.very.very.very.very.very.very.very.very.long.chain
}`;

// Prettier 3.2
`template with ${very.very.very.very.very.very.very.very.very.very.very.long.chain}`;

// Prettier 3.3
`template with ${
  very.very.very.very.very.very.very.very.very.very.very.long.chain
}`;

Behebung des dynamischen Imports bei Template-String-Modulquellen (#16267 von @fisker)​

// Input
const module = await import(`data:text/javascript,
  console.log("RUN");
`);

// Prettier 3.2
const module = await (`data:text/javascript,
  console.log("RUN");
`);

// Prettier 3.3
const module = await import(`data:text/javascript,
  console.log("RUN");
`);

TypeScript​

Fehlende Klammern für TSInferType hinzugefügt (#16031 von @fisker)​

// Input
type Foo<T> = T extends (infer U extends number) | { a: infer U extends number }
  ? U
  : never;

// Prettier 3.2
type Foo<T> = T extends infer U extends number | { a: infer U extends number }
  ? U
  : never;

// Prettier 3.3
type Foo<T> = T extends (infer U extends number) | { a: infer U extends number }
  ? U
  : never;

Fehler bei doppelten Zugriffsmodifikatoren auslösen (#16040 von @fisker, @auvred)​

// Input
class Foo {
  public public bar() {};
}

// Prettier 3.2
class Foo {
  public bar() {}
}

// Prettier 3.3
SyntaxError: Accessibility modifier already seen. (2:10)
  1 | class Foo {
> 2 |   public public bar() {};
    |          ^^^^^^
  3 | }

--no-semi für readonly-Klassenfelder berücksichtigen (#16133 von @sxzz)​

// Input
class A {
  field
  readonly [expr] = true
}

// Prettier 3.2
class A {
  field;
  readonly [expr] = true
}

// Prettier 3.3
class A {
  field
  readonly [expr] = true
}

Notwendige Klammern für yield-Ausdrücke hinzugefügt (#16194 von @kirkwaiblinger)​

Fügt Klammern um yield-Ausdrücke hinzu, wenn das übergeordnete Element eine spitze-Klammer-Typassertion ist.

// Input
function* g() {
  const y = <T>(yield x);
}

// Prettier 3.2
function* g() {
  const y = <T>yield x;
}

// Prettier 3.3
function* g() {
  const y = <T>(yield x);
}

Markdown​

Verbesserte Umbrüche für Codeblöcke in Markdown und JSX in MDX (#15993 von @seiyab)​

<!-- Input -->
```css
img {
  filter: drop-shadow(2px 2px 0 hsl(300deg 100% 50%)) drop-shadow(
      -2px -2px 0 hsl(210deg 100% 50%)
)
    drop-shadow(2px 2px 0 hsl(120deg 100% 50%)) drop-shadow(
      -2px -2px 0 hsl(30deg 100% 50%)
    );
}
```

<!-- Prettier 3.2 -->
```css
img {
  filter: drop-shadow(2px 2px 0 hsl(300deg 100% 50%)) drop-shadow(
      -2px -2px 0 hsl(210deg 100% 50%)
    )
    drop-shadow(2px 2px 0 hsl(120deg 100% 50%)) drop-shadow(
      -2px -2px 0 hsl(30deg 100% 50%)
    );
}
```

<!-- Prettier 3.3 -->
```css
img {
  filter: drop-shadow(2px 2px 0 hsl(300deg 100% 50%))
    drop-shadow(-2px -2px 0 hsl(210deg 100% 50%))
    drop-shadow(2px 2px 0 hsl(120deg 100% 50%))
    drop-shadow(-2px -2px 0 hsl(30deg 100% 50%));
}
```
<!-- Input -->
<ExternalLink href="http://example.com">Prettier</ExternalLink> is an opinionated-code-formatter-that-support-many-languages-and-integrate-with-most-editors

<!-- Prettier 3.2 -->
<ExternalLink href="http://example.com">Prettier</ExternalLink> is an opinionated-code-formatter-that-support-many-languages-and-integrate-with-most-editors

<!-- Prettier 3.3 -->
<ExternalLink href="http://example.com">Prettier</ExternalLink> is an
opinionated-code-formatter-that-support-many-languages-and-integrate-with-most-editors

Zeilenumbruch zwischen Fußnotendefinitionen in Markdown hinzugefügt (#16063 von @Atema)​

<!-- Input -->
[^a]: Footnote A

[^b]: Footnote B

<!-- Prettier 3.2 -->
[^a]: Footnote A
[^b]: Footnote B

<!-- Prettier 3.3 -->
[^a]: Footnote A

[^b]: Footnote B

Verbesserte Umbrüche für Markdown/MDX (#16158 von @seiyab)​

{ "proseWrap": "always" }
<!-- Input -->
\
word very-very-very-very-very-very-very-very-very-very-long-word very-very-very-very-very-very-very-very-very-very-long-word

<!-- Prettier 3.2 -->
\
word very-very-very-very-very-very-very-very-very-very-long-word very-very-very-very-very-very-very-very-very-very-long-word

<!-- Prettier 3.3 -->
\
word very-very-very-very-very-very-very-very-very-very-long-word
very-very-very-very-very-very-very-very-very-very-long-word

API​

Unterstützung für package.yaml-Konfiguration hinzugefügt (#16157 von @danielbayley)​

Aktiviert das Lesen der prettier-Konfiguration aus package.yaml.

# package.yaml
prettier:
  semi: false
  singleQuote: true