Prettier 2.0 « 2020 »

21 mars 2020 · 39 minutes de lecture

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 →

De meilleurs paramètres par défaut, une CLI améliorée et des heuristiques optimisées. Ah, et TypeScript 3.8.

Après une longue et minutieuse réflexion, nous avons décidé de modifier les valeurs par défaut des options trailingComma, arrowParens et endOfLine. Nous avons rendu la CLI plus intuitive. Et nous avons finalement abandonné la prise en charge des versions de Node antérieures à la 10, qui étaient devenues une lourde charge de maintenance et un obstacle pour les contributeurs. Consultez les détails ci-dessous.

Principales fonctionnalités

JavaScript

Amélioration de l'heuristique de rupture des chaînes de méthodes (#6685 par @mmkal)

Auparavant, toute chaîne d'appels de méthode de longueur trois ou plus était automatiquement divisée en plusieurs lignes. La nouvelle heuristique se base sur la complexité des arguments d'appel dans la chaîne, plutôt que sur sa simple longueur. Désormais, si les appels de méthode chaînés ont des arguments difficiles à comprendre rapidement (par exemple des fonctions ou des objets profondément imbriqués), la chaîne est rompue. Sinon, ils restent sur une seule ligne. Consultez les problèmes précédents #3197, #4765, #1565 et #4125 pour le contexte et des exemples.

Pour obtenir les meilleurs résultats, assurez-vous que la valeur de l'option printWidth n'est pas trop élevée.

// Prettier 1.19
if (
  foo
    .one()
    .two()
    .three() ===
  bar
    .four()
    .five()
    .six()
) {
  // ...
}

// Prettier 2.0
if (foo.one().two().three() === bar.four().five().six()) {
  // ...
}

Correction définitive pour les casts de type Closure (#7791 par @thorn0, #7011 par @evilebottnawi)

Prettier tentait de préserver ces assertions de type JSDoc depuis v1.6.0, avec des résultats mitigés. Alors que la vérification de types basée sur JSDoc devient plus courante, nous recevions de nouveaux rapports de bogues concernant cette syntaxe. Ces erreurs étaient complexes car les parenthèses requises autour de l'expression ne faisaient pas partie de l'AST, empêchant Prettier de détecter leur présence.

Finalement, nous avons utilisé l'option createParenthesizedExpressions du parseur Babel pour représenter les parenthèses dans l'AST via des nœuds non standard. Cela a permis de corriger tous les bogues signalés.

En conséquence, Prettier ne reconnaîtra pas les casts de type JSDoc si les parseurs flow ou typescript sont utilisés, ce qui est logique car cette syntaxe n'a guère d'utilité dans les fichiers Flow et TypeScript.

// Input
const nestedAssertions = /** @type {MyType} */
  (/** @type {unknown} */
      (x));

// Prettier 1.19
const nestedAssertions /** @type {MyType} */ /** @type {unknown} */ = x;

// Prettier 2.0
const nestedAssertions = /** @type {MyType} */ (/** @type {unknown} */ (x));

Documentation de référence pour cette syntaxe : Closure Compiler, TypeScript (avec --checkJs).

TypeScript

TypeScript 3.8 (#7631 par @thorn0, #7764 par @sosukesuzuki, #7804 par @sosukesuzuki)

Prettier prend désormais en charge la nouvelle syntaxe ajoutée dans TypeScript 3.8 :

CLI

Vérifier si les globs passés sont des noms de fichiers existants avant de les traiter comme des globs (#7587 par @fisker)

Comme les noms de fichiers sous Linux peuvent contenir presque tous les caractères, des chaînes comme foo*.js et [bar].css sont des noms de fichiers valides. Auparavant, si l'utilisateur devait formater un fichier nommé [bar].css, il fallait utiliser une syntaxe d'échappement de glob : prettier "\[bar].css" (celle-ci ne fonctionne pas sous Windows, où les barres obliques inverses sont traitées comme des séparateurs de chemin) ou prettier "[[]bar].css". À cause de cela, des cas d'utilisation importants étaient cassés. Par exemple, lint-staged passe des chemins absolus et ne connaît rien à la syntaxe d'échappement. Maintenant, lorsque la CLI de Prettier reçoit un glob, elle essaie d'abord de le résoudre comme un nom de fichier littéral.

Développer les répertoires, y compris `.` (#7660 par @thorn0)

Il est enfin possible d'exécuter prettier --write . pour formater tous les fichiers pris en charge dans le répertoire courant et ses sous-répertoires. Les noms de répertoire peuvent être mélangés avec des noms de fichiers et des motifs glob (par exemple prettier src "test/*.spec.js" foo.js).

De plus, l'ordre dans lequel les fichiers sont traités a changé. Auparavant, tous les fichiers étaient triés par ordre alphabétique avant le formatage. Maintenant, leur ordre correspond à l'ordre des chemins spécifiés. Pour chaque chemin, la liste des fichiers résolus est triée, mais le tri complet de la liste combinée résultante n'est plus effectué.

Il y a aussi des changements dans la façon dont la CLI de Prettier signale les erreurs si les motifs passés ne correspondent à aucun fichier. Auparavant, la CLI de Prettier affichait une erreur "No matching files" si elle ne trouvait aucun fichier du tout—pour tous les motifs ensemble, et non pour un motif individuel. Dans Prettier 2.0, la CLI affiche également ces erreurs pour des motifs individuels.

Changements cassants

API

Correction du filtrage par motif des surcharges de configuration pour inclure les fichiers pointés (#5813 par @chrisblossom)

Auparavant, les surcharges de configuration n'étaient pas appliquées aux fichiers dont le nom commençait par un point.

Abandon de la prise en charge des versions de Node antérieures à 10 (#6908 par @fisker)

La version minimale requise de Node est désormais 10.13.0. Pour nos contributeurs, cela signifie qu'il n'est plus nécessaire de se plier en quatre pour faire passer les tests sur Node 4.

Changement de la valeur par défaut pour `trailingComma` à `es5` (#6963 par @fisker)

Avant la version 2.0, Prettier évitait par défaut les virgules finales (trailing commas) lorsque possible. Cela rendait le JavaScript produit compatible avec des environnements aujourd'hui très anciens comme IE8, mais impliquait certaines opportunités manquées.

Prettier propose une option pour configurer les virgules finales depuis ses débuts, et une initiative pour changer la valeur par défaut existe depuis plus de trois ans. Dans Prettier v2.0, la valeur par défaut devient désormais es5 au lieu de none.

Si vous préférez conserver l'ancien comportement, configurez Prettier avec { "trailingComma": "none" }. Il est possible que la valeur par défaut évolue vers all (impliquant encore plus de virgules finales) dans une future version majeure de Prettier à mesure que l'écosystème JavaScript continue de mûrir.

API de plugin : changements dans `prettier.util` (#6993 par @fisker)

prettier.util.mapDoc a été supprimée.
Utilisez désormais prettier.doc.utils.mapDoc.
prettier.util.isNextLineEmpty a été mise à jour.
Utilisez isNextLineEmpty(text, node, locEnd) au lieu de isNextLineEmpty(text, node, options).
prettier.util.isPreviousLineEmpty a été mise à jour.
Utilisez isPreviousLineEmpty(text, node, locStart) au lieu de isPreviousLineEmpty(text, node, options).
prettier.util.getNextNonSpaceNonCommentCharacterIndex a été mise à jour.
Utilisez getNextNonSpaceNonCommentCharacterIndex(text, node, locEnd) au lieu de getNextNonSpaceNonCommentCharacterIndex(text, node, options).

Changement de la valeur par défaut de `arrowParens` à `always` (#7430 par @kachkaev)

Depuis la version 1.9, Prettier proposait une option pour toujours entourer les arguments des fonctions fléchées avec des parenthèses. Dans la version 2.0, ce comportement devient la valeur par défaut.

// Input
const fn = (x) => y => x + y;

// Prettier 1.19
const fn = x => y => x + y;

// Prettier 2.0
const fn = (x) => (y) => x + y;

À première vue, éviter les parenthèses dans l'exemple isolé ci-dessus peut sembler préférable car cela réduit le bruit visuel. Cependant, lorsque Prettier supprime les parenthèses, il devient plus difficile d'ajouter des annotations de type, des arguments supplémentaires, des valeurs par défaut ou d'autres éléments. L'utilisation systématique des parenthèses offre une meilleure expérience aux développeurs lors de la modification de bases de code réelles, ce qui justifie ce changement.

Nous vous encourageons à utiliser la nouvelle valeur par défaut, mais si vous préférez l'ancien comportement, configurez Prettier avec { "arrowParens": "avoid" }.

Changement de la valeur par défaut de `endOfLine` à `lf` (#7435 par @kachkaev)

Les premières versions de Prettier formataient tous les fichiers avec les sauts de ligne de type *nix (\n, aussi appelé LF). Ce comportement a été modifié dans #472, qui permettait de préserver les sauts de ligne Windows (\r\n, aussi appelé CRLF).

Depuis la version 1.15 de Prettier, le type de sauts de ligne est configurable via l'option endOfLine. La valeur par défaut était auto pour assurer la compatibilité ascendante, ce qui signifiait que Prettier conservait le type de sauts de ligne déjà présent dans un fichier donné.

Cela impliquait que Prettier convertissait les sauts de ligne mélangés dans un même fichier vers celui trouvé en fin de première ligne. Cependant, les sauts de ligne dans des fichiers distincts pouvaient rester incohérents. De plus, les contributeurs sur différents systèmes d'exploitation pouvaient accidentellement modifier les sauts de ligne dans des fichiers déjà validés, et Prettier acceptait cela. Cela générait un git diff important et rendait l'historique ligne par ligne d'un fichier (git blame) plus difficile à explorer.

Nous vous encourageons à utiliser la nouvelle valeur par défaut de endOfLine, désormais lf. Il peut aussi être utile de consulter la documentation de l'option pour vérifier la configuration de votre dépôt. Cela évitera un mélange de sauts de ligne dans le dépôt et un git blame erroné. Si vous préférez l'ancien comportement, configurez Prettier avec { "endOfLine": "auto" }.

Si vous utilisez Travis CI, soyez attentif à l'option autocrlf dans .travis.yml.

Mise en cache des résultats de recherche des plugins (#7485 par @fisker)

Auparavant, Prettier effectuait une recherche dans le système de fichiers pour les plugins à chaque appel de prettier.format. Désormais, les résultats sont mis en cache. Le cache peut être vidé via prettier.clearConfigCache().

Suppression des options et valeurs d'option dépréciées (#6993, #7511, #7533, #7535, #7536 par @fisker)

Options :
- useFlowParser (--flow-parser en CLI) est dépréciée depuis v0.0.10.
Valeurs d'option :
- parser : babylon (renommé babel dans v1.16.0), postcss (renommé css dans v1.7.1), typescript-eslint (ancien alias de typescript)
- proseWrap : true (renommé always dans v1.9.0), false (renommé never dans v1.9.0)
- trailingComma : true (renommé es5 dans v0.19.0), false (renommé none dans v0.19.0)

Suppression du paramètre `version` de `prettier.getSupportInfo` (#7620 par @thorn0)

Depuis Prettier 1.8.0, il était possible de passer un numéro de version à prettier.getSupportInfo pour obtenir des informations sur les langages, options, etc. pris en charge par les versions précédentes. Cette API intéressante mais apparemment peu utile a continué de causer des problèmes de maintenance et a été supprimée dans Prettier 2.0.0.

Autres changements

JavaScript

Toujours ajouter un espace après le mot-clé `function` (#3903 par @j-f1, @josephfrazier, @sosukesuzuki, @thorn0; #7516 par @bakkot)

Auparavant, un espace était ajouté après le mot-clé function dans les déclarations de fonction, mais pas dans les expressions de fonction. Désormais, par souci de cohérence, un espace est systématiquement ajouté après function. La seule exception concerne les déclarations de générateurs où function* est traité comme un mot entier.

// Prettier 1.19
const identity = function(value) {
  return value;
};
function identity(value) {
  return value;
}
const f = function<T>(value: T) {};
const g = function*() {};

// Prettier 2.0
const identity = function (value) {
  return value;
};
function identity(value) {
  return value;
}
const f = function <T>(value: T) {};
const g = function* () {};

Corriger le formatage instable des instructions étiquetées avec commentaires (#6984 par @clement26695)

// Input
loop1:
//test
const i = 3;

// Prettier 1.19 (first output)
loop1: //test
const i = 3;

// Prettier 1.19 (second output)
//test
loop1: const i = 3;

// Prettier 2.0 (first and second outputs)
//test
loop1: const i = 3;

Corriger le formatage des expressions logiques, binaires et séquentielles dans les littéraux de gabarit (#7010 par @evilebottnawi)

// Input
`111111111 222222222 333333333 444444444 555555555 666666666 777777777 ${foo || bar}`;
`111111111 222222222 333333333 444444444 555555555 666666666 777777777 ${foo | bar}`;
`111111111 222222222 333333333 444444444 555555555 666666666 777777777 ${(foo, bar)}`;

// Prettier 1.19
`111111111 222222222 333333333 444444444 555555555 666666666 777777777 ${foo ||
  bar}`;
`111111111 222222222 333333333 444444444 555555555 666666666 777777777 ${foo |
  bar}`;
`111111111 222222222 333333333 444444444 555555555 666666666 777777777 ${(foo,
bar)}`;

// Prettier 2.0
`111111111 222222222 333333333 444444444 555555555 666666666 777777777 ${
  foo || bar
}`;
`111111111 222222222 333333333 444444444 555555555 666666666 777777777 ${
  foo | bar
}`;
`111111111 222222222 333333333 444444444 555555555 666666666 777777777 ${
  (foo, bar)
}`;

Corriger le formatage instable des expressions logiques (#7026 par @thorn0)

// Input
const averredBathersBoxroomBuggyNurl =
  bifornCringerMoshedPerplexSawder === 1 ||
  (askTrovenaBeenaDependsRowans === 2 || glimseGlyphsHazardNoopsTieTie === 3);

// Prettier 1.19 (first output)
const averredBathersBoxroomBuggyNurl =
  bifornCringerMoshedPerplexSawder === 1 ||
  askTrovenaBeenaDependsRowans === 2 || glimseGlyphsHazardNoopsTieTie === 3;

// Prettier 1.19 (second output)
const averredBathersBoxroomBuggyNurl =
  bifornCringerMoshedPerplexSawder === 1 ||
  askTrovenaBeenaDependsRowans === 2 ||
  glimseGlyphsHazardNoopsTieTie === 3;

// Prettier 2.0 (first and second outputs)
const averredBathersBoxroomBuggyNurl =
  bifornCringerMoshedPerplexSawder === 1 ||
  askTrovenaBeenaDependsRowans === 2 ||
  glimseGlyphsHazardNoopsTieTie === 3;

Formater `throw` comme `return` (#7070 par @sosukesuzuki)

// Input
function foo() {
  throw this.hasPlugin("dynamicImports") && this.lookahead().type === tt.parenLeft.right;
}

// Prettier 1.19
function foo() {
  throw this.hasPlugin("dynamicImports") &&
    this.lookahead().type === tt.parenLeft.right;
}


// Prettier 2.0
function foo() {
  throw (
    this.hasPlugin("dynamicImports") &&
    this.lookahead().type === tt.parenLeft.right
  );
}

Corriger l'indentation dans les ternaires imbriqués dans les conditions d'autres ternaires (#7087 par @thorn0)

// Input
const foo = (number % 10 >= 2 && (number % 100 < 10 || number % 100 >= 20) ?
kochabCooieGameOnOboleUnweave : annularCooeedSplicesWalksWayWay)
? anodyneCondosMalateOverateRetinol : averredBathersBoxroomBuggyNurl;

// Prettier 1.19
const foo = (number % 10 >= 2 && (number % 100 < 10 || number % 100 >= 20)
? kochabCooieGameOnOboleUnweave
: annularCooeedSplicesWalksWayWay)
  ? anodyneCondosMalateOverateRetinol
  : averredBathersBoxroomBuggyNurl;

// Prettier 2.0
const foo = (
  number % 10 >= 2 && (number % 100 < 10 || number % 100 >= 20)
    ? kochabCooieGameOnOboleUnweave
    : annularCooeedSplicesWalksWayWay
)
  ? anodyneCondosMalateOverateRetinol
  : averredBathersBoxroomBuggyNurl;

Ajuster la logique de composition des fonctions pour les décorateurs (#7138 par @brainkim)

Comme les décorateurs modifient la ligne suivante, répartir les arguments d'un appel de décorateur sur plusieurs lignes peut obscurcir la relation entre le décorateur et sa cible, produisant un code moins lisible. Par conséquent, la logique de composition des fonctions introduite dans #6033 a été modifiée pour exclure les appels de décorateurs.

// Input
export class Item {
  @OneToOne(() => Thing, x => x.item)
  thing!: Thing;
}

// Prettier 1.19
export class Item {
  @OneToOne(
    () => Thing,
    x => x.item,
  )
  thing!: Thing;
}

// Prettier 2.0
export class Item {
  @OneToOne(() => Thing, x => x.item)
  thing!: Thing;
}

Corriger le placement du point-virgule dans les instructions `return` vides avec commentaire (#7140 par @sosukesuzuki)

// Input
return // comment
;

// Prettier 1.19
return // comment;

// Prettier 2.0
return; // comment

Respecter la signification des espaces dans les littéraux de gabarit HTML (#7208 par @saschanaz)

Prettier ajoutait auparavant des sauts de ligne pour chaque chaîne de gabarit HTML, ce qui pouvait entraîner des espaces blancs inattendus dans le HTML rendu. Cela ne se produit plus sauf si l'option --html-whitespace-sensitivity ignore est spécifiée.

// Input
html`<div>`;
html`  <span>TEXT</span>  `;

// Prettier 1.19
html`
  <div></div>
`;
html`
  <span>TEXT</span>
`;

// Prettier 2.0
html`<div></div>`;
html` <span>TEXT</span> `;

Supprimer les parenthèses inutiles lors du rendu de JSX avec yield (#7367 par @cola119)

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

// Prettier 1.19
function* f() {
  yield (<div>generator</div>);
}

// Prettier 2.0
function* f() {
  yield <div>generator</div>;
}

Conserver les parenthèses autour des expressions virgules dans les déclarations d'exportation par défaut (#7491 par @fisker)

Omettre ces parenthèses rend le code non valide.

// Input
export default (1, 2);

// Prettier 1.19
export default 1, 2;

// Prettier 2.0
export default (1, 2);

Correction des cas limites avec les parenthèses autour du chaînage optionnel (#7500 par @thorn0)

// Input
(foo?.bar)();
new (foo?.bar)();

// Prettier 1.19
foo?.bar();
new foo?.bar();

// Prettier 2.0
(foo?.bar)();
new (foo?.bar)();

Ne pas mettre `undefined` entre parenthèses dans les expressions conditionnelles au sein de JSX (#7504 par @fisker)

Auparavant, des parenthèses étaient ajoutées autour de toute expression sauf null. Désormais, undefined est également exclu.

// Input
foo ? <span>loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong jsx</span> :
undefined
foo ? <span>loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong jsx</span> :
null

// Prettier 1.19
foo ? (
  <span>
    loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong jsx
  </span>
) : (
  undefined
);
foo ? (
  <span>
    loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong jsx
  </span>
) : null;

// Prettier 2.0
foo ? (
  <span>
    loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong jsx
  </span>
) : undefined;
foo ? (
  <span>
    loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong jsx
  </span>
) : null;

Maintenir la position des commentaires pour les assignations/variables (#7709 par @sosukesuzuki)

// Input
const foo = /* comments */
  bar;

// Prettier 1.19
const foo /* comments */ = bar;

// Prettier 2.0
const foo = /* comments */ bar;

TypeScript

Babel comme analyseur alternatif pour TypeScript (#6400 par @JounQin et @thorn0)

Une nouvelle valeur pour l'option parser a été ajoutée : babel-ts, qui utilise le plugin TypeScript de Babel. L'analyseur babel-ts prend en charge les fonctionnalités JavaScript non encore supportées par TypeScript (propositions ECMAScript, par exemple les méthodes et accesseurs privés), mais il est moins permissif en ce qui concerne la récupération d'erreurs et moins éprouvé que l'analyseur typescript. Bien que le plugin TypeScript de Babel soit assez mature, les AST produits par les deux analyseurs ne sont pas compatibles à 100%. Nous avons essayé de prendre en compte les divergences, mais il y a très probablement encore des cas où le code est formaté différemment, voire de manière incorrecte. Nous faisons appel à vous, nos utilisateurs, pour nous aider à trouver de tels cas. Si vous en rencontrez, veuillez ouvrir des issues. À long terme, cela contribuera à unifier le format AST dans les futures versions des analyseurs et ainsi participer à un écosystème d'analyseurs JavaScript meilleur et plus solide.

Correction du formatage des types complexes dans les annotations de type de retour des fonctions fléchées (#6901 par @sosukesuzuki)

// Input
export const getVehicleDescriptor = async (
  vehicleId: string
): Promise<
  Collections.Parts.PrintedCircuitBoardAssembly["attributes"] & undefined
> => {};

// Prettier 1.19
export const getVehicleDescriptor = async (
  vehicleId: string
): Promise<Collections.Parts.PrintedCircuitBoardAssembly["attributes"] &
  undefined> => {};

// Prettier 2.0
export const getVehicleDescriptor = async (
  vehicleId: string
): Promise<
  Collections.Parts.PrintedCircuitBoardAssembly["attributes"] & undefined
> => {};

Afficher les types JSDoc tels quels au lieu de générer des erreurs (#7020 par @thorn0)

Une autre correction liée à la récupération d'erreurs. Cela devrait être utile à ceux qui migrent de Flow vers TypeScript.

// Input
function fromFlow(arg: ?Maybe) {}

// Prettier 1.19
Error: unknown type: "TSJSDocNullableType"

// Prettier 2.0
function fromFlow(arg: ?Maybe) {}

Ne pas imprimer de virgules supplémentaires après les éléments rest dans les tuples (#7075 par @thorn0)

Un élément rest est toujours le dernier élément d'un type tuple. Rien ne peut être ajouté après.
Bien que TS accepte cette virgule, Babel ne la parse pas
Dans les paramètres de fonction et la déstructuration de tableau, une telle virgule est une erreur de syntaxe. La conserver dans les tuples est incohérent.

// Input
type ValidateArgs = [
	{
		[key: string]: any;
	},
	string,
	...string[],
];

// Prettier 1.19
type ValidateArgs = [
  {
    [key: string]: any;
  },
  string,
  ...string[],
];

// Prettier 2.0
type ValidateArgs = [
  {
    [key: string]: any;
  },
  string,
  ...string[]
];

Correction de l'indentation des fonctions fléchées dans les déclarations de variables suivies de commentaires (#7094 par @sosukesuzuki)

Cela pouvait se produire avec du code écrit dans le style sans point-virgule si l'instruction après la déclaration de variable était préfixée d'un point-virgule pour éviter les problèmes d'ASI.

// Input
const foo = () => {
  return
}

// foo
;[1,2,3].forEach(bar)

// Prettier 1.19
const foo = () => {
    return;
  };

  // foo
[1, 2, 3].forEach(bar);

// Prettier 2.0
const foo = () => {
  return;
};

// foo
[1, 2, 3].forEach(bar);

Correction de l'impression des commentaires dans les types de fonction (#7104 par @thorn0)

// Input
type f1 = (
  currentRequest: {a: number},
  // TODO this is a very very very very long comment that makes it go > 80 columns
) => number;

// Prettier 1.19
type f1 = (currentRequest: {
  a: number;
}) => // TODO this is a very very very very long comment that makes it go > 80 columns
number;

// Prettier 2.0
type f1 = (
  currentRequest: { a: number }
  // TODO this is a very very very very long comment that makes it go > 80 columns
) => number;

Correction du formatage des commentaires pour les nœuds de type fonction (#7144 par @armano2)

// Input
interface foo1 {
  bar1/* foo */ (/* baz */) // bat
  bar2/* foo */ ? /* bar */ (/* baz */) /* bat */;
  bar3/* foo */ (/* baz */) /* bat */
  bar4/* foo */ ? /* bar */ (bar: /* baz */ string): /* bat */ string;
  /* foo */ (/* bar */): /* baz */ string;
  /* foo */ (bar: /* bar */ string): /* baz */ string;
  /* foo */ new /* bar */  (a: /* baz */ string): /* bat */ string
  /* foo */ new /* bar */ (/* baz */): /* bat */ string
}

type foo7 = /* foo */ (/* bar */) /* baz */ => void
type foo8 = /* foo */ (a: /* bar */ string) /* baz */ => void
let foo9: new /* foo */ (/* bar */) /* baz */ => string;
let foo10: new /* foo */ (a: /* bar */ string) /* baz */ => string;

// Prettier 1.19
interface foo1 {
  bar1 /* foo */ /* baz */(); // bat
  bar2 /* foo */ /* bar */ /* baz */ /* bat */?();
  bar3 /* foo */ /* baz */() /* bat */;
  bar4 /* foo */?(/* bar */ bar: /* baz */ string): /* bat */ string;
  /* foo */ (): /* bar */ /* baz */ string;
  /* foo */ (bar: /* bar */ string): /* baz */ string;
  /* foo */ new (/* bar */ a: /* baz */ string): /* bat */ string;
  /* foo */ new (): /* bar */ /* baz */ /* bat */ string;
}

type foo7 = /* foo */ () => /* bar */ /* baz */ void;
type foo8 = /* foo */ (a: /* bar */ string) => /* baz */ void;
let foo9: new () => /* foo */ /* bar */ /* baz */ string;
let foo10: new (/* foo */ a: /* bar */ string) => /* baz */ string;

// Prettier 2.0
interface foo1 {
  bar1 /* foo */(/* baz */); // bat
  bar2 /* foo */ /* bar */?(/* baz */) /* bat */;
  bar3 /* foo */(/* baz */) /* bat */;
  bar4 /* foo */?(/* bar */ bar: /* baz */ string): /* bat */ string;
  /* foo */ (/* bar */): /* baz */ string;
  /* foo */ (bar: /* bar */ string): /* baz */ string;
  /* foo */ new (/* bar */ a: /* baz */ string): /* bat */ string;
  /* foo */ new (/* baz */): /* bar */ /* bat */ string;
}

type foo7 = /* foo */ (/* bar */) => /* baz */ void;
type foo8 = /* foo */ (a: /* bar */ string) => /* baz */ void;
let foo9: new (/* bar */) => /* foo */ /* baz */ string;
let foo10: new (/* foo */ a: /* bar */ string) => /* baz */ string;

// Input
abstract class Test {
  abstract foo12 /* foo */ (a: /* bar */ string): /* baz */ void
  abstract foo13 /* foo */ (/* bar */) /* baz */
}

// Prettier 1.19
Error: Comment "foo" was not printed. Please report this error!

// Prettier 2.0
abstract class Test {
  abstract foo12 /* foo */(a: /* bar */ string): /* baz */ void;
  abstract foo13 /* foo */(/* bar */); /* baz */
}

Correction de l'impression des types mappés avec omission du type template (#7221 par @cola119)

// Input
type A = { [key in B] };

// Prettier 1.19
type A = { [key in B]: };

// Prettier 2.0
type A = { [key in B] };

Correction des cas limites d'impression des signatures d'index (#7228 par @cola119)

Bien que les signatures d'index sans annotations de type ou avec plusieurs paramètres ne soient pas valides en TypeScript, l'analyseur TypeScript prend en charge cette syntaxe. Conformément aux précédents efforts de récupération d'erreurs, Prettier garantit désormais que sa sortie reste analysable dans ces cas. Les versions antérieures produisaient du code non analysable.

// Input
type A = { [key: string] };
type B = { [a: string, b: string]: string; };

// Prettier 1.19
type A = { [key: string]:  };
type B = { [a: stringb: string]: string };

// Prettier 2.0
type A = { [key: string] };
type B = { [a: string, b: string]: string };

Correction de l'impression des commentaires dans les paramètres de type vides (#7729 par @sosukesuzuki)

// Input
const a: T</* comment */> = 1;

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

// Prettier 2.0
const a: T</* comment */> = 1;

Flow

Ajout de la prise en charge de `symbol` (#7472 par @fisker)

Un nouveau type de nœud AST a été introduit dans flow@0.114.0, désormais reconnu.

// Input
const x: symbol = Symbol();

// Prettier after updating Flow, but without this fix
Error: unknown type: "SymbolTypeAnnotation"

// Prettier 2.0
const x: symbol = Symbol();

Ajout de la prise en charge des décorateurs (#7482 par @fisker)

// Input
/* @flow */
@decorator4
class Foo {
  @decorator1
  method1() {}

  @decorator2
  @decorator3
  method2() {}
}

// Prettier 1.19
SyntaxError: Unexpected token `@`, expected the token `class` (2:1)

// Prettier 2.0
/* @flow */
@decorator4
class Foo {
  @decorator1
  method1() {}

  @decorator2
  @decorator3
  method2() {}
}

Correction des déclarations de champs de classe privés (#7484 par @fisker)

// Input
class Foo {
  #privateProp: number;
}

// Prettier 1.19
class Foo {
  privateProp: number;
}

// Prettier 2.0
class Foo {
  #privateProp: number;
}

CSS

Ne pas mettre en minuscules les noms d'éléments dans les sélecteurs CSS (#6947 par @ark120202)

Précédemment, Prettier conservait déjà la casse des noms d'éléments inconnus, mais mettait en minuscules les noms des éléments HTML. Cela posait problème lorsque le CSS était appliqué à un document sensible à la casse et qu'il existait un élément portant le même nom qu'en HTML, comme dans NativeScript. Prettier conserve désormais systématiquement la casse d'origine.

/* Input */
Label {
}

/* Prettier 1.19 */
label {
}

/* Prettier 2.0 */
Label {
}

SCSS

Ne pas ajouter de virgule supplémentaire après le dernier commentaire dans une map (#6918 par @fisker)

Précédemment, lorsque trailingComma était configuré sur es5, une virgule supplémentaire était ajoutée après le dernier commentaire dans une map SCSS.

// Input
$my-map: (
  'foo': 1, // Comment
  'bar': 2, // Comment
);

// Prettier 1.19
$my-map: (
  "foo": 1,
  // Comment
    "bar": 2,
  // Comment,
);

// Prettier 2.0
$my-map: (
  "foo": 1,
  // Comment
    "bar": 2,
  // Comment
);

Correction de l'espacement dans la concaténation SCSS (#7211 par @sasurau4)

// Input
a {
  background-image: url($test-path + 'static/test.jpg');
}

// Prettier 1.19
a {
  background-image: url($test-path+"static/test.jpg");
}

// Prettier 2.0
a {
  background-image: url($test-path + "static/test.jpg");
}

Less

Correction de plusieurs problèmes persistants par mise à jour de `postcss-less` (#6981 par @fisker, #7021 par @evilebottnawi, @thorn0)

each est désormais pris en charge (#5653).
!important était déplacé hors des paramètres d'appel de mixin (#3544).
Les commentaires dans les ensembles de règles passés aux appels de mixin provoquaient des points-virgules en double (#3096).
::before était cassé dans les paramètres d'appel de mixin (#5791).

HTML

Les commentaires dans les balises `pre` provoquaient un mauvais formatage de la balise fermante suivante (#5959 par @selvazhagan)

<!-- Input -->
<details>
<pre>
    <!-- TEST -->
  </pre></details>

<!-- Prettier 1.19 -->
<details>
  <pre>
    <!-- TEST -->
  </pre></details</details
>

<!-- Prettier 2.0 -->
<details>
  <pre>
    <!-- TEST -->
  </pre>
</details>

Ne plus traiter les deux-points comme délimiteurs de préfixe de namespace dans les noms de balises (#7273 par @fisker)

En HTML5, les deux-points n'ont aucune signification particulière dans les noms de balises. Auparavant, Prettier les traitait à la manière XML comme délimiteurs de préfixe de namespace, mais ce n'est plus le cas. Concrètement, cela signifie que les balises dont les ancêtres contiennent des deux-points dans leurs noms sont désormais traitées comme des balises HTML classiques : s'il s'agit de balises standard connues, leurs noms peuvent être mis en minuscules et leur sensibilité aux espaces peut être présumée ; les éléments personnalisés dont les noms sont inconnus de Prettier conservent leur casse et, si --html-whitespace-sensitivity est défini sur css, sont traités comme inline.

<!-- Input -->
<with:colon>
<div> looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog block </div>
<DIV> block </DIV><DIV> block </DIV> <DIV> block </DIV><div> block </div><div> block </div>
<pre> pre pr
e</pre>
<textarea> pre-wrap pr
e-wrap </textarea>
<span> looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog inline </span>
<span> inline </span><span> inline </span> <span> inline </span><span> inline </span>
</with:colon>

<!-- Prettier 1.19 -->
<with:colon>
  <div>
    looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog block
  </div>
  <DIV> block </DIV><DIV> block </DIV> <DIV> block </DIV><div> block </div
  ><div> block </div>
  <pre> pre pr e</pre>
  <textarea> pre-wrap pr e-wrap </textarea>
  <span>
    looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog inline
  </span>
  <span> inline </span><span> inline </span> <span> inline </span
  ><span> inline </span>
</with:colon>

<!-- Prettier 2.0 -->
<with:colon>
  <div>
    looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog block
  </div>
  <div>block</div>
  <div>block</div>
  <div>block</div>
  <div>block</div>
  <div>block</div>
  <pre>
 pre pr
e</pre
  >
  <textarea>
 pre-wrap pr
e-wrap </textarea
  >
  <span>
    looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog inline
  </span>
  <span> inline </span><span> inline </span> <span> inline </span
  ><span> inline </span>
</with:colon>

Ne plus générer d'erreur sur du HTML mal formé (#7293 par @fisker)

<!-- Input -->
<div><span>
<

<!-- Prettier 1.19 -->
TypeError: Cannot read property 'start' of null

<!-- Prettier 2.0 -->
<div><span> < </span></div>

Correction de l'erreur d'analyse des attributs srcset (#7295 par @fisker)

<!-- Input -->
<img

srcset="
             /media/examples/surfer-240-200.jpg
">

<!-- Prettier 1.19 -->
Error: Mixed descriptor in srcset is not supported

<!-- Prettier 2.0 -->
<img srcset="/media/examples/surfer-240-200.jpg" />

Correction de l'erreur générée par les balises non fermées dans les balises `pre` (#7392 par @fisker)

<!-- Input -->
<pre><br /></pre>
<pre><hr></pre>

<!-- Prettier 1.19 -->
TypeError: Cannot read property 'start' of null

<!-- Prettier 2.0 -->
<pre><br /></pre>
<pre><hr /></pre>

Correction du formatage incohérent des balises auto-fermantes (#7395 par @fisker)

<!-- Input -->
<span><input type="checkbox"/> </span>
<span><span><input type="checkbox"/></span></span>
<span><input type="checkbox"/></span>

<!-- Prettier 1.19 -->
<span><input type="checkbox" /> </span>
<span
  ><span><input type="checkbox"/></span
></span>
<span><input type="checkbox"/></span>

<!-- Prettier 2.0 -->
<span><input type="checkbox" /> </span>
<span
  ><span><input type="checkbox" /></span
></span>
<span><input type="checkbox" /></span>

Correction de l'ajout inattendu de lignes vides après les balises `table` (#7461 par @ikatyang)

<!-- Input -->
<table><tr>
</tr>
</table><div>Should not insert empty line before this div</div>

<!-- Prettier 1.19 -->
<table>
  <tr></tr>
</table>

<div>Should not insert empty line before this div</div>

<!-- Prettier 2.0 -->
<table>
  <tr></tr>
</table>
<div>Should not insert empty line before this div</div>

Formatage de la valeur de l'attribut HTML `class` (#7555 par @fisker)

<!-- Input -->
<div class="  foo
bar baz"></div>
<div class="
another element with so many classes
even can not fit one line
really a lot and lot of classes
"></div>

<!-- Prettier 1.19 -->
<div
  class="  foo
bar baz"
></div>
<div
  class="
another element with so many classes
even can not fit one line
really a lot and lot of classes
"
></div>

<!-- Prettier 2.0 -->
<div class="foo bar baz"></div>
<div
  class="another element with so many classes even can not fit one line really a lot and lot of classes"
></div>

Formatage de la valeur de l'attribut HTML `style` (#7556 par @fisker)

<!-- Input -->
<div style="   color : red;
            display    :inline ">
  </div>
<div style="   color : red;
            display    :inline; height: auto;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0; ">
  </div>

<!-- Prettier 1.19 -->
<div
  style="   color : red;
            display    :inline "
></div>
<div
  style="   color : red;
            display    :inline; height: auto;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0; "
></div>


<!-- Prettier 2.0 -->
<div style="color: red; display: inline;"></div>
<div
  style="
    color: red;
    display: inline;
    height: auto;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  "
></div>

Prise en charge de `` pour le texte (#7654 par @graemeworthy)

Auparavant, cela ne fonctionnait que pour les balises. Utile pour protéger diverses macros et commandes de préprocesseur contre une altération par le formatage.

<!-- Input -->
<!-- prettier-ignore -->
A super long string that has been marked as ignore because it was probably generated by some script.

<!-- Prettier 1.19 -->
<!-- prettier-ignore -->
A super long string that has been marked as ignore because it was probably
generated by some script.

<!-- Prettier 2.0 -->
<!-- prettier-ignore -->
A super long string that has been marked as ignore because it was probably generated by some script.

<!-- Input -->
<!-- prettier-ignore -->
| Dogs | Cats | Weasels | Bats | Pigs | Mice | Hedgehogs | Capybaras | Rats | Tigers |
| ---- | ---- | ------- | ---- | ---- | ---- | --------- | --------- | ---- | ------ |
|    1 |    1 |       0 |    0 |    1 |    1 |         5 |        16 |    4 |      0 |

<!-- Prettier 1.19 -->
<!-- prettier-ignore -->
| Dogs | Cats | Weasels | Bats | Pigs | Mice | Hedgehogs | Capybaras | Rats |
Tigers | | ---- | ---- | ------- | ---- | ---- | ---- | --------- | --------- |
---- | ------ | | 1 | 1 | 0 | 0 | 1 | 1 | 5 | 16 | 4 | 0 |

<!-- Prettier 2.0 -->
<!-- prettier-ignore -->
| Dogs | Cats | Weasels | Bats | Pigs | Mice | Hedgehogs | Capybaras | Rats | Tigers |
| ---- | ---- | ------- | ---- | ---- | ---- | --------- | --------- | ---- | ------ |
|    1 |    1 |       0 |    0 |    1 |    1 |         5 |        16 |    4 |      0 |

Vue

Formatage des composants monofichiers Vue contenant un script JSX (#7180 par @sosukesuzuki)

<!-- Input -->
<script lang="jsx">
export default {
  data: () => ({
    message: 'hello with jsx'
  }),
  render(h) {



    return <div>{this.message}</div>
  }
}
</script>

<!-- Prettier 1.19 -->
<script lang="jsx">
export default {
  data: () => ({
    message: 'hello with jsx'
  }),
  render(h) {



    return <div>{this.message}</div>
  }
}
</script>

<!-- Prettier 2.0 -->
<script lang="jsx">
export default {
  data: () => ({
    message: "hello with jsx"
  }),
  render(h) {
    return <div>{this.message}</div>;
  }
};
</script>

Ne pas imprimer les littéraux de chaîne uniques dans les attributs sur une nouvelle ligne (#7479 par @fisker)

<!-- Input -->
<template>
<MyComponent
  :attr1="`loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong ${template} literal value`"
  :attr2="'loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong string literal value'"/>
</template>

<!-- Prettier 1.19 -->
<template>
  <MyComponent
    :attr1="
      `loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong ${template} literal value`
    "
    :attr2="
      'loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong string literal value'
    "
  />
</template>

<!-- Prettier 2.0 -->
<template>
  <MyComponent
    :attr1="`loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong ${template} literal value`"
    :attr2="'loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong string literal value'"
  />
</template>

Correction de l'indentation des expressions Vue (#7781 par @fisker)

<!-- Input -->
<template>
<MyComponent v-if="
long_long_long_long_long_long_long_condition_1 && long_long_long_long_long_long_long_condition_2 &&
long_long_long_long_long_long_long_condition_3 &&
long_long_long_long_long_long_long_condition_4
"
:attr="
`loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog string 1` +
`loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog string 2`
"
/>
</template>

<!-- Prettier 1.19 -->
<template>
  <MyComponent
    v-if="
      long_long_long_long_long_long_long_condition_1 &&
        long_long_long_long_long_long_long_condition_2 &&
        long_long_long_long_long_long_long_condition_3 &&
        long_long_long_long_long_long_long_condition_4
    "
    :attr="
      `loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog string 1` +
        `loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog string 2`
    "
  />
</template>

<!-- Prettier 2.0 -->
<template>
  <MyComponent
    v-if="
      long_long_long_long_long_long_long_condition_1 &&
      long_long_long_long_long_long_long_condition_2 &&
      long_long_long_long_long_long_long_condition_3 &&
      long_long_long_long_long_long_long_condition_4
    "
    :attr="
      `loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog string 1` +
      `loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog string 2`
    "
  />
</template>

Angular

Support rudimentaire non officiel pour certaines directives les plus utilisées d'AngularJS 1.x (#6869 par @thorn0)

Bien qu'il existe certaines incompatibilités syntaxiques (liaisons uniques et précédence de |) entre les langages d'expression de l'ancien AngularJS et du nouveau Angular, globalement les deux langages sont suffisamment compatibles pour que les projets legacy et hybrides basés sur AngularJS puissent bénéficier de Prettier. Auparavant, lorsque Prettier formatait les templates AngularJS avec le parseur Angular, il ne formatait les expressions que dans les interpolations. Désormais, certaines des directives AngularJS les plus utilisées sont également formatées, à savoir : ng-if, ng-show, ng-hide, ng-class, ng-style.

<!-- Input -->
<div ng-if="$ctrl .shouldShowWarning&&!$ctrl.loading  ">Warning!</div>

<!-- Prettier 1.19 -->
<div ng-if="$ctrl .shouldShowWarning&&!$ctrl.loading  ">Warning!</div>

<!-- Prettier 2.0 -->
<div ng-if="$ctrl.shouldShowWarning && !$ctrl.loading">Warning!</div>

Correction du formatage des attributs i18n (#7371 par @thorn0)

Prettier 1.19 avait ajouté le support du formatage des attributs i18n, mais le placement du guillemet fermant sur une nouvelle ligne cassait les identifiants personnalisés. Ce problème est désormais corrigé.

<!-- Input -->
<div i18n-prop="Special-property|This is a special property with much important information@@MyTextId"
prop="My Text"></div>

<!-- Prettier 1.19 -->
<div
  i18n-prop="
    Special-property|This is a special property with much important
    information@@MyTextId
  "
  prop="My Text"
></div>

<!-- Prettier 2.0 -->
<div
  i18n-prop="
    Special-property|This is a special property with much important
    information@@MyTextId"
  prop="My Text"
></div>

Handlebars (alpha)

Correction des sauts de ligne superflus dans `ConcatStatement` (#7051 par @dcyriller)

{{!-- Input --}}
<a href="a-very-long-href-from-a-third-party-marketing-platform{{id}}longer-than-eighty-chars">Link</a>

{{!-- Prettier 1.19 --}}
<a
  href="a-very-long-href-from-a-third-party-marketing-platform
    {{id}}
    longer-than-eighty-chars"
>
  Link
</a>

{{!-- Prettier 2.0 --}}
<a
  href="a-very-long-href-from-a-third-party-marketing-platform{{id}}longer-than-eighty-chars"
>
  Link
</a>

{{!-- Input --}}
<div class="hello {{if goodbye true}} {{if goodbye false}} {{if goodbye true}} {{if goodbye false}} {{if goodbye true}}">
  Hello
</div>

{{!-- Prettier 1.19 --}}
<div
  class="hello
    {{if goodbye true}}

    {{if goodbye false}}

    {{if goodbye true}}

    {{if goodbye false}}

    {{if goodbye true}}"
>
  Hello
</div>

{{!-- Prettier 2.0 --}}
<div
  class="hello {{if goodbye true}} {{if goodbye false}} {{if goodbye true}} {{if
      goodbye
      false
    }} {{if goodbye true}}"
>
  Hello
</div>

Correction d'un problème de mustache tombante (#7052 par @dcyriller)

{{!-- Input --}}
<GlimmerComponent @progress={{aPropertyEndingAfterEightiethColumnToHighlightAWeirdClosingParenIssue}} />

{{!-- Prettier 1.19 --}}
<GlimmerComponent
  @progress={{aPropertyEndingAfterEightiethColumnToHighlightAWeirdClosingParenIssue
  }}
/>

{{!-- Prettier 2.0 --}}
<GlimmerComponent
  @progress={{aPropertyEndingAfterEightiethColumnToHighlightAWeirdClosingParenIssue}}
/>

Amélioration de l'impression des `MustacheStatement` (#7157 par @dcyriller)

{{!-- Input --}}
<p>Hi here is your name, as it will be displayed  {{firstName}}  {{lastName}}   , welcome!</p>

{{!-- Prettier 1.19 --}}
<p>
  Hi here is your name, as it will be displayed {{firstName}} {{lastName
  }} , welcome!
</p>

{{!-- Prettier 2.0 --}}
<p>
  Hi here is your name, as it will be displayed {{firstName}} {{
    lastName
  }} , welcome!
</p>

Ajout du support pour `prettier-ignore` (#7275 par @chadian)

{{! Input }}
{{! prettier-ignore }}
<div>
  "hello! my parent was ignored"
  {{#my-crazy-component     "shall"     be="preserved"}}
    <This

      is="preserved"
    />
  {{/my-crazy-component}}
</div>

{{#a-normal-component    isRestoredTo   = "order"    }}
  <ThisWillBeNormal backTo    =   "normal" />
{{/a-normal-component}}

{{! Prettier 1.19 }}
{{! prettier-ignore }}
<div>
  "hello! my parent was ignored"
  {{#my-crazy-component "shall" be="preserved"}}
    <This is="preserved" />
  {{/my-crazy-component}}
</div>

{{#a-normal-component isRestoredTo="order"}}
  <ThisWillBeNormal backTo="normal" />
{{/a-normal-component}}

{{! Prettier 2.0 }}
{{! prettier-ignore }}
<div>
  "hello! my parent was ignored"
  {{#my-crazy-component     "shall"     be="preserved"}}
    <This

      is="preserved"
    />
  {{/my-crazy-component}}
</div>

{{#a-normal-component isRestoredTo='order'}}
  <ThisWillBeNormal backTo='normal' />
{{/a-normal-component}}

Support de l'impression de Handlebars en ligne dans du HTML (#7306 par @dcyriller)

<!-- Input -->
<script type="text/x-handlebars-template">
  {{component arg1='hey' arg2=(helper this.arg7 this.arg4) arg3=anotherone arg6=this.arg8}}
</script>

<!-- Prettier 1.19 -->
<script type="text/x-handlebars-template">
  {{component arg1='hey' arg2=(helper this.arg7 this.arg4) arg3=anotherone arg6=this.arg8}}
</script>

<!-- Prettier 2.0 -->
<script type="text/x-handlebars-template">
  {{component
    arg1='hey'
    arg2=(helper this.arg7 this.arg4)
    arg3=anotherone
    arg6=this.arg8
  }}
</script>

Correction de la valeur supprimée de AttrNode (#7552 par @bantic)

{{!-- Input --}}
<ul class="abc
       def">
</ul>

{{!-- Prettier 1.19 --}}
<ul class></ul>

{{!-- Prettier 2.0 --}}
<ul class="abc
       def">
</ul>

Préservation des caractères de contrôle d'espace blanc (#7575 par @mahirshah)

{{!-- Input --}}
{{~#if bar}}
  if1
{{~else~}}
  else
{{~/if~}}

{{!-- Prettier 1.19 --}}
{{#if bar}}
  if1
{{else}}
  else
{{/if}}

{{!-- Prettier 2.0 --}}
{{~#if bar}}
  if1
{{~else~}}
  else
{{~/if~}}

GraphQL

Amélioration de la détection du séparateur entre les interfaces (#7305 par @fisker)

Bien que l'utilisation d'une virgule pour séparer plusieurs interfaces implémentées soit une syntaxe dépréciée, afin de supporter les cas d'usage legacy, Prettier conserve le séparateur d'origine et ne remplace pas volontairement les virgules par des esperluettes. Cependant, cette logique contenait précédemment un bug, ce qui pouvait entraîner l'utilisation d'un mauvais séparateur en sortie. Ce problème est désormais corrigé.

# Input
type Type1 implements A, B
# { &  <-- Removing this comment changes the separator in 1.19
{a: a}

type Type2 implements A, B & C{a: a}

# Prettier 1.19
type Type1 implements A & B {
  # { &  <-- Removing this comment changes the separator in 1.19
  a: a
}

type Type2 implements A & B & C {
  a: a
}

# Prettier 2.0
type Type1 implements A, B {
  # { &  <-- Removing this comment changes the separator in 1.19
  a: a
}

type Type2 implements A, B & C {
  a: a
}

Markdown

Gestion correcte des listes indexées à zéro (#6852 par @evilebottnawi)

<!-- Input -->
List
List
List

<!-- Prettier 1.19 -->
List
List
List

<!-- Prettier 2.0 -->
List
List
List

Correction du formatage HTML cassé lorsque la balise ouvrante débute après un élément de liste (#7181 et #7220 par @sasurau4)

Auparavant, lorsque Prettier formatait une balise HTML placée juste après un élément de liste, il ajoutait une indentation et brisait la relation entre les balises ouvrantes et fermantes. Désormais, Prettier ne modifie plus rien.

<!-- Input -->
- A list item.
<details><summary>Summary</summary>
<p>

- A list item.

</p>
</details>

- A list item
  <blockquote>asdf</blockquote>

<!-- Prettier 1.19 -->
- A list item.

  <details><summary>Summary</summary>
  <p>

- A list item.

</p>
</details>

- A list item
  <blockquote>asdf</blockquote>

<!-- Prettier 2.0 -->
- A list item.
<details><summary>Summary</summary>
<p>

- A list item.

</p>
</details>

- A list item
  <blockquote>asdf</blockquote>

Correction du formatage des notes de bas de page multilignes (#7203 par @sasurau4)

<!-- Input -->
Here's a statement[^footnote].

[^footnote]:
    Here's a multi-line footnote walking back the above statement, and showing
    how it's all totally bollocks.

<!-- Prettier 1.19 -->
Here's a statement[^footnote].

[^footnote]:

  Here's a multi-line footnote walking back the above statement, and showing
  how it's all totally bollocks.

<!-- Prettier 2.0 -->
Here's a statement[^footnote].

[^footnote]:
  Here's a multi-line footnote walking back the above statement, and showing
  how it's all totally bollocks.

MDX

Ajout du support des fragments JSX (#6398 par @JounQin)

<!-- Input -->
<>
    test   <World        />   test
</>       123

<!-- Prettier 1.19 -->
<>
test <World        /> test
</> 123

<!-- Prettier 2.0 -->
<>
  test <World /> test
</> 123

Correction des bugs d'analyse JSX introduits dans Prettier 1.19 (#6949 par @Tigge & @thorn0)

L'analyse MDX pour JSX échouait avec les éléments JSX non analysables comme HTML, tels que <Tag value={{a: 'b'}}>test</Tag>

<!-- Input -->

<Tag  value={ {a :  'b'   } }>test</ Tag>

<Foo bg={ 'red' } >
   <div  style={{   display:   'block'}   }>
      <Bar    >hi    </Bar>
       {  hello       }
         {     /* another comment */}
            </div>
</Foo>

<!-- Prettier 1.19 -->

SyntaxError: Unexpected closing tag "Tag". It may happen when the tag has already been closed by another tag. For more info see https://www.w3.org/TR/html5/syntax.html#closing-elements-that-have-implied-end-tags (1:35)
> 1 | <Tag  value={ {a :  'b'   } }>test</ Tag>

<!-- Prettier 2.0 -->

<Tag value={{ a: "b" }}>test</Tag>

<Foo bg={"red"}>
  <div style={{ display: "block" }}>
    <Bar>hi </Bar>
    {hello}
    {/* another comment */}
  </div>
</Foo>

CLI

Support des extensions de fichier `.cjs` et `.yaml.sed` (#7210 par @sosukesuzuki)

# Prettier 1.19
$ prettier test.cjs
test.cjs[error] No parser could be inferred for file: test.cjs

# Prettier 2.0
$ prettier test.cjs
"use strict";
console.log("Hello, World!");

Respect de `--ignore-path` lorsque Prettier s'exécute depuis un sous-répertoire (#7588 par @heylookltsme)

Le nom de fichier utilisé pour filtrer les fichiers ignorés est désormais relatif au chemin --ignore-path (si présent), plutôt qu'au répertoire de travail courant.

Suppression de `--stdin` (#7668 par @thorn0)

Cette option CLI, jamais correctement documentée, était censée faire lire l'entrée standard par Prettier, ce qu'il fait déjà par défaut sans chemins de fichiers. L'option était donc redondante. Après sa suppression, son utilisation déclenche un avertissement "Ignored unknown option". Celui-ci n'empêche pas l'exécution normale de la commande et n'affecte pas le code de sortie.

Principales fonctionnalités​

JavaScript​

Amélioration de l'heuristique de rupture des chaînes de méthodes (#6685 par @mmkal)​

Correction définitive pour les casts de type Closure (#7791 par @thorn0, #7011 par @evilebottnawi)​

TypeScript​

TypeScript 3.8 (#7631 par @thorn0, #7764 par @sosukesuzuki, #7804 par @sosukesuzuki)​

CLI​

Vérifier si les globs passés sont des noms de fichiers existants avant de les traiter comme des globs (#7587 par @fisker)​

Développer les répertoires, y compris . (#7660 par @thorn0)​

Changements cassants​

API​

Correction du filtrage par motif des surcharges de configuration pour inclure les fichiers pointés (#5813 par @chrisblossom)​

Abandon de la prise en charge des versions de Node antérieures à 10 (#6908 par @fisker)​

Changement de la valeur par défaut pour trailingComma à es5 (#6963 par @fisker)​

API de plugin : changements dans prettier.util (#6993 par @fisker)​

Changement de la valeur par défaut de arrowParens à always (#7430 par @kachkaev)​

Changement de la valeur par défaut de endOfLine à lf (#7435 par @kachkaev)​

Mise en cache des résultats de recherche des plugins (#7485 par @fisker)​

Suppression des options et valeurs d'option dépréciées (#6993, #7511, #7533, #7535, #7536 par @fisker)​

Suppression du paramètre version de prettier.getSupportInfo (#7620 par @thorn0)​

Autres changements​

JavaScript​

Toujours ajouter un espace après le mot-clé function (#3903 par @j-f1, @josephfrazier, @sosukesuzuki, @thorn0; #7516 par @bakkot)​

Corriger le formatage instable des instructions étiquetées avec commentaires (#6984 par @clement26695)​

Corriger le formatage des expressions logiques, binaires et séquentielles dans les littéraux de gabarit (#7010 par @evilebottnawi)​

Corriger le formatage instable des expressions logiques (#7026 par @thorn0)​

Formater throw comme return (#7070 par @sosukesuzuki)​

Corriger l'indentation dans les ternaires imbriqués dans les conditions d'autres ternaires (#7087 par @thorn0)​

Ajuster la logique de composition des fonctions pour les décorateurs (#7138 par @brainkim)​

Corriger le placement du point-virgule dans les instructions return vides avec commentaire (#7140 par @sosukesuzuki)​

Respecter la signification des espaces dans les littéraux de gabarit HTML (#7208 par @saschanaz)​

Supprimer les parenthèses inutiles lors du rendu de JSX avec yield (#7367 par @cola119)​

Conserver les parenthèses autour des expressions virgules dans les déclarations d'exportation par défaut (#7491 par @fisker)​

Correction des cas limites avec les parenthèses autour du chaînage optionnel (#7500 par @thorn0)​

Ne pas mettre undefined entre parenthèses dans les expressions conditionnelles au sein de JSX (#7504 par @fisker)​

Maintenir la position des commentaires pour les assignations/variables (#7709 par @sosukesuzuki)​

TypeScript​

Babel comme analyseur alternatif pour TypeScript (#6400 par @JounQin et @thorn0)​

Correction du formatage des types complexes dans les annotations de type de retour des fonctions fléchées (#6901 par @sosukesuzuki)​

Afficher les types JSDoc tels quels au lieu de générer des erreurs (#7020 par @thorn0)​

Ne pas imprimer de virgules supplémentaires après les éléments rest dans les tuples (#7075 par @thorn0)​

Correction de l'indentation des fonctions fléchées dans les déclarations de variables suivies de commentaires (#7094 par @sosukesuzuki)​

Correction de l'impression des commentaires dans les types de fonction (#7104 par @thorn0)​

Correction du formatage des commentaires pour les nœuds de type fonction (#7144 par @armano2)​

Correction de l'impression des types mappés avec omission du type template (#7221 par @cola119)​

Correction des cas limites d'impression des signatures d'index (#7228 par @cola119)​

Correction de l'impression des commentaires dans les paramètres de type vides (#7729 par @sosukesuzuki)​

Flow​

Ajout de la prise en charge de symbol (#7472 par @fisker)​

Ajout de la prise en charge des décorateurs (#7482 par @fisker)​

Correction des déclarations de champs de classe privés (#7484 par @fisker)​

CSS​

Ne pas mettre en minuscules les noms d'éléments dans les sélecteurs CSS (#6947 par @ark120202)​

SCSS​

Ne pas ajouter de virgule supplémentaire après le dernier commentaire dans une map (#6918 par @fisker)​

Correction de l'espacement dans la concaténation SCSS (#7211 par @sasurau4)​

Less​

Correction de plusieurs problèmes persistants par mise à jour de postcss-less (#6981 par @fisker, #7021 par @evilebottnawi, @thorn0)​

HTML​

Les commentaires dans les balises pre provoquaient un mauvais formatage de la balise fermante suivante (#5959 par @selvazhagan)​

Ne plus traiter les deux-points comme délimiteurs de préfixe de namespace dans les noms de balises (#7273 par @fisker)​

Ne plus générer d'erreur sur du HTML mal formé (#7293 par @fisker)​

Correction de l'erreur d'analyse des attributs srcset (#7295 par @fisker)​

Correction de l'erreur générée par les balises non fermées dans les balises pre (#7392 par @fisker)​

Correction du formatage incohérent des balises auto-fermantes (#7395 par @fisker)​

Correction de l'ajout inattendu de lignes vides après les balises table (#7461 par @ikatyang)​

Formatage de la valeur de l'attribut HTML class (#7555 par @fisker)​

Formatage de la valeur de l'attribut HTML style (#7556 par @fisker)​

Prise en charge de  pour le texte (#7654 par @graemeworthy)​

Vue​

Formatage des composants monofichiers Vue contenant un script JSX (#7180 par @sosukesuzuki)​

Ne pas imprimer les littéraux de chaîne uniques dans les attributs sur une nouvelle ligne (#7479 par @fisker)​

Correction de l'indentation des expressions Vue (#7781 par @fisker)​

Angular​

Support rudimentaire non officiel pour certaines directives les plus utilisées d'AngularJS 1.x (#6869 par @thorn0)​

Correction du formatage des attributs i18n (#7371 par @thorn0)​

Handlebars (alpha)​

Correction des sauts de ligne superflus dans ConcatStatement (#7051 par @dcyriller)​

Correction d'un problème de mustache tombante (#7052 par @dcyriller)​

Amélioration de l'impression des MustacheStatement (#7157 par @dcyriller)​

Principales fonctionnalités

JavaScript

Amélioration de l'heuristique de rupture des chaînes de méthodes (#6685 par @mmkal)

Correction définitive pour les casts de type Closure (#7791 par @thorn0, #7011 par @evilebottnawi)

TypeScript

TypeScript 3.8 (#7631 par @thorn0, #7764 par @sosukesuzuki, #7804 par @sosukesuzuki)

CLI

Vérifier si les globs passés sont des noms de fichiers existants avant de les traiter comme des globs (#7587 par @fisker)

Développer les répertoires, y compris `.` (#7660 par @thorn0)

Changements cassants

API

Correction du filtrage par motif des surcharges de configuration pour inclure les fichiers pointés (#5813 par @chrisblossom)

Abandon de la prise en charge des versions de Node antérieures à 10 (#6908 par @fisker)

Changement de la valeur par défaut pour `trailingComma` à `es5` (#6963 par @fisker)

API de plugin : changements dans `prettier.util` (#6993 par @fisker)

Changement de la valeur par défaut de `arrowParens` à `always` (#7430 par @kachkaev)

Changement de la valeur par défaut de `endOfLine` à `lf` (#7435 par @kachkaev)

Mise en cache des résultats de recherche des plugins (#7485 par @fisker)

Suppression des options et valeurs d'option dépréciées (#6993, #7511, #7533, #7535, #7536 par @fisker)

Suppression du paramètre `version` de `prettier.getSupportInfo` (#7620 par @thorn0)

Autres changements

JavaScript

Toujours ajouter un espace après le mot-clé `function` (#3903 par @j-f1, @josephfrazier, @sosukesuzuki, @thorn0; #7516 par @bakkot)

Corriger le formatage instable des instructions étiquetées avec commentaires (#6984 par @clement26695)

Corriger le formatage des expressions logiques, binaires et séquentielles dans les littéraux de gabarit (#7010 par @evilebottnawi)

Corriger le formatage instable des expressions logiques (#7026 par @thorn0)

Formater `throw` comme `return` (#7070 par @sosukesuzuki)

Corriger l'indentation dans les ternaires imbriqués dans les conditions d'autres ternaires (#7087 par @thorn0)

Ajuster la logique de composition des fonctions pour les décorateurs (#7138 par @brainkim)

Corriger le placement du point-virgule dans les instructions `return` vides avec commentaire (#7140 par @sosukesuzuki)

Respecter la signification des espaces dans les littéraux de gabarit HTML (#7208 par @saschanaz)

Supprimer les parenthèses inutiles lors du rendu de JSX avec yield (#7367 par @cola119)

Conserver les parenthèses autour des expressions virgules dans les déclarations d'exportation par défaut (#7491 par @fisker)

Correction des cas limites avec les parenthèses autour du chaînage optionnel (#7500 par @thorn0)

Ne pas mettre `undefined` entre parenthèses dans les expressions conditionnelles au sein de JSX (#7504 par @fisker)

Maintenir la position des commentaires pour les assignations/variables (#7709 par @sosukesuzuki)

TypeScript

Babel comme analyseur alternatif pour TypeScript (#6400 par @JounQin et @thorn0)

Correction du formatage des types complexes dans les annotations de type de retour des fonctions fléchées (#6901 par @sosukesuzuki)

Afficher les types JSDoc tels quels au lieu de générer des erreurs (#7020 par @thorn0)

Ne pas imprimer de virgules supplémentaires après les éléments rest dans les tuples (#7075 par @thorn0)

Correction de l'indentation des fonctions fléchées dans les déclarations de variables suivies de commentaires (#7094 par @sosukesuzuki)

Correction de l'impression des commentaires dans les types de fonction (#7104 par @thorn0)

Correction du formatage des commentaires pour les nœuds de type fonction (#7144 par @armano2)

Correction de l'impression des types mappés avec omission du type template (#7221 par @cola119)

Correction des cas limites d'impression des signatures d'index (#7228 par @cola119)

Correction de l'impression des commentaires dans les paramètres de type vides (#7729 par @sosukesuzuki)

Flow

Ajout de la prise en charge de `symbol` (#7472 par @fisker)

Ajout de la prise en charge des décorateurs (#7482 par @fisker)

Correction des déclarations de champs de classe privés (#7484 par @fisker)

CSS

Ne pas mettre en minuscules les noms d'éléments dans les sélecteurs CSS (#6947 par @ark120202)

SCSS

Ne pas ajouter de virgule supplémentaire après le dernier commentaire dans une map (#6918 par @fisker)

Correction de l'espacement dans la concaténation SCSS (#7211 par @sasurau4)

Less

Correction de plusieurs problèmes persistants par mise à jour de `postcss-less` (#6981 par @fisker, #7021 par @evilebottnawi, @thorn0)

HTML

Les commentaires dans les balises `pre` provoquaient un mauvais formatage de la balise fermante suivante (#5959 par @selvazhagan)

Ne plus traiter les deux-points comme délimiteurs de préfixe de namespace dans les noms de balises (#7273 par @fisker)

Ne plus générer d'erreur sur du HTML mal formé (#7293 par @fisker)

Correction de l'erreur d'analyse des attributs srcset (#7295 par @fisker)

Correction de l'erreur générée par les balises non fermées dans les balises `pre` (#7392 par @fisker)

Correction du formatage incohérent des balises auto-fermantes (#7395 par @fisker)

Correction de l'ajout inattendu de lignes vides après les balises `table` (#7461 par @ikatyang)

Formatage de la valeur de l'attribut HTML `class` (#7555 par @fisker)

Formatage de la valeur de l'attribut HTML `style` (#7556 par @fisker)

Prise en charge de `` pour le texte (#7654 par @graemeworthy)

Vue

Formatage des composants monofichiers Vue contenant un script JSX (#7180 par @sosukesuzuki)

Ne pas imprimer les littéraux de chaîne uniques dans les attributs sur une nouvelle ligne (#7479 par @fisker)

Correction de l'indentation des expressions Vue (#7781 par @fisker)

Angular

Support rudimentaire non officiel pour certaines directives les plus utilisées d'AngularJS 1.x (#6869 par @thorn0)

Correction du formatage des attributs i18n (#7371 par @thorn0)

Handlebars (alpha)

Correction des sauts de ligne superflus dans `ConcatStatement` (#7051 par @dcyriller)

Correction d'un problème de mustache tombante (#7052 par @dcyriller)

Amélioration de l'impression des `MustacheStatement` (#7157 par @dcyriller)