Prettier 3.3 : Nouvelles fonctionnalités Flow et nombreuses corrections de bugs

Traduction Bêta Non Officielle

Cette page a été traduite par PageTurner AI (bêta). Non approuvée officiellement par le projet. Vous avez trouvé une erreur ? Signaler un problème →

Cette version inclut la prise en charge de nouvelles fonctionnalités Flow telles que les déclarations de composants et de hooks. Toutes ces fonctionnalités ont été implémentées par les ingénieurs de l'équipe Flow, merci à eux.

Si vous appréciez Prettier et souhaitez soutenir notre travail, envisagez de nous sponsoriser directement via notre OpenCollective ou en soutenant les projets dont nous dépendons, comme typescript-eslint, remark et Babel. Merci pour votre soutien continu !

Principales fonctionnalités

Flow

Prise en charge de l'impression de declare namespace (#16066 par @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;
}

Prise en charge de l'impression de la syntaxe de composant (#16191 par @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);
}

Prise en charge des Enums big int (#16268 par @gkz)

Ajoute la prise en charge des Flow Enums big int.

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

// Prettier 3.2
// error

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

Prise en charge des types de tuples inexacts (#16271 par @gkz)

Ajoute la prise en charge des types de tuples inexacts de Flow.

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

// Prettier 3.2
type T = [number];

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

Prise en charge de la variante de garde de type 'implies' (#16272 par @gkz)

Ajoute la prise en charge de la variante de garde de type implies de Flow. Met également à jour la dépendance flow-parser.

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

Autres changements

JavaScript

Suppression des guillemets des clés dans les attributs d'import (#15888 par @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" };

Correction de l'impression instable des objets (#16058 par @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 };

Formatage du GQL intégré dans les instructions de template literals (#16064 par @keithlayne)

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

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

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

Amélioration du formatage du hook React useImperativeHandle (#16070 par @Jaswanth-Sriram-Veturi)

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

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

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

Autorisation des sauts de ligne dans les expressions de membre dans les interpolations de templates (#16116 par @bakkot)

Lorsqu'un saut de ligne existe déjà dans une interpolation de template, il est conservé même s'il s'agit d'une expression de membre. Notez que (depuis #15209) Prettier n'insérera pas de saut de ligne dans une interpolation lorsqu'il n'en existe pas déjà.

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

Correction de l'import dynamique lorsque la source du module est une template string (#16267 par @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

Ajout de parenthèses manquantes pour TSInferType (#16031 par @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;

Générer des erreurs pour les modificateurs d'accessibilité dupliqués (#16040 par @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 | }

Respecter --no-semi pour les champs de classe en lecture seule (#16133 par @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
}

Ajout de parenthèses nécessaires aux expressions yield (#16194 par @kirkwaiblinger)

Ajouter des parenthèses autour des expressions yield si l'élément parent est une assertion de type entre chevrons.

// 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

Amélioration du retour à la ligne pour les blocs de code en markdown et JSX dans MDX (#15993 par @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

Ajouter un saut de ligne entre les définitions de notes de bas de page en markdown (#16063 par @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

Amélioration du retour à la ligne pour markdown / MDX (#16158 par @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

Ajout de la prise en charge de la configuration package.yaml (#16157 par @danielbayley)

Activer la lecture de la configuration prettier depuis package.yaml.

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