Aller au contenu principal

Prettier 3.2 : Prise en charge de JSONC et des expressions ICU d'Angular

· 7 minutes de lecture
Sosuke Suzuki
Sosuke Suzuki
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 de nouvelles fonctionnalités telles que l'ajout d'un analyseur JSONC, la prise en charge des expressions ICU d'Angular, ainsi que de nombreuses corrections de bugs.

Nous sollicitons toujours vos retours concernant l'option --experimental-ternaries introduite dans Prettier 3.1. Veuillez lire A curious case of the ternaries et répondre via le lien Google Forms fourni.

Nous vous recommandons également la lecture de Prettier's CLI: A Performance Deep Dive par Fabio Spampinato. Cette interface CLI plus rapide est prévue pour la version 4.0.

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​

JSON​

Nouvel analyseur jsonc ajouté (#15831 par @fisker)​

Auparavant, nous inférions que l'analyseur des fichiers .jsonc était json, mais pour conserver la virgule finale, il fallait utiliser une configuration de contournement peu élégante : {parser: "json5", quoteProps: "preserve", singleQuote: false}.

Le nouveau parser jsonc :

  • Met toujours les clés d'objet entre guillemets.

  • Encadre les chaînes avec des guillemets doubles.

  • Respecte bien entendu l'option trailingComma.

Angular​

Prise en charge du formatage des expressions ICU d'Angular (#15777 par @sosukesuzuki)​

Prend en charge deux types d'expressions ICU d'Angular : plural et select.

<span i18n>
  Updated:
  {minutes, plural,
    =0 {just now}
    =1 {one minute ago}
    other {{{minutes}} minutes ago}
  }
</span>

<span i18n>
  The author is {gender, select, male {male} female {female} other {other}}
</span>

Autres changements​

JavaScript​

Éviter l'introduction de sauts de ligne dans les interpolations de template (#15209 par @bakkot)​

Dans une chaîne de template comme

`this is a long message which contains an interpolation: ${format(data)} <- like this`;

éviter d'ajouter un saut de ligne lors du formatage de l'expression, sauf s'il est déjà présent ou inévitable (par exemple à cause d'une fonction imbriquée). Auparavant, un saut de ligne pouvait être introduit dès qu'une interpolation dans le template était suffisamment "complexe" :

`this is a long message which contains an interpolation: ${format(
  data,
)} <- like this`;

Désormais, l'expression sera laissée telle quelle.

Si un saut de ligne est déjà présent dans le ${...}, formater normalement.

Correction du formatage non-idempotent des chaînes de méthodes avec ligne vide (#15522 par @seiyab)​

// Input
Foo.a()

.b();

// Prettier 3.1 (first format)
Foo.a()
.b();

// Prettier 3.1 (second format)
Foo.a().b();


// Prettier 3.2
Foo.a()

  .b();

Correction du formatage des ternaires dans les appels de fonction (#15677 par @fisker)​

// Input
stopDirectory = await (useCache
  ? memoizedFindProjectRoot
  : findProjectRootWithoutCache)(path.dirname(path.resolve(filePath)));

// Prettier 3.1
stopDirectory = await (useCache
  ? memoizedFindProjectRoot
  : findProjectRootWithoutCache)(path.dirname(path.resolve(filePath)));

// Prettier 3.2
stopDirectory = await (
  useCache ? memoizedFindProjectRoot : findProjectRootWithoutCache
)(path.dirname(path.resolve(filePath)));

Correction des incohérences pour le chaînage optionnel (#15806 par @fisker)​

Se produit uniquement avec les analyseurs typescript, meriyah ou d'autres analyseurs ESTree à l'exception de babel.

// Input
function someFunctionName() {
  return isEqual(a.map(([t, _]) => t?.id), b.map(([t, _]) => t?.id));
  return isEqual(a?.map(([t, _]) => t?.id), b?.map(([t, _]) => t?.id));
}
theValue = Object.entries(someLongObjectName).filter(
  ([listingId]) => someListToCompareToHere.includes(listingId),
);
theValue = Object.entries(someLongObjectName).filter(
  ([listingId]) => someListToCompareToHere?.includes(listingId),
);

// Prettier 3.1
function someFunctionName() {
  return isEqual(
    a.map(([t, _]) => t?.id),
    b.map(([t, _]) => t?.id),
  );
  return isEqual(a?.map(([t, _]) => t?.id), b?.map(([t, _]) => t?.id));
}
theValue = Object.entries(someLongObjectName).filter(([listingId]) =>
  someListToCompareToHere.includes(listingId),
);
theValue = Object.entries(someLongObjectName).filter(
  ([listingId]) => someListToCompareToHere?.includes(listingId),
);

// Prettier 3.2
function someFunctionName() {
  return isEqual(
    a.map(([t, _]) => t?.id),
    b.map(([t, _]) => t?.id),
  );
  return isEqual(
    a?.map(([t, _]) => t?.id),
    b?.map(([t, _]) => t?.id),
  );
}
theValue = Object.entries(someLongObjectName).filter(([listingId]) =>
  someListToCompareToHere.includes(listingId),
);
theValue = Object.entries(someLongObjectName).filter(([listingId]) =>
  someListToCompareToHere?.includes(listingId),
);

Correction des commentaires dans les if (#15826 par @fisker)​

// Input
if (foo) for (i = 2; i > 0; i--) console.log(i); // comment 1
else bar();

for (;;){
  if (foo) continue; // comment 2
  else bar();
}

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

// Prettier 3.2
if (foo)
  for (i = 2; i > 0; i--) console.log(i); // comment 1
else bar();

for (;;) {
  if (foo)
    continue; // comment 2
  else bar();
}

TypeScript​

Amélioration de la mise en page des alias de type conditionnel (#15811 par @seiyab)​

// Input
type FallbackFlags<F extends Flags | undefined> =
  Equals<NonNullableFlag<F>["flags"], {}> extends true
    ? Dict<any>
    : NonNullableFlag<F>["flags"];

// Prettier 3.1
type FallbackFlags<F extends Flags | undefined> = Equals<
  NonNullableFlag<F>["flags"],
  {}
> extends true
  ? Dict<any>
  : NonNullableFlag<F>["flags"];

// Prettier 3.2
type FallbackFlags<F extends Flags | undefined> =
  Equals<NonNullableFlag<F>["flags"], {}> extends true
    ? Dict<any>
    : NonNullableFlag<F>["flags"];

HTML​

Correction du formatage des éléments non fermés ignorés par prettier (#15748 par @fisker)​

<!-- Input -->
<!-- prettier-ignore -->
<h1>
Hello <span>world!

<!-- Prettier 3.1 -->
<!-- prettier-ignore -->
<h1>

<!-- Prettier 3.2 -->
<!-- prettier-ignore -->
<h1>
Hello <span>world!

Angular​

Correction des blocs de flux de contrôle Angular ignorés par prettier-ignore (#15827 par @fisker)​

<!-- Input -->
<!-- prettier-ignore -->
@if (condition) {
  Foo
} @else {
  Other
}

<!-- Prettier 3.1 -->
<!-- prettier-ignore -->
@if (condition) {
  Foo
}
} @else {
  Other
}

<!-- Prettier 3.2 -->
<!-- prettier-ignore -->
@if (condition) {
  Foo
}
@else {
  Other
}

Éviter d'ajouter un deux-points pour track dans la troisième expression des blocs for (#15887 par @sosukesuzuki)​

<!-- Input -->
@for (item of items; let i = $index; track block) {}

<!-- Prettier 3.1 -->
@for (item of items; let i = $index; track: block) {}

<!-- Prettier 3.2 -->
@for (item of items; let i = $index; track block) {}

Ember / Handlebars​

Préservation des segments littéraux de chemin (#15605 par @maxpowa)​

Corrige les scénarios où un fichier Handlebars contenant des segments littéraux était reformaté de manière à supprimer l'encapsulation de ces segments, provoquant ainsi des erreurs de syntaxe dans le résultat.

<!-- Input -->
{{input.[funky<api!response]}}
{{input.[this one has spaces]}}
{{input.[anotherone].[0]}}

<!-- Prettier 3.1 -->
{{input.funky<api!response}}
{{input.this one has spaces}}
{{input.anotherone.0}}

<!-- Prettier 3.2 -->
{{input.[funky<api!response]}}
{{input.[this one has spaces]}}
{{input.anotherone.[0]}}

GraphQL​

Amélioration du formatage des types union GraphQL (#15870 par @ArchitGajjar)​

# Input
union SearchResult = Conference| Festival | Concert | Venue | Conference| Festival | Concert | Venue

# Prettier 3.1
union SearchResult =
    Conference
  | Festival
  | Concert
  | Venue
  | Conference
  | Festival
  | Concert
  | Venue

# Prettier 3.2
union SearchResult =
  | Conference
  | Festival
  | Concert
  | Venue
  | Conference
  | Festival
  | Concert
  | Venue

API​

Prise en charge des chemins absolus comme plugin dans le fichier de configuration (#15666 par @fisker)​

// prettier.config.cjs
module.exports = {
  plugins: [
    // posix style
    "/path/to/plugin.js",
    // Windows style
    "D:\\\\path\\to\\plugin.js",
    // Use `require.resolve`
    require.resolve("my-awesome-prettier-plugin"),
  ],
};

Correction des définitions de type pour getFileInfo et getSupportInfo (#15854 par @auvred)​

const plugin: Plugin = {};

prettier.getFileInfo("./file.ext", {
  plugins: [plugin],
});

prettier.getSupportInfo({ plugins: [plugin], showDeprecated: true });

Divers​

Correction d'une affirmation erronée dans la documentation concernant l'incompatibilité de cursorOffset avec rangeStart/rangeEnd (#15750 par @ExplodingCabbage)​

L'option cursorOffset est en réalité compatible avec rangeStart/rangeEnd depuis plus de 5 ans, grâce au travail de @ds300. Cependant, la documentation de Prettier (y compris le texte d'aide CLI via --help) continuait d'affirmer le contraire, à tort. La documentation est désormais corrigée.