Prettier 3.0 : Bonjour les modules ECMAScript !

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 →

Nous sommes ravis d'annoncer la sortie de la nouvelle version de Prettier !

Nous avons migré vers l'utilisation des modules ECMAScript pour tout notre code source. Ce changement a considérablement amélioré l'expérience de développement pour l'équipe Prettier. Soyez assurés que lorsque vous utilisez Prettier en tant que bibliothèque, vous pouvez toujours l'utiliser en CommonJS également.

Cette mise à jour comporte plusieurs changements cassants. Un exemple notable est la modification du formatage Markdown : les espaces ne sont plus insérés entre les caractères latins et les caractères chinois ou japonais. Nous tenons à exprimer notre gratitude à Tatsunori Uchino, qui a apporté des contributions significatives à Prettier au cours de l'année écoulée, en particulier pour cette fonctionnalité. De plus, la valeur par défaut de trailingComma a été modifiée pour devenir "all".

Une autre modification importante dans cette version est la refonte complète de l'interface des plugins. Prettier prend désormais en charge les plugins écrits avec les modules ECMAScript et les analyseurs asynchrones. Si vous développez des plugins, veuillez faire preuve de prudence lors de la mise à jour. Vous trouverez le guide de migration ici. Comme toujours, nous accueillons les rapports de bogues et vos retours !

Cette version comprend également de nombreuses améliorations de formatage et corrections de bogues.

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

Markdown

Amélioration de la gestion des espaces pour le chinois, le japonais et le coréen (#11597 par @tats-u)

Arrêt de l'insertion d'espaces entre les caractères chinois/japonais et occidentaux

Auparavant, Prettier insérait des espaces entre les caractères chinois ou japonais et les caractères occidentaux (lettres et chiffres). Bien que certains préfèrent ce style, il n'est pas standard et va à l'encontre des recommandations officielles. Plus de détails disponibles ici. Nous avons estimé que forcer un style particulier ne relevait pas du rôle de Prettier, donc les espaces ne sont plus insérés, tout en conservant ceux existants. Pour imposer un style d'espacement, envisagez textlint-ja ou lint-md (règles space-round-alphabet et space-round-number).

La difficulté de ce changement résidait dans les sauts de ligne ambigus entre caractères chinois/japonais et occidentaux. Lorsque Prettier déroule un texte, il doit décider si un tel saut de ligne doit être supprimé ou remplacé par un espace. Pour cela, Prettier analyse le contexte et déduit le style préféré.

<!-- Input -->
漢字
Alphabetsひらがな12345カタカナ67890

漢字 Alphabets ひらがな 12345 カタカナ 67890

<!-- Prettier 2.8 -->
漢字 Alphabets ひらがな 12345 カタカナ 67890

漢字 Alphabets ひらがな 12345 カタカナ 67890

<!-- Prettier 3.0 -->
漢字Alphabetsひらがな12345カタカナ67890

漢字 Alphabets ひらがな 12345 カタカナ 67890

Respect des règles de césure en chinois et japonais

Il existe des règles interdisant certains caractères en début ou fin de ligne en chinois et japonais. Par exemple, les points 。, ． et . ne doivent pas commencer une ligne, tandis que （ ne doit pas la terminer. Prettier respecte désormais ces règles lors du retour à la ligne, c'est-à-dire lorsque proseWrap est configuré sur always.

<!-- Input -->
HTCPCPのエラー418は、ティーポットにコーヒーを淹（い）れさせようとしたときに返されるステータスコードだ。

<!-- Prettier 2.8 with --prose-wrap always --print-width 8 -->
HTCPCP の
エラー
418 は、
ティーポ
ットにコ
ーヒーを
淹（い）
れさせよ
うとした
ときに返
されるス
テータス
コードだ
。

<!-- Prettier 3.0 with the same options -->
HTCPCPの
エラー
418は、
ティー
ポットに
コーヒー
を淹
（い）れ
させよう
としたと
きに返さ
れるス
テータス
コード
だ。

Ne pas couper les lignes à l'intérieur des mots coréens

Le coréen utilise des espaces pour séparer les mots, et une division inappropriée peut changer le sens d'une phrase :

• 노래를 못해요. : Je ne chante pas bien (talent).

• 노래를 못 해요. : Je ne peux pas chanter (circonstances).

Auparavant, lorsque proseWrap était configuré sur always, des caractères hangul successifs pouvaient être divisés par un saut de ligne, ce qui pouvait ensuite être converti en espace lors de l'édition et du reformatage du document. Cela n'arrive plus. Le texte coréen est désormais géré comme l'anglais.

<!-- Input -->
노래를 못해요.

<!-- Prettier 2.8 with --prose-wrap always --print-width 9 -->
노래를 못
해요.

<!-- Prettier 2.8, subsequent reformat with --prose-wrap always --print-width 80 -->
노래를 못 해요.

<!-- Prettier 3.0 with --prose-wrap always --print-width 9 -->
노래를
못해요.

<!-- Prettier 3.0, subsequent reformat with --prose-wrap always --print-width 80 -->
노래를 못해요.

Un saut de ligne entre des caractères hangul et des lettres ou chiffres non-hangul est converti en espace lorsque Prettier supprime les retours à la ligne. Prenons cet exemple :

3분 기다려 주지.

Dans cette phrase, si vous insérez un saut de ligne entre "3" et "분", un espace sera ajouté à cet endroit lorsque le texte sera reformaté sans sauts.

API

Prise en charge des analyseurs asynchrones dans les plugins (#12748 par @fisker, #13211 par @thorn0 et @fisker)

La fonction parse d'un plugin peut désormais renvoyer une Promise.

Pour prendre en charge les analyseurs asynchrones pour les langages embarqués, nous avons dû introduire un changement majeur dans l'API des plugins. La méthode embed d'une imprimante doit désormais correspondre à une signature complètement nouvelle, incompatible avec les versions précédentes. Si vous développez des plugins et qu'ils ne définissent pas embed, cela ne vous concerne pas. Sinon, consultez la documentation pour les détails.

De plus, la méthode preprocess d'une imprimante peut désormais renvoyer une promesse.

Prise en charge des fichiers de configuration en ESM (#13130 par @fisker)

Les fichiers de configuration en modules ECMAScript sont désormais pris en charge, avec les noms :

• prettier.config.js (avec {"type": "module"} dans package.json)

• .prettierrc.js (idem)

• prettier.config.mjs

• .prettierrc.mjs

export default {
  trailingComma: "es5",
  tabWidth: 4,
  semi: false,
  singleQuote: true,
};

Les packages de configuration partageable peuvent également être des packages ESM purs.

Modifications incompatibles

JavaScript

Valeur par défaut de trailingComma changée à all (#11479 par @fisker, #13143 par @sosukesuzuki)

Depuis la version 2.0, la valeur par défaut de trailingComma était es5.

Internet Explorer, le dernier navigateur à interdire les virgules finales dans les appels de fonction, a cessé d'être supporté le 15 juin 2022. En conséquence, la valeur par défaut de trailingComma devient all.

Si vous préférez toujours l'ancien comportement, veuillez configurer Prettier avec { "trailingComma": "es5" }.

Supprimer la prise en charge de la syntaxe Flow du parseur babel (#14314 par @fisker, @thorn0)

Pour des raisons historiques, Prettier reconnaissait la syntaxe Flow dans les fichiers JS lorsque l'option parser était définie sur babel, même si le fichier n'incluait pas le pragma @flow. Cette prise en charge était limitée et nuisait aux performances, elle a donc été supprimée dans Prettier 3.0. Prettier avec le parseur babel bascule toujours automatiquement vers la syntaxe Flow s'il trouve le pragma @flow ou si le fichier a l'extension .js.flow.

Flow

Supprimer la prise en charge des commentaires Flow (#13687, #13703 par @thorn0)

Agissant comme une sorte de préprocesseur, les commentaires Flow (ou types de commentaires) sont traités au niveau des tokens et ne peuvent généralement pas être représentés dans un AST. Flow construit l'AST comme si ces tokens spéciaux de commentaire n'existaient pas. Exemple :

/*:: if */ (x) + y;

Ceci est analysé par Flow comme if (x) +y; et par les parseurs JS ne supportant pas Flow comme x + y;.

Auparavant, pour certains cas particuliers, Prettier essayait de détecter cette syntaxe et de la préserver. Cette prise en charge limitée, tentant de résoudre un problème insoluble, était fragile et pleine de bugs, elle a donc été supprimée. Désormais, si l'option parser est définie sur flow ou babel-flow, les commentaires Flow seront analysés et réimprimés comme du code normal. Si un parseur ne supportant pas Flow est utilisé, ils seront traités comme des commentaires ordinaires.

// Input
let a /*: foo */ = b;

// Prettier 2.8
let a /*: foo */ = b;

// Prettier 3.0 with --parser flow
let a: foo = b;

// Prettier 3.0 with --parser babel
let a /*: foo */ = b;

Imprimer la virgule finale dans les paramètres de type et les types tuple lorsque --trailing-comma=es5 (#14086, #14085 par @fisker)

// Input
type Foo =  [
  {
    from: string,
    to: string,
  }, // <- 1
];
type Foo = Promise<
  | { ok: true, bar: string, baz: SomeOtherLongType }
  | { ok: false, bar: SomeOtherLongType }, // <- 2
>;

// Prettier 2.8
type Foo = [
  {
    from: string,
    to: string,
  } // <- 1
];
type Foo = Promise<
  | { ok: true, bar: string, baz: SomeOtherLongType }
  | { ok: false, bar: SomeOtherLongType } // <- 2
>;

// Prettier 3.0
type Foo = [
  {
    from: string,
    to: string,
  }, // <- 1
];
type Foo = Promise<
  | { ok: true, bar: string, baz: SomeOtherLongType }
  | { ok: false, bar: SomeOtherLongType }, // <- 2
>;

CSS

Ajouter le parseur pur css (#7933, #9092, #9093 par @fisker)

Auparavant, lorsque --parser=css était passé, Prettier essayait d'analyser le contenu avec postcss-scss et postcss-less. Cela causait de la confusion et rendait les erreurs de syntaxe difficiles à repérer. Désormais, --parser=css fonctionne uniquement avec la syntaxe CSS standard.

Si vous utilisez parser="css" pour vos fichiers .less/.scss, mettez-le à jour avec le parseur correct ou supprimez l'option parser pour laisser Prettier détecter automatiquement le parseur par l'extension du fichier.

/* Input */
/* Less Syntax with `--parser=css` */
a {.bordered();}

/* Prettier 2.8 */
/* Less Syntax with `--parser=css` */
a {
  .bordered();
}

/* Prettier 3.0 */
SyntaxError: (postcss) CssSyntaxError Unknown word (2:4)
  1 | /* Less Syntax with `--parser=css` */
> 2 | a {.bordered();}

/* Input */
/* Scss Syntax with `--parser=css` */
::before {content: #{$foo}}

/* Prettier 2.8 */
/* Scss Syntax with `--parser=css` */
::before {
  content: #{$foo};
}

/* Prettier 3.0 */
SyntaxError: (postcss) CssSyntaxError Unknown word (2:22)
  1 | /* Scss Syntax with `--parser=css` */
> 2 | ::before {content: #{$foo}}

GraphQL

Abandonner la prise en charge de la syntaxe "interfaces séparées par des virgules" (#12835 par @fisker)

# Input
type Type1 implements A, B {a: a}

# Prettier 2.8
type Type1 implements A, B {
  a: a
}

# Prettier 3.0
SyntaxError: Syntax Error: Unexpected Name "B". (1:26)
> 1 | type Type1 implements A, B {a: a}

API

Abandon de la prise en charge de Node.js 10 et 12 (#11830 par @fisker, #13118 par @sosukesuzuki)

La version minimale requise de Node.js est désormais la v14

Passage des API publiques en asynchrone (#12574, #12788, #12790, #13265 par @fisker)

• prettier.format() renvoie désormais une Promise<string>

• prettier.formatWithCursor() renvoie désormais une Promise<{formatted: string, cursorOffset: number}>

• prettier.formatAST() renvoie désormais une Promise<string>

• prettier.check() renvoie désormais une Promise<boolean>

• prettier.getSupportInfo() renvoie désormais une Promise

• prettier.clearConfigCache() renvoie désormais une Promise<void>

• prettier.resolveConfig.sync a été supprimée

• prettier.resolveConfigFile.sync a été supprimée

• prettier.getFileInfo.sync a été supprimée

Si vous avez toujours besoin d'API synchrones, vous pouvez essayer @prettier/sync

Modification de la structure des fichiers du package npm (#12740 par @fisker, #13530 par @fisker, #14570 par @fisker)

Changements dans la structure des fichiers :

• bin-prettier.js -> bin/prettier.cjs

• esm/standalone.mjs -> standalone.mjs

• esm/parser-angular.mjs -> plugins/angular.mjs

• parser-angular.js -> plugins/angular.js

• esm/parser-babel.mjs -> plugins/babel.mjs

• parser-babel.js -> plugins/babel.js

• esm/parser-espree.mjs -> plugins/acorn-and-espree.mjs

• parser-espree.js -> plugins/acorn.js
  objet global renommé prettierPlugins.espree -> prettierPlugins.acorn

• esm/parser-flow.mjs -> plugins/flow.mjs

• parser-flow.js -> plugins/flow.js

• esm/parser-glimmer.mjs -> plugins/glimmer.mjs

• parser-glimmer.js -> plugins/glimmer.js

• esm/parser-graphql.mjs -> plugins/graphql.mjs

• parser-graphql.js -> plugins/graphql.js

• esm/parser-html.mjs -> plugins/html.mjs

• parser-html.js -> plugins/html.js

• esm/parser-markdown.mjs -> plugins/markdown.mjs

• parser-markdown.js -> plugins/markdown.js

• esm/parser-meriyah.mjs -> plugins/meriyah.mjs

• parser-meriyah.js -> plugins/meriyah.js

• esm/parser-postcss.mjs -> plugins/postcss.mjs

• parser-postcss.js -> plugins/postcss.js

• esm/parser-typescript.mjs -> plugins/typescript.mjs

• parser-typescript.js -> plugins/typescript.js

• esm/parser-yaml.mjs -> plugins/yaml.mjs

• parser-yaml.js -> plugins/yaml.js

Consultez la liste complète sur https://unpkg.com/browse/prettier@3.0.0/.

Un nouveau plugin a été ajouté :

• plugins/estree.mjs (version ESM)

• plugins/estree.js (version UMD)

Si vous utilisez la version autonome, ce plugin doit être chargé lors du formatage de JavaScript, TypeScript, Flow ou JSON.

import { format } from "prettier/standalone";
- import prettierPluginBabel from "prettier/parser-babel";
+ import * as prettierPluginBabel from "prettier/plugins/babel";
+ import * as prettierPluginEstree from "prettier/plugins/estree";

console.log(
-  format(code, {
+  await format(code, {
      parser: "babel",
-     plugins: [prettierPluginBabel],
+     plugins: [prettierPluginBabel, prettierPluginEstree],
   })
);

- node ./node_modules/prettier/bin-prettier.js . --write
+ node ./node_modules/prettier/bin/prettier.cjs . --write

Prise en charge des plugins en ESM (#13201 par @fisker)

Depuis la v3.0.0, nous chargeons les plugins via import() au lieu de require(), ce qui permet désormais d'utiliser des modules ESM.

Si vous utilisez --plugin avec un chemin de répertoire ou un chemin de fichier sans extension, le plugin risque de ne pas pouvoir être chargé.

- prettier . --plugin=path/to/my-plugin-directory
+ prettier . --plugin=path/to/my-plugin-directory/index.js

- prettier . --plugin=path/to/my-plugin-file
+ prettier . --plugin=path/to/my-plugin-file.js

Mise à jour de prettier.doc (#13203, #14456 par @fisker)

prettier.doc.builders.concat était déprécié depuis la v2.3.0 et est désormais supprimé.

Les API suivantes n'étaient jamais documentées et étaient destinées à un usage interne uniquement. Elles sont maintenant supprimées :

• prettier.doc.utils.getDocParts

• prettier.doc.utils.propagateBreaks

• prettier.doc.utils.cleanDoc

• prettier.doc.utils.getDocType

• prettier.doc.debug.printDocToDebug

textToDoc supprime désormais les lignes dures de fin (#13220 par @fisker)

Précédemment, dans tous les langages de base, après l'impression du code intégré dans Doc, nous appelions prettier.doc.utils.stripTrailingHardline() pour supprimer les lignes dures de fin.

Nous pensons que faire renvoyer par textToDoc des documents sans lignes dures de fin facilite l'impression embed pour les plugins.

Suppression de la prise en charge de l'API de parser personnalisée (#13250 par @fisker et @thorn0)

Avant que les plugins n'existent, Prettier avait une fonctionnalité similaire mais plus limitée appelée analyseurs personnalisés. Elle a été supprimée dans la v3.0.0 car ses fonctionnalités étaient un sous-ensemble de ce que l'API Plugin permettait. Si vous l'utilisiez, consultez comment migrer.

Le second argument parsers passé à parsers.parse a été supprimé (#13268 par @fisker)

La signature de la fonction print des plugins est passée de :

function parse(text: string, parsers: object, options: object): AST;

à

function parse(text: string, options: object): Promise<AST> | AST;

Le deuxième argument parsers a été supprimé. Si vous avez encore besoin d'un autre analyseur pendant le processus d'analyse, vous pouvez :

1. Importez le plugin vous-même (recommandé)

   import * as prettierPluginBabel from "prettier/plugins/babel";
   
   const myCustomPlugin = {
     parsers: {
       "my-custom-parser": {
         async parse(text) {
           const ast = await prettierPluginBabel.parsers.babel.parse(text);
           ast.program.body[0].expression.callee.name = "_";
           return ast;
         },
         astFormat: "estree",
       },
     },
   };

2. Récupérez l'analyseur depuis l'argument options

   function getParserFromOptions(options, parserName) {
     const parserOrParserInitFunction = options.plugins.find(
       (plugin) => plugin.parsers && Object.hasOwn(plugin.parsers, parserName),
     )?.parsers[parserName];
     return typeof parserOrParserInitFunction === "function"
       ? parserOrParserInitFunction()
       : parserOrParserInitFunction;
   }
   
   const myCustomPlugin = {
     parsers: {
       "my-custom-parser": {
         async parse(text, options) {
           const babelParser = await getParserFromOptions(options, "babel");
           const ast = await babelParser.parse(text);
           ast.program.body[0].expression.callee.name = "_";
           return ast;
         },
         astFormat: "estree",
       },
     },
   };

undefined et null ne sont plus passés à la fonction print des plugins (#13397 par @fisker)

Si votre plugin utilisait print pour les traiter, vérifiez-les plutôt dans le nœud parent.

function print(path, print) {
-  const value = path.getValue();
-  if (!value?.type) {
-    return String(value);
-  }

-  return path.map(print, "values");

+  return path.map(({node}) => (node?.type ? print() : String(node)), "values");
}

Autorisation des valeurs truthy arbitraires pour les docs label (#13532 par @thorn0)

Le constructeur de doc label a été modifié. Consultez la documentation.

getFileInfo() résout la configuration par défaut (#14108 par @fisker)

options.resolveConfig vaut désormais true par défaut. Voir la documentation.

La fonctionnalité de recherche automatique de plugins a été supprimée (#14759 par @fisker)

La recherche automatique de plugins fonctionnait mal avec pnpm et causait des lenteurs.

Les options CLI --plugin-search-dir, --no-plugin-search et l'option API pluginSearchDirs ont été supprimées dans Prettier 3.0.

Utilisez plutôt le flag --plugin et l'option plugins. Consultez la documentation.

CLI

Ignorer par défaut les fichiers exclus par .gitignore (#14731 par @fisker)

Prettier ignore désormais par défaut les fichiers exclus par .gitignore. Si vous souhaitez retrouver l'ancien comportement (ignorer uniquement les fichiers exclus par .prettierignore), utilisez

prettier . --write --ignore-path=.prettierignore

Autres changements

JavaScript

Prise en charge du motif "fonction décorée" (#10714 par @thorn0)

Dans ce cas, le développeur accepte généralement de sacrifier la lisibilité de la signature de la fonction fléchée pour obtenir une indentation réduite dans son corps. Prettier reconnaît désormais ce motif et conserve la fonction fléchée compacte même si sa signature dépasse la limite.

// Prettier 2.8
const Counter = decorator("my-counter")(
  (props: { initialCount?: number; label?: string }) => {
    // ...
  }
);

// Prettier 3.0
const Counter = decorator("my-counter")((props: {
  initialCount?: number;
  label?: string;
}) => {
  // ...
});

Correction du positionnement du curseur pour les fichiers contenant des emojis (#13340 par @fisker)

$ cat test.js
const { formatWithCursor } = await import("prettier");
const code = "'😀😀😀😀'";
await formatWithCursor(code, {parser: "babel", cursorOffset: 9})

# Prettier 2.8
$ node test.js
{ formatted: '"😀😀😀😀";\n', cursorOffset: 5, comments: [] }

# Prettier 3.0
$ node test.js
{ formatted: '"😀😀😀😀";\n', cursorOffset: 9, comments: [] }

Correction de cas limites dans l'expansion du premier argument d'appel (#13341 par @thorn0)

// Input
export default whatever(function (a: {
  aaaaaaaaa: string;
  bbbbbbbbb: string;
  ccccccccc: string;
}) {
  return null;
}, "xyz");

call(
    function() {
        return 1;
    },
    $var ?? $var ?? $var ?? $var ?? $var ?? $var ?? $var ?? $var ?? $var ?? 'test'
);

// Prettier 2.8
export default whatever(function (a: {
  aaaaaaaaa: string;
  bbbbbbbbb: string;
  ccccccccc: string;
}) {
  return null;
},
"xyz");

call(function () {
  return 1;
}, $var ??
  $var ??
  $var ??
  $var ??
  $var ??
  $var ??
  $var ??
  $var ??
  $var ??
  "test");

// Prettier 3.0
export default whatever(function (a: {
  aaaaaaaaa: string,
  bbbbbbbbb: string,
  ccccccccc: string,
}) {
  return null;
}, "xyz");

call(
  function () {
    return 1;
  },
  $var ??
    $var ??
    $var ??
    $var ??
    $var ??
    $var ??
    $var ??
    $var ??
    $var ??
    "test",
);

Correction de l'indentation des chaînes de fonctions fléchées dans les arguments d'appel et expressions binaires (#13391 par @thorn0)

L'objectif du formatage choisi est de clarifier le nombre d'arguments de l'appel. Cependant, un bug affectait l'indentation de la première signature dans la chaîne lorsque cette signature dépassait une ligne.

// Prettier 2.8
askTrovenaBeenaDependsRowans(
  glimseGlyphsHazardNoopsTieTie,
  (
      averredBathersBoxroomBuggyNurl,
      anodyneCondosMalateOverateRetinol = "default"
    ) =>
    (annularCooeedSplicesWalksWayWay) =>
    (kochabCooieGameOnOboleUnweave) =>
      abugidicRomanocastorProvider,
  weaponizedStellatedOctahedron
);

// Prettier 3.0
askTrovenaBeenaDependsRowans(
  glimseGlyphsHazardNoopsTieTie,
  (
    averredBathersBoxroomBuggyNurl,
    anodyneCondosMalateOverateRetinol = "default",
  ) =>
    (annularCooeedSplicesWalksWayWay) =>
    (kochabCooieGameOnOboleUnweave) =>
      abugidicRomanocastorProvider,
  weaponizedStellatedOctahedron,
);

Ne pas casser la signature d'une expression de fonction compacte si les paramètres sont des identifiants sans types (#13410 par @thorn0)

// Prettier 2.8
export const Link = forwardRef<HTMLAnchorElement, LinkProps>(function Link(
  props,
  ref
) {
  return <ThemeUILink ref={ref} variant="default" {...props} />;
});

// Prettier 3.0
export const Link = forwardRef<HTMLAnchorElement, LinkProps>(
  function Link(props, ref) {
    return <ThemeUILink ref={ref} variant="default" {...props} />;
  },
);

Correction des commentaires entrelacés (#13438 par @thorn0)

// Input
function x() {
} // first
; // second

// Prettier 2.8
function x() {} // first // second

// Prettier 3.0
function x() {} // first
// second

Prise en charge des commentaires JSDoc imbriqués (#13445 par @thorn0)

Ce type de commentaire est utilisé pour documenter les fonctions surchargées (voir https://github.com/jsdoc/jsdoc/issues/1017).

// Input
/**
 * @template T
 * @param {Type} type
 * @param {T} value
 * @return {Value}
 *//**
 * @param {Type} type
 * @return {Value}
 */
function value(type, value) {
  if (arguments.length === 2) {
    return new ConcreteValue(type, value);
  } else {
    return new Value(type);
  }
}

// Prettier 2.8
/**
 * @template T
 * @param {Type} type
 * @param {T} value
 * @return {Value}
 */ /**
 * @param {Type} type
 * @return {Value}
 */
function value(type, value) {
  if (arguments.length === 2) {
    return new ConcreteValue(type, value);
  } else {
    return new Value(type);
  }
}

// Prettier 3.0
/**
 * @template T
 * @param {Type} type
 * @param {T} value
 * @return {Value}
 *//**
 * @param {Type} type
 * @return {Value}
 */
function value(type, value) {
  if (arguments.length === 2) {
    return new ConcreteValue(type, value);
  } else {
    return new Value(type);
  }
}

Correction de l'instabilité des littéraux de modèle avec langages embarqués (#13532 par @thorn0)

Si un littéral de modèle avec syntaxe embarquée est le seul argument d'un appel ou le corps d'une fonction fléchée, et contient des espaces en début et fin, il ne sera pas imprimé sur une nouvelle ligne.

// Input
foo(/* HTML */ ` <!-- bar1 --> bar <!-- bar2 --> `);

// Prettier 2.8 (first output)
foo(
  /* HTML */ `
    <!-- bar1 -->
    bar
    <!-- bar2 -->
  `
);

// Prettier 2.8 (second output)
foo(/* HTML */ `
  <!-- bar1 -->
  bar
  <!-- bar2 -->
`);

// Prettier 3.0 (first output)
foo(/* HTML */ `
  <!-- bar1 -->
  bar
  <!-- bar2 -->
`);

Correction de l'indentation des expressions dans les littéraux de modèle (#13621 par @fisker)

// Input
`
              1. Go to ${chalk.green.underline(FOO_LINK)}
              2. Click "${chalk.green(
                "Run workflow"
              )}" button, type "${chalk.yellow.underline(
                version
              )}", hit the "${chalk.bgGreen("Run workflow")}" button.
`

// Prettier 2.8
`
              1. Go to ${chalk.green.underline(FOO_LINK)}
              2. Click "${chalk.green(
                "Run workflow"
              )}" button, type "${chalk.yellow.underline(
  version
)}", hit the "${chalk.bgGreen("Run workflow")}" button.
`;

// Prettier 3.0
`
              1. Go to ${chalk.green.underline(FOO_LINK)}
              2. Click "${chalk.green(
                "Run workflow",
              )}" button, type "${chalk.yellow.underline(
                version,
              )}", hit the "${chalk.bgGreen("Run workflow")}" button.
`;

Ajout du support pour la proposition "Explicit Resource Management" (#13752 par @fisker, #14862 par @sosukesuzuki)

La proposition de Stage 2 "Explicit Resource Management" est désormais supportée via Babel 7.20.0 et 7.22.0.

Gardez également à l'esprit notre politique sur la syntaxe non standardisée avant d'utiliser cette fonctionnalité de syntaxe proposée avec Prettier.

// Examples
{
  using obj = g(); // block-scoped declaration
  const r = obj.next();
} // calls finally blocks in `g`

{
  await using obj = g(); // block-scoped declaration
  const r = obj.next();
} // calls finally blocks in `g`

Ajout de la prise en charge de la proposition "Import Reflection" (#13771 par @fisker)

La proposition de Stage 2 "Import Reflection" est désormais prise en charge via Babel 7.20.0. Gardez également à l'esprit notre politique sur la syntaxe non standardisée avant d'utiliser cette fonctionnalité de syntaxe proposée avec Prettier.

// Examples
import module x from "<specifier>";

Correction d'une incohérence entre tableaux/tuples et objets/enregistrements (#14065 par @fisker)

// Input
foo.a().b().c([n, o])
foo.a().b().c(#[n, o])
foo.a().b().c({n, o})
foo.a().b().c(#{n, o})

// Prettier 2.8
foo.a().b().c([n, o]);
foo
  .a()
  .b()
  .c(#[n, o]);
foo.a().b().c({ n, o });
foo
  .a()
  .b()
  .c(#{ n, o });

// Prettier 3.0
foo.a().b().c([n, o]);
foo.a().b().c(#[n, o]);
foo.a().b().c({ n, o });
foo.a().b().c(#{ n, o });

Correction du suivi du curseur dans le texte JSX (#14163 par @fisker)

// Prettier 2.8
formatWithCursor(
  ["<>a", "  <div>hi</div>", "</>"].join("\n"),
  { cursorOffset: 3, parser: "babel" }
).cursorOffset;
// -> 2

// Prettier 3.0
(await formatWithCursor(
  ["<>a", "  <div>hi</div>", "</>"].join("\n"),
  { cursorOffset: 3, parser: "babel" }
)).cursorOffset;
// -> 6

Éviter l'indentation inutile des expressions await imbriquées (#14192 par @thorn0)

Un affinement du changement apporté dans la v2.3. Parfois, il n'est pas nécessaire de forcer l'indentation des expressions await imbriquées.

// Prettier 2.8
await Promise.all(
  (
    await readdir("src")
  ).map((path) => {
    import(`./${path}`);
  })
);

// Prettier 3.0
await Promise.all(
  (await readdir("src")).map((path) => {
    import(`./${path}`);
  }),
);

Prise en charge de la proposition de modificateurs d'expressions régulières (#14391 par @fisker)

Voir Regular Expression Pattern Modifiers for ECMAScript.

Correction des parenthèses et points-virgules manquants autour des nœuds ignorés par prettier-ignore (#14406 par @fisker)

// Input
async function request(url) {
  return (
    // prettier-ignore
    await fetch(url)
  ).json()
}

// Prettier 2.8
async function request(url) {
  return (
    // prettier-ignore
    await fetch(url).json()
  );
}

// Prettier 3.0
async function request(url) {
  return (
    // prettier-ignore
    (await fetch(url)).json()
  );
}

// Input
foo();
// prettier-ignore
[bar, baz].forEach(console.log)

// Prettier 2.8 (--no-semi)
foo()
// prettier-ignore
[bar, baz].forEach(console.log)

// Prettier 3.0
foo()
// prettier-ignore
;[bar, baz].forEach(console.log)

Suppression des parenthèses inutiles autour des expressions de classe (#14409 par @fisker)

// Input
call(
  @dec class {}
);

// Prettier 2.8
call(
  (
    @dec
    class {}
  )
);

// Prettier 3.0
call(
  @dec
  class {},
);

Ajout de parenthèses à la tête de ExpressionStatement au lieu de l'ensemble de l'instruction (#14599 par @fisker)

// Input
const isArray = (object) => ({}).toString.call(foo) === "[object Array]";

// Prettier 2.8
const isArray = (object) => ({}.toString.call(foo) === "[object Array]");

// Prettier 3.0
const isArray = (object) => ({}).toString.call(foo) === "[object Array]";

Amélioration de la cohérence entre les fonctions fléchées curryfiées et non curryfiées (#14633 par @seiyab, @fisker)

// Input
Y(() => a ? b : c);
Y(() => () => a ? b : c);

// Prettier 2.8
Y(() => (a ? b : c));
Y(() => () => a ? b : c);

// Prettier 3.0
Y(() => (a ? b : c));
Y(() => () => (a ? b : c));

Correction de la vérification des lignes vides entre les éléments d'un tableau (#14736 par @solarized-fox)

// Input
[
  (a = b),

  c // comment
]

// Prettier 2.8
[
  (a = b),
  c, // comment
];

// Prettier 3.0
[
  (a = b),

  c, // comment
];

Prise en charge des commentaires de fin dans les paramètres de fonction pour tous les types de paramètres (#14835 par @pieterv)

Prise en charge des commentaires de fin pour les paramètres de fonction des types de nœuds RestElement, ArrayPattern et ObjectPattern.

// Input
function Foo(
  ...bar
  // Trailing comment
) {}

// Prettier 2.8
function Foo(...bar) // Trailing comment
{}

// Prettier 3.0
function Foo(
  ...bar
  // Trailing comment
) {}

Prise en charge des attributs d'importation (#14861, #14863 par @sosukesuzuki)

Prise en charge de la proposition Import Attributes.

import json from "./foo.json" with { type: "json" };
import("./foo.json", { with: { type: "json" } });

TypeScript

Correction des commentaires en tête dans les types mappés avec readonly (#13427 par @thorn0, @sosukesuzuki)

// Input
type Type = {
  // comment
  readonly [key in Foo];
};

// Prettier 2.8
type Type = {
  readonly // comment
  [key in Foo];
};

// Prettier 3.0
type Type = {
  // comment
  readonly [key in Foo];
};

Formatage cohérent des commentaires suspendus pour les types tuples et tableaux (#13608 par @sosukesuzuki)

// Input
type Foo = [
   // comment
];
const bar = [
   // comment
];

// Prettier 2.8
type Foo = [// comment];
const bar = [
   // comment
];

// Prettier 3.0
type Foo = [
   // comment
];
const bar = [
   // comment
];

Correction : le type union doit être imprimé en variante multi-ligne lorsqu'il y a des commentaires (#13860 par @PerfectPan)

// Input
type FooBar =
  | Number // this documents the first option
  | void // this documents the second option
  ;

// Prettier 2.8
type FooBar = Number | void; // this documents the first option // this documents the second option

// Prettier 3.0
type FooBar =
  | Number // this documents the first option
  | void; // this documents the second option

Amélioration de l'impression des commentaires et du suivi du curseur autour des annotations de type (#14171 par @fisker)

// Input
let foo /* comment */ : number;

// Prettier 2.8
let foo: /* comment */ number;

// Prettier 3.0
<Same as input>

// Prettier 2.8
prettier.formatWithCursor("let foo: number", {
  cursorOffset: 7,
  parser: "babel",
}).cursorOffset;

// -> 9

// Prettier 3.0
(
  await prettier.formatWithCursor("let foo: number", {
    cursorOffset: 7,
    parser: "babel",
  })
).cursorOffset;

// -> 7

Saut de ligne pour les propriétés de paramètres TypeScript (#14402 par @seiyab)

// Input
class MyClass {
  constructor(
    protected x: number,
    private y: string
  ) {}
}

// Prettier 2.8
class MyClass {
  constructor(protected x: number, private y: string) {}
}

// Prettier 3.0
class MyClass {
  constructor(
    protected x: number,
    private y: string,
  ) {}
}

Correction du formatage des types union avec un seul type (#14654 par @fisker et @auvred)

// Input
type T =
  | (
    | {
        value: number
      }
    | {
        value: string
      }
  )

// Prettier 2.8
type T =
  |
      | {
          value: number;
        }
      | {
          value: string;
        };

// Prettier 3.0
type T =
  | {
      value: number;
    }
  | {
      value: string;
    };

Amélioration de la détection des nouvelles lignes dans les types mappés (#14659 par @fisker)

// Input
type A1 = { [A in B]:
T}
type A2 = {
  [A in B]:T}

// Prettier 2.8
type A1 = {
  [A in B]: T;
};
type A2 = {
  [A in B]: T;
};

// Prettier 3.0
type A1 = { [A in B]: T };
type A2 = {
  [A in B]: T;
};

Saut de ligne après extends dans les paramètres de type (#14672, #14858 par @sosukesuzuki)

// Input
export type OuterType2<
  LongerLongerLongerLongerInnerType extends LongerLongerLongerLongerLongerLongerLongerLongerOtherType
> = { a: 1 };

// Prettier 2.8
export type OuterType2<
  LongerLongerLongerLongerInnerType extends LongerLongerLongerLongerLongerLongerLongerLongerOtherType
> = { a: 1 };

// Prettier 3.0
export type OuterType2<
  LongerLongerLongerLongerInnerType extends
    LongerLongerLongerLongerLongerLongerLongerLongerOtherType,
> = { a: 1 };

Correction de la virgule manquante dans les paramètres de type (#14688 par @fisker, @sosukesuzuki)

Précédemment, nous imprimions la virgule finale uniquement pour l'extension .tsx. Il s'avère que les fichiers .mts et .cts en ont aussi besoin pour être analysés.

// Input
export const unsafeCoerce = <T,>(u: unknown): T => u as T

// Prettier 2.8
export const unsafeCoerce = <T>(u: unknown): T => u as T;

// Prettier 3.0
export const unsafeCoerce = <T,>(u: unknown): T => u as T;

Conservation des parenthèses autour des TSInstantiationExpression suivis d'un accès propriété (#14701 par @morsko1)

// Input
(Array<string>).a;
(Array<string>)?.a;
(Array<string>)[a];
(Array<string>)?.[a];

// Prettier 2.8
Array<string>.a;
Array<string>?.a;
Array<string>[a];
Array<string>?.[a];

// Prettier 3.0
(Array<string>).a;
(Array<string>)?.a;
(Array<string>)[a];
(Array<string>)?.[a];

Correction du problème de double point-virgule causé par // prettier-ignore sur une ligne de signature d'appel (#14830 par @ot07)

// Input
type Foo = {
  (): void; // prettier-ignore
  second: string;
};

// Prettier 2.8
type Foo = {
  (): void;; // prettier-ignore
  second: string;
};

// Prettier 3.0
type Foo = {
  (): void; // prettier-ignore
  second: string;
};

Flow

Un type objet dans une signature declare function entraîne maintenant un saut de ligne avant le type de retour (#13396 par @thorn0)

Ce comportement a été unifié avec le formatage TypeScript.

// Input
declare function bla (props: { a: boolean, b: string, c: number }): Promise<Array<foo>>

// Prettier 2.8
declare function bla(props: { a: boolean, b: string, c: number }): Promise<
  Array<foo>
>;

// Prettier 3.0
declare function bla(props: {
  a: boolean;
  b: string;
  c: number;
}): Promise<Array<foo>>;

Prise en charge des types conditionnels et d'inférence de type (#14573 par @SamChou19815)

// Input
type TestReturnType<T extends (...args: any[]) => any> = T extends (...args: any[]) => infer R ? R : any;

// Prettier 2.8
// Does not parse

// Prettier 3.0
type TestReturnType<T extends (...args: any[]) => any> = T extends (
  ...args: any[]
) => infer R
  ? R
  : any;

Prise en charge des types mappés et de keyof (#14619 par @jbrown215)

// Input
type Mapped = { [key in keyof O]: number };

// Prettier 2.8
// Does not parse

// Prettier 3.0
type Mapped = { [key in keyof O]: number };

Prise en charge des gardes de type (#14767 par @panagosg7)

// Input
function isString (x: mixed): x is string { return typeof x === "string"; }

// Prettier 2.8
// Does not parse

// Prettier 3.0
function isString(x: mixed): x is string {
  return typeof x === 'string';
}

CSS

Amélioration du format des propriétés personnalisées (#9209 par @fisker)

Grâce à PostCSS 8.0, nous pouvons désormais gérer ces cas particuliers concernant les propriétés personnalisées.

/* Input */
:root {
  --empty: ;
  --JSON: [1, "2", {"three": {"a":1}}, [4]];
  --javascript: function(rule) { console.log(rule) };
}

@supports (--element(".minwidth", { "minWidth": 300 })) {
  [--self] {
    background: greenyellow;
  }
}

/* Prettier 2.8 */
SyntaxError: (postcss) CssSyntaxError Missed semicolon (3:20)
  1 | :root {
  2 |   --empty: ;
> 3 |   --JSON: [1, "2", {"three": {"a":1}}, [4]];
    |                    ^
  4 |   --javascript: function(rule) { console.log(rule) };
  5 | }
  6 |

/* Prettier 3.0 */
:root {
  --empty: ;
  --JSON: [1, "2", {"three": {"a": 1}}, [4]];
  --javascript: function(rule) {console.log(rule)};
}

@supports (--element(".minwidth", {"minWidth": 300})) {
  [--self] {
    background: greenyellow;
  }
}

Conservation de la virgule finale pour la fonction var (#13402 par @sosukesuzuki)

/* Input */
.foo {
  --bar: var(--baz,);
}

/* Prettier 2.8 */
.foo {
  --bar: var(--baz);
}

/* Prettier 3.0 */
.foo {
  --bar: var(--baz,);
}

Correction du saut de ligne dans les déclarations CSS contenant des virgules (#14208 par @mvorisek)

// Input
.myclass {
  box-shadow:
    inset 0 0 10px #555,
    0 0 20px black;
}

// Prettier 2.8
.myclass {
  box-shadow: inset 0 0 10px #555, 0 0 20px black;
}

// Prettier 3.0
.myclass {
  box-shadow:
    inset 0 0 10px #555,
    0 0 20px black;
}

Correction des URLs contenant des virgules (#14476 par @seiyab)

/* Input */
@font-face {
  src: url(RobotoFlex-VariableFont_GRAD,XTRA,YOPQ,YTAS,YTDE,YTFI,YTLC,YTUC,opsz,slnt,wdth,wght.ttf);
}

/* Prettier 2.8 */
@font-face {
  src: url(RobotoFlex-VariableFont_GRADXTRAYOPQYTASYTDEYTFIYTLCYTUCopszslntwdthwght.ttf);
}

/* Prettier 3.0 */
@font-face {
  src: url(RobotoFlex-VariableFont_GRAD,XTRA,YOPQ,YTAS,YTDE,YTFI,YTLC,YTUC,opsz,slnt,wdth,wght.ttf);
}

SCSS

Correction du formatage des chaînes contenant des caractères d'échappement \ (#13487 par @sosukesuzuki)

/* Input */
$description: "Lorem ipsum dolor sit \"amet\", consectetur adipiscing elit, " +
  "sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.";

/* Prettier 2.8 */
$description: 'Lorem ipsum dolor sit "amet", consectetur adipiscing elit, '+ "sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.";

/* Prettier 3.0 */
$description: 'Lorem ipsum dolor sit "amet", consectetur adipiscing elit, ' +
  "sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.";

Less

Correction d'une erreur d'analyse d'interpolation (#11343 par @fisker)

// Input
@{selector}-title{ @{prop}-size: @{color} }

// Prettier 2.8
SyntaxError: CssSyntaxError: Unknown word (1:20)
> 1 | @{selector}-title{ @{prop}-size: @{color} }

// Prettier 3.0
@{selector}-title {
  @{prop}-size: @{color};
}

Conservation du code JavaScript inline tel quel (#14109 par @fisker)

// Input
.calcPxMixin() {
  @functions: ~`(function() {
    const designWidth = 3840
    const actualWidth = 5760
    this.calcPx = function(_) {
      return _ * actualWidth / designWidth + 'px'
    }
  })()`;
}

// Prettier 2.8
.calcPxMixin() {
  @functions: ~`(
      function() {const designWidth = 3840 const actualWidth = 5760 this.calcPx =
        function(_) {return _ * actualWidth / designWidth + "px"}}
    )
    () `;
}

// Prettier 3.0
<Same as input>

HTML

Génération du doctype HTML5 en minuscules (#7391 par @fisker)

<!-- Input -->
<!DocType html>
<html><head></head><body></body></html>

<!-- Prettier 2.8 -->
<!DOCTYPE html>
<html>
  <head></head>
  <body></body>
</html>

<!-- Prettier 3.0 -->
<!doctype html>
<html>
  <head></head>
  <body></body>
</html>

Mise à jour d'angular-html-parser (#13578 par @thorn0)

Le fork du parser HTML d'Angular utilisé par Prettier a été synchronisé avec la version amont.

Formatage des balises <script> dans les SVG (#14400 par @fisker)

<!-- Input -->
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<script>
document.addEventListener(
'DOMContentLoaded', () => {
  const element = document.getElementById('foo')
   if (element) {
element.fillStyle = 'currentColor'
}
});
</script>
</svg>

<!-- Prettier 2.8 -->
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
  <script>
    document.addEventListener( 'DOMContentLoaded', () => { const element =
    document.getElementById('foo') if (element) { element.fillStyle =
    'currentColor' } });
  </script>
</svg>

<!-- Prettier 3.0 -->
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
  <script>
    document.addEventListener("DOMContentLoaded", () => {
      const element = document.getElementById("foo");
      if (element) {
        element.fillStyle = "currentColor";
      }
    });
  </script>
</svg>

Reconnaissance de l'élément <search> (#14615 par @fisker)

La spécification HTML a ajouté l'élément <search>.

<!-- Input -->
<SEARCH title="Website">
  ...
</SEARCH>

<!-- Prettier 2.8 -->
<SEARCH title="Website"> ... </SEARCH>

<!-- Prettier 3.0 -->
<search title="Website">...</search>

Vue

Ignorer htmlWhitespaceSensitivity lors du formatage des blocs racines des SFC Vue (#14401 par @fisker)

<!-- Input -->
<docs lang=unknown></docs><docs lang=unknown></docs><!-- display: inline --><docs lang=unknown></docs><docs lang=unknown style="display: inline"></docs>

<!-- Prettier 2.8 (--html-whitespace-sensitivity=strict) -->
<docs lang="unknown"></docs>><docs lang="unknown"></docs
><!-- display: inline --><docs lang="unknown"></docs
>><docs lang="unknown" style="display: inline"></docs>

<!-- Prettier 3.0 -->
<docs lang="unknown"></docs>
<docs lang="unknown"></docs>
<!-- display: inline -->
<docs lang="unknown"></docs>
<docs lang="unknown" style="display: inline"></docs>

Formatage des expressions TypeScript dans les liaisons d'attributs (#14506 par @seiyab)

<!-- Input -->
<script lang="ts"></script>
<template>
  <comp :foo="   (a:string)=>1"/>
</template>

<!-- Prettier 2.8 -->
<script lang="ts"></script>
<template>
  <comp :foo="   (a:string)=>1" />
</template>

<!-- Prettier 3.0 -->
<script lang="ts"></script>
<template>
  <comp :foo="(a: string) => 1" />
</template>

Correction de la détection des filtres Vue (#14542 par @fisker)

<!-- Input -->
<template>
  <div>
    {{
      fn(
        bitwise | or | operator | a_long_long_long_long_long_long_long_long_long_long_variable
      )
      | filter1
      | filter2
      | filter3
      | filter4
    }}
  </div>
</template>

<!-- Prettier 2.8 -->
<template>
  <div>
    {{
      fn(
        bitwise
          | or
          | operator
          | a_long_long_long_long_long_long_long_long_long_long_variable
      )
        | filter1
        | filter2
        | filter3
        | filter4
    }}
  </div>
</template>

<!-- Prettier 3.0 -->
<template>
  <div>
    {{
      fn(
        bitwise |
          or |
          operator |
          a_long_long_long_long_long_long_long_long_long_long_variable,
      )
        | filter1
        | filter2
        | filter3
        | filter4
    }}
  </div>
</template>

Éviter les points-virgules initiaux superflus (#14557 par @fisker)

<!-- Input -->
<template>
  <div @click="[foo, bar].forEach(fn => void fn())"></div>
</template>

<!-- Prettier 2.8 (With `--no-semi` option) -->
<template>
  <div @click=";[foo, bar].forEach((fn) => void fn())"></div>
</template>

<!-- Prettier 3.0 -->
<template>
  <div @click="[foo, bar].forEach((fn) => void fn())"></div>
</template>

Formater les expressions TS quand une balise script possède lang="ts" (#14587 par @seiyab)

<!-- Input -->
<script></script>
<script setup lang="ts"></script>
<template>
  {{ (x      as      number).toFixed(2) }}
</template>

<!-- Prettier 2.8 -->
<script></script>
<script setup lang="ts"></script>
<template>
  {{ (x      as      number).toFixed(2) }}
</template>

<!-- Prettier 3.0 -->
<script></script>
<script setup lang="ts"></script>
<template>
  {{ (x as number).toFixed(2) }}
</template>

Angular

Mise à jour de @angular/compiler vers la v14 (#13609 par @fisker)

• Prise en charge des objets raccourcis

• Abandon de la prise en charge des expressions entre guillemets

<!-- Input -->
<div [input]="{a, b   :   2 }"></div>

<!-- Prettier 2.8 -->
Error: Cannot find front char /:/ from index 0 in "{a, b   :   2 }"

<!-- Prettier 3.0 -->
<div [input]="{ a, b: 2 }"></div>

<!-- Input -->
<a [href]="http://google.com">Click me</a>

<!-- Prettier 2.8 -->
<a [href]="http:  //google.com">Click me</a>

<!-- Prettier 3.0 -->
<a [href]="http://google.com">Click me</a>

Correction des parenthèses avec l'opérateur de coalescence des nuls (#14216 par @thron0)

<!-- Input -->
<img [src]="(x && y) ?? z" />

<!-- Prettier 2.8 -->
<img [src]="x && y ?? z" />

<!-- Prettier 3.0 -->
<img [src]="(x && y) ?? z" />

Prise en charge de l'enchaînement optionnel calculé (#14658 par @fisker)

<!-- Input -->
<img [src]="   a?.[0]" />

<!-- Prettier 2.8 -->
<img [src]="   a?.[0]" />

<!-- Prettier 3.0 -->
<img [src]="a?.[0]" />

Suppression de l'espace après le nom des pipes (#14961 par @waterplea)

Nous avions introduit un nouveau format pour les pipes dans Prettier 2.8, mais celui-ci n'a pas été accepté par la communauté.

Nous introduisons donc un nouveau format qui reflète les retours de la communauté.

Pour plus d'informations sur la discussion, consultez https://github.com/prettier/prettier/issues/13887.

<!-- Input -->
<my-component
  [value]="value | transform: arg1 : arg2 | format: arg3 : arg4"
></my-component>

<!-- Prettier 2.8 -->
<my-component
  [value]="value | transform : arg1 : arg2 | format : arg3 : arg4"
></my-component>

<!-- Prettier 3.0 -->
<my-component
  [value]="value | transform: arg1 : arg2 | format: arg3 : arg4"
></my-component>

Markdown

Préservation des espaces multiples dans le code en ligne (#13590 par @kachkaev et @thorn0)

Auparavant, les espaces multiples dans le code en ligne étaient réduits à un seul espace. Ce comportement est abandonné pour respecter la spécification CommonMark.

<!-- Input -->
`   foo   bar   baz   `

<!-- Prettier 2.8 -->
` foo bar baz `

<!-- Prettier 3.0 -->
`   foo   bar   baz   `

API

Ajout des fichiers .d.ts (#14212 par @sosukesuzuki, @fisker)

Ajout des fichiers de définition de types nécessaires pour utiliser l'API JavaScript de Prettier depuis TypeScript. Cela évite aux utilisateurs d'avoir à installer @types/prettier.

Mise à jour de prettier.util (#14317, #14320 par @fisker)

• Ajout de prettier.util.getNextNonSpaceNonCommentCharacter

• Modification de prettier.util.getNextNonSpaceNonCommentCharacter

  La signature est passée de :

  function getNextNonSpaceNonCommentCharacterIndex<N>(
    text: string,
    node: N,
    locEnd: (node: N) => number,
  ): number | false;

  à :

  function getNextNonSpaceNonCommentCharacterIndex(
    text: string,
    startIndex: number,
  ): number | false;

• Modification de prettier.util.isPreviousLineEmpty

  La signature est passée de :

  function isPreviousLineEmpty<N>(
    text: string,
    node: N,
    locStart: (node: N) => number,
  ): boolean;

  à :

  function isPreviousLineEmpty(text: string, startIndex: number): boolean;

• Changement de prettier.util.isNextLineEmpty

  La signature est passée de

  function isNextLineEmpty<N>(
    text: string,
    node: N,
    locEnd: (node: N) => number,
  ): boolean;

  à

  function isNextLineEmpty(text: string, startIndex: number): boolean;

• Dépréciation de prettier.util.isNextLineEmptyAfterIndex

  Utilisez plutôt prettier.util.isNextLineEmpty.

Consultez la documentation pour plus de détails.

Correction du cache de chargement des plugins (#14576 par @fisker)

Les instances de plugin étaient incorrectement mises en cache, voir ce problème pour plus de détails.

Arrêt du formatage de code inconnu avec le parser babel (#14718 par @fisker)

await prettier.format("foo")

// Prettier 2.8
No parser and no filepath given, using 'babel' the parser now but this will throw an error in the future. Please specify a parser or a filepath so one can be inferred.
'foo;\n'

// Prettier 3.0
UndefinedParserError: No parser and no file path given, couldn't infer a parser.

CLI

Message d'échec mis à jour pour plus d'informations (#11369 par @webark)

Le message "Forgot to run Prettier?" est remplacé par "Run Prettier with --write to fix."

Le message conserve le même esprit mais est moins susceptible d'être mal interprété car il est plus formel plutôt que familier.

Changement de --loglevel en --log-level (#13204 par @sosukesuzuki)

# Prettier 2.8
prettier test.js --loglevel=debug

# Prettier 3.0
prettier test.js --log-level=debug

Prise en charge de plusieurs --ignore-path (#14332 par @fisker)

Il est désormais possible de passer plusieurs chemins avec --ignore-path.

prettier . --ignore-path=.prettier-ignore --ignore-path=.eslintignore

Affichage des chemins au format posix sous Windows (#14333 par @fisker)

Alignement sur le comportement d'autres outils comme ESLint et Stylelint.

// Prettier 2.8
Checking formatting...
[warn] src\utilities\create-get-visitor-keys.js
[warn] src\utilities\unexpected-node-error.js
[warn] Code style issues found in 2 files. Forgot to run Prettier?

// Prettier 3.0
Checking formatting...
[warn] src/utilities/create-get-visitor-keys.js
[warn] src/utilities/unexpected-node-error.js
[warn] Code style issues found in 2 files. Forgot to run Prettier?

Désactivation de l'expansion des globs via les liens symboliques (#14627 par @andersk)

Prettier ne suit plus les liens symboliques lors de l'expansion des arguments en ligne de commande. Cela évite les problèmes dans de nombreux scénarios tels que les liens symboliques externes à l'arborescence source, liens vers des fichiers ignorés, et les cycles de liens symboliques.

Saut de ligne après le chemin des fichiers en erreur (#14788 par @sosukesuzuki)

Auparavant, seule l'option --write ajoutait un saut de ligne avant l'erreur. Désormais, les autres options et l'absence d'option affichent également un saut de ligne.

# Input
prettier ./test.js

# Prettier 2.8
test.js[error] test.js: SyntaxError: Unexpected token: ')' (1:6)
[error] > 1 | 1 (+-) hoge
[error]     |      ^

# Prettier 3.0
test.js
[error] test.js: SyntaxError: Unexpected token: ')' (1:6)
[error] > 1 | 1 (+-) hoge
[error]     |

Effacement du nom de fichier avant l'affichage du code ignoré (#14794 par @fisker)

# Input
echo test.js > .prettierignore
echo code > test.js
prettier ./test.js

# Prettier 2.8
test.jscode

# Prettier 3.0
code