Aller au contenu principal

Prettier 1.19 : Option Vue tant attendue, TypeScript 3.7 et nouvelles fonctionnalités JavaScript

· 27 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 →

Cette version introduit l'option tant attendue --vue-indent-script-and-style, le support de TypeScript 3.7 et de nouvelles syntaxes JavaScript de pointe. Sans oublier un grand nombre de corrections de bugs et d'améliorations !

Principales fonctionnalités

Vue

Ajout de --vue-indent-script-and-style (#6157 par @kamilic)

La nouvelle option --vue-indent-script-and-style contrôle si le code à l'intérieur des balises <script> et <style> dans les fichiers Vue doit être indenté ou non. Certains développeurs (comme le créateur de Vue) évitent l'indentation pour gagner un niveau, mais cela peut perturber le repli de code dans votre éditeur. Cela résout notre issue la plus commentée à ce jour, et devrait améliorer l'expérience d'édition de nombreux développeurs Vue !

TypeScript

Support de TypeScript 3.7 (#6657 par @cryrivers)

Prettier 1.19 ajoute le support des fonctionnalités de TypeScript 3.7 qui introduisent de nouvelles syntaxes :

(Note : Une mise à jour de dépendance pour TypeScript 3.7 a entraîné l'abandon du support de Node.js 6 pour les installations directes depuis GitHub. Prettier installé via npm reste compatible avec Node.js 4.)

Chaînage optionnel
// Input
const longChain = obj?.a?.b?.c?.d?.e?.f?.g;
const longChainCallExpression = obj.a?.(a,b,c).b?.(a,b,c).c?.(a,b,c).d?.(a,b,c).e?.(a,b,c).f?.(a,b,c)

// Prettier 1.19
const longChain = obj?.a?.b?.c?.d?.e?.f?.g;
const longChainCallExpression = obj
.a?.(a, b, c)
.b?.(a, b, c)
.c?.(a, b, c)
.d?.(a, b, c)
.e?.(a, b, c)
.f?.(a, b, c);
Coalescence des nuls
// Input
const cond = null;
const result = cond??'a';
const longChain = cond??cond??cond??'b';

// Prettier 1.19
const cond = null;
const result = cond ?? "a";
const longChain = cond ?? cond ?? cond ?? "b";
Fonctions d'assertion
// Input
function assertsString(x: any): asserts x {console.assert(typeof x === 'string');}
function assertsStringWithGuard(x: any): asserts x is string {console.assert(typeof x === 'string');}

// Prettier 1.19
function assertsString(x: any): asserts x {
console.assert(typeof x === "string");
}
function assertsStringWithGuard(x: any): asserts x is string {
console.assert(typeof x === "string");
}
Modificateur declare sur les champs de classe
// Input
class B {p: number;}
class C extends B {declare p: 256 | 1000;}

// Prettier 1.19
class B {
p: number;
}
class C extends B {
declare p: 256 | 1000;
}

JavaScript

Ajout du support pour la syntaxe d'application partielle (#6397 par @JounQin)

// Input
const addOne = add(1, ?); // apply from the left
addOne(2); // 3

const addTen = add(?, 10); // apply from the right
addTen(2); // 12

// with pipeline
let newScore = player.score
|> add(7, ?)
|> clamp(0, 100, ?); // shallow stack, the pipe to `clamp` is the same frame as the pipe to `add`.

// Prettier 1.18
SyntaxError: Unexpected token (1:23)
> 1 | const addOne = add(1, ?); // apply from the left
| ^
2 | addOne(2); // 3
3 |
4 | const addTen = add(?, 10); // apply from the right

// Prettier 1.19
const addOne = add(1, ?); // apply from the left
addOne(2); // 3

const addTen = add(?, 10); // apply from the right
addTen(2); // 12

// with pipeline
let newScore = player.score |> add(7, ?) |> clamp(0, 100, ?); // shallow stack, the pipe to \`clamp\` is the same frame as the pipe to \`add\`.

Utilisation de littéraux fonctionnels dans les arguments pour détecter la composition de fonctions (#6033 par @brainkim)

Auparavant, nous utilisions un ensemble de noms prédéfinis liés à la programmation fonctionnelle (compose, flow, pipe, etc.) pour détecter les schémas de composition et d'enchaînement de fonctions dans le code. Cela permettait d'éviter que Prettier ne place sur une même ligne des appels comme celui-ci à pipe, même s'ils tenaient dans la limite de colonnes autorisée :

source$
.pipe(
filter(x => x % 2 === 0),
map(x => x + x),
scan((acc, x) => acc + x, 0),
)
.subscribe(x => console.log(x));

Cependant, cette heuristique a provoqué des plaintes en raison de faux positifs : les appels à des fonctions ou méthodes correspondant aux noms prédéfinis étaient toujours répartis sur plusieurs lignes, même sans arguments fonctionnels (#5769, #5969). Pour beaucoup, cette décision systématique de scinder les fonctions basée sur leur nom était à la fois surprenante et sous-optimale.

Nous utilisons désormais une heuristique affinée qui détecte la composition de fonctions via la présence de littéraux fonctionnels. Cette approche préserve le comportement de saut de ligne précédent tout en éliminant la plupart (voire la totalité) des faux positifs causés par l'ancienne méthode.

Testez cette fonctionnalité et n'hésitez pas à nous faire part de vos retours !

// Input
eventStore.update(id, _.flow(updater, incrementVersion));

// Prettier 1.18
eventStore.update(
id,
_.flow(
updater,
incrementVersion
)
);

// Prettier 1.19
eventStore.update(id, _.flow(updater, incrementVersion));

Activation du formatage même en cas d'erreurs d'analyse dans certains cas (#6816 par @thorn0 et l'équipe Babel)

Nous avons mis à jour le parseur Babel vers sa dernière version et obtenu gratuitement une fonctionnalité géniale. Prettier peut désormais formater votre code même s'il est invalide dans certains cas, ce qui devrait fluidifier votre expérience de développement. Cela s'améliorera avec le temps grâce aux progrès de Babel dans le mode de récupération d'erreurs de parsing. En savoir plus dans l'article de blog Babel 7.7.0 !

// Input
let a = {
__proto__ : x,
__proto__ : y
}
let a = 2

// Prettier 1.18
SyntaxError: Redefinition of __proto__ property (3:3)
1 | let a = {
2 | __proto__ : x,
> 3 | __proto__ : y
| ^
4 | }
5 | let a = 2

// Prettier 1.19
let a = {
__proto__: x,
__proto__: y
};
let a = 2;

Autres changements

TypeScript

Correction des champs et méthodes de classe calculés optionnels (#6657 par @cryrivers, #6673 par @thorn0)

Cela reste cassé si la clé est une expression complexe, mais ces cas ont été corrigés :

// Input
class Foo {
[bar]?: number;
protected [s]?() {}
}

// Prettier 1.18
class Foo {
[bar]: number;
protected [s?]() {};
}

// Prettier 1.19
class Foo {
[bar]?: number;
protected [s]?() {}
}

Les commentaires après les noms d'éléments JSX avec arguments de type étaient perdus (#6209 par @duailibe)

// Input
const comp = (
<Foo<number>
// This comment goes missing
value={4}
>
Test
</Foo>
);

// Prettier 1.18
const comp = <Foo<number> value={4}>Test</Foo>;

// Prettier 1.19
const comp = (
<Foo<number>
// This comment goes missing
value={4}
>
Test
</Foo>
);

Correction des plantages lors de l'utilisation de // dans les textes JSX (#6289 par @duailibe)

Cette version met à jour le parseur TypeScript pour gérer correctement les textes JSX contenant des doubles barres obliques (//). Dans les versions précédentes, cela faisait planter Prettier.

Formatage correct des types mappés longs sur une seule ligne en une passe (#6420 par @sosukesuzuki)

Auparavant, quand Prettier formatait des types mappés longs sur une seule ligne, il cassait la ligne mais n'ajoutait pas de point-virgule avant la deuxième exécution, ce qui violait la règle d'idempotence de Prettier. Désormais, Prettier ajoute le point-virgule dès la première exécution.

// Input
type FooBar<T> = { [P in keyof T]: T[P] extends Something ? Something<T[P]> : T[P] }

// Prettier 1.18
type FooBar<T> = {
[P in keyof T]: T[P] extends Something ? Something<T[P]> : T[P]
};

// Prettier 1.19
type FooBar<T> = {
[P in keyof T]: T[P] extends Something ? Something<T[P]> : T[P];
};

Conservation des paramètres de type en ligne pour les annotations de type dans les déclarations de variables (#6467 par @sosukesuzuki)

// Input
const fooooooooooooooo: SomeThing<boolean> = looooooooooooooooooooooooooooooongNameFunc();

// Prettier 1.18
const fooooooooooooooo: SomeThing<
boolean
> = looooooooooooooooooooooooooooooongNameFunc();

// Prettier 1.19
const fooooooooooooooo: SomeThing<boolean> = looooooooooooooooooooooooooooooongNameFunc();

Suppression incorrecte occasionnelle de doubles parenthèses autour des types (#6604 par @sosukesuzuki)

// Input
type A = 0 extends ((1 extends 2 ? 3 : 4)) ? 5 : 6;
type B = ((0 extends 1 ? 2 : 3)) extends 4 ? 5 : 6;
type C = ((number | string))["toString"];
type D = ((keyof T1))["foo"];

// Prettier 1.18
type A = 0 extends 1 extends 2 ? 3 : 4 ? 5 : 6;
type B = 0 extends 1 ? 2 : 3 extends 4 ? 5 : 6;
type C = number | string["toString"];
type D = keyof T1["foo"];

// Prettier 1.19
type A = 0 extends (1 extends 2 ? 3 : 4) ? 5 : 6;
type B = (0 extends 1 ? 2 : 3) extends 4 ? 5 : 6;
type C = (number | string)["toString"];
type D = (keyof T1)["foo"];

Conservation des parenthèses autour du JSX lorsque nécessaire pour éviter des erreurs de syntaxe (#6640 par @sosukesuzuki)

// Input
(<a />).toString();

// Prettier 1.18
<a />.toString():

// Prettier 1.19
(<a />).toString();

Conservation du point-virgule pour une propriété de classe avant une signature d'index avec l'option no-semi activée (#6728 par @sosukesuzuki)

Tenter de reformater la sortie de Prettier pouvait auparavant provoquer une erreur de syntaxe.

// Input
export class User {
id: number = 2;
[key: string]: any
}

// Prettier 1.18
export class User {
id: number = 2
[key: string]: any
}

// Prettier 1.19
export class User {
id: number = 2;
[key: string]: any
}

Amélioration de l'expansion des arguments avec les expressions de type as (#6471 par @mattleff)

Auparavant, quand Prettier formatait une expression d'appel contenant une expression de type as ou une assertion de type, il cassait la ligne. Désormais, Prettier utilise l'expression contenue par le type as ou l'assertion de type pour déterminer les sauts de ligne.

// Input
const bar = [1,2,3].reduce((carry, value) => {
return [...carry, value];
}, ([] as unknown) as number[]);

// Prettier 1.18
const bar = [1, 2, 3].reduce(
(carry, value) => {
return [...carry, value];
},
([] as unknown) as number[]
);

// Prettier 1.19
const bar = [1,2,3].reduce((carry, value) => {
return [...carry, value];
}, ([] as unknown) as number[]);

TypeScript/Flow

Correction de l'indentation pour les types union dans les tuples (#6381 par @squidfunk, #6605 par @thorn0)

// Input
type A = [
| AAAAAAAAAAAAAAAAAAAAAA
| BBBBBBBBBBBBBBBBBBBBBB
| CCCCCCCCCCCCCCCCCCCCCC
| DDDDDDDDDDDDDDDDDDDDDD
]

type B = [
| AAAAAAAAAAAAAAAAAAAAAA
| BBBBBBBBBBBBBBBBBBBBBB
| CCCCCCCCCCCCCCCCCCCCCC
| DDDDDDDDDDDDDDDDDDDDDD,
| AAAAAAAAAAAAAAAAAAAAAA
| BBBBBBBBBBBBBBBBBBBBBB
| CCCCCCCCCCCCCCCCCCCCCC
| DDDDDDDDDDDDDDDDDDDDDD
]

type C = [
| [AAAAAAAAAAAAAAAAAAAAAA | BBBBBBBBBBBBBBBBBBBBBB | CCCCCCCCCCCCCCCCCCCCCC | DDDDDDDDDDDDDDDDDDDDDD]
| [AAAAAAAAAAAAAAAAAAAAAA | BBBBBBBBBBBBBBBBBBBBBB | CCCCCCCCCCCCCCCCCCCCCC | DDDDDDDDDDDDDDDDDDDDDD]
]

// Prettier 1.18
type A = [

| AAAAAAAAAAAAAAAAAAAAAA
| BBBBBBBBBBBBBBBBBBBBBB
| CCCCCCCCCCCCCCCCCCCCCC
| DDDDDDDDDDDDDDDDDDDDDD
];

type B = [

| AAAAAAAAAAAAAAAAAAAAAA
| BBBBBBBBBBBBBBBBBBBBBB
| CCCCCCCCCCCCCCCCCCCCCC
| DDDDDDDDDDDDDDDDDDDDDD,

| AAAAAAAAAAAAAAAAAAAAAA
| BBBBBBBBBBBBBBBBBBBBBB
| CCCCCCCCCCCCCCCCCCCCCC
| DDDDDDDDDDDDDDDDDDDDDD
];

type C = [

| [

| AAAAAAAAAAAAAAAAAAAAAA
| BBBBBBBBBBBBBBBBBBBBBB
| CCCCCCCCCCCCCCCCCCCCCC
| DDDDDDDDDDDDDDDDDDDDDD
]
| [

| AAAAAAAAAAAAAAAAAAAAAA
| BBBBBBBBBBBBBBBBBBBBBB
| CCCCCCCCCCCCCCCCCCCCCC
| DDDDDDDDDDDDDDDDDDDDDD
]
];

// Prettier 1.19
type A = [
| AAAAAAAAAAAAAAAAAAAAAA
| BBBBBBBBBBBBBBBBBBBBBB
| CCCCCCCCCCCCCCCCCCCCCC
| DDDDDDDDDDDDDDDDDDDDDD
];

type B = [
(
| AAAAAAAAAAAAAAAAAAAAAA
| BBBBBBBBBBBBBBBBBBBBBB
| CCCCCCCCCCCCCCCCCCCCCC
| DDDDDDDDDDDDDDDDDDDDDD
),
(
| AAAAAAAAAAAAAAAAAAAAAA
| BBBBBBBBBBBBBBBBBBBBBB
| CCCCCCCCCCCCCCCCCCCCCC
| DDDDDDDDDDDDDDDDDDDDDD
)
];

type C = [
| [
| AAAAAAAAAAAAAAAAAAAAAA
| BBBBBBBBBBBBBBBBBBBBBB
| CCCCCCCCCCCCCCCCCCCCCC
| DDDDDDDDDDDDDDDDDDDDDD
]
| [
| AAAAAAAAAAAAAAAAAAAAAA
| BBBBBBBBBBBBBBBBBBBBBB
| CCCCCCCCCCCCCCCCCCCCCC
| DDDDDDDDDDDDDDDDDDDDDD
]
];

Correction du déplacement des commentaires dans les appels de fonction comme useEffect (#6270 par @sosukesuzuki)

Ce correctif résout un bogue qui affectait les appels de fonction avec une fonction fléchée comme premier argument et une expression de tableau comme deuxième argument, par exemple useEffect de React. Si un commentaire était placé sur la ligne précédant le deuxième argument, Prettier le déplaçait vers la ligne du dessus et corrompait l'indentation.

Le bogue n'était présent qu'avec les parseurs Flow et TypeScript.

// Input
useEffect(
() => {
console.log("some code", props.foo);
},

// eslint-disable-line react-hooks/exhaustive-deps
[]
);

// Prettier 1.18
useEffect(() => {
console.log("some code", props.foo);
}, // eslint-disable-line react-hooks/exhaustive-deps
[]);

// Prettier 1.19
useEffect(
() => {
console.log("some code", props.foo);
},

// eslint-disable-line react-hooks/exhaustive-deps
[]
);

Placement d'une parenthèse fermante sur une nouvelle ligne après les types union (#6307 par @sosukesuzuki)

// Input
const foo = [abc, def, ghi, jkl, mno, pqr, stu, vwx, yz] as (
| string
| undefined
)[];

// Prettier 1.18
const foo = [abc, def, ghi, jkl, mno, pqr, stu, vwx, yz] as (
| string
| undefined)[];

// Prettier 1.19
const foo = [abc, def, ghi, jkl, mno, pqr, stu, vwx, yz] as (
| string
| undefined
)[];

Flow

Ajout du support pour les énumérations (#6833 par @gkz)

// Input
enum E of string {
A = "a",
B = "b",
}

// Prettier 1.19
enum E of string {
A = "a",
B = "b",
}

Parenthèses autour des types de retour des fonctions fléchées qui ont FunctionTypeAnnotation imbriqué dans ObjectTypeAnnotation (#6717 par @sosukesuzuki)

Il s'agit d'un contournement pour un bogue dans le parseur Flow. Sans les parenthèses, le parseur génère une erreur.

// Input
const example1 = (): { p: (string => string) } => (0: any);

// Prettier 1.18
const example1 = (): { p: string => string } => (0: any);

// Prettier 1.19
const example1 = (): ({ p: string => string }) => (0: any);

JavaScript

Casser les tableaux de tableaux/objets si chaque élément contient plus d'un élément/propriété (#6694 par @sosukesuzuki)

Cela devrait formater vos appels new Map et Jest test.each plus joliment.

// Input
test.each([
{ a: "1", b: 1 },
{ a: "2", b: 2 },
{ a: "3", b: 3 }
])("test", ({ a, b }) => {
expect(Number(a)).toBe(b);
});
[[0, 1, 2], [0, 1, 2]];
new Map([
[A, B],
[C, D],
[E, F],
[G, H],
[I, J],
[K, L],
[M, N]
]);

// Prettier 1.18
test.each([{ a: "1", b: 1 }, { a: "2", b: 2 }, { a: "3", b: 3 }])(
"test",
({ a, b }) => {
expect(Number(a)).toBe(b);
}
);
[[0, 1, 2], [0, 1, 2]]
new Map([[A, B], [C, D], [E, F], [G, H], [I, J], [K, L], [M, N]]);

// Prettier 1.19
test.each([
{ a: "1", b: 1 },
{ a: "2", b: 2 },
{ a: "3", b: 3 }
])("test", ({ a, b }) => {
expect(Number(a)).toBe(b);
});
[
[0, 1, 2],
[0, 1, 2]
];
new Map([
[A, B],
[C, D],
[E, F],
[G, H],
[I, J],
[K, L],
[M, N]
]);

Mettre à jour la précédence de ?? pour correspondre à la proposition stage 3 (#6404 par @vjeux, #6863 par @jridgewell)

Nous avons mis à jour le support de Prettier pour l'opérateur de coalescence des nuls pour correspondre à une mise à jour de spécification qui interdit désormais qu'il contienne immédiatement, ou soit contenu dans une opération && ou ||.

// Input
(foo ?? bar) || baz;
(foo || bar) ?? baz;

// Prettier 1.18
foo ?? bar || baz;
foo || bar ?? baz;

// Prettier 1.19
(foo ?? bar) || baz;
(foo || bar) ?? baz;

Notez que puisque nous avons mis à jour nos parseurs avec des versions supportant cette spécification, le code sans parenthèses générera une erreur d'analyse.

Ne plus exiger de parenthèses pour les expressions logiques avec le même opérateur (#6864 par @jridgewell)

// Input
foo && (bar && baz);
foo || (bar || baz);
foo ?? (bar ?? baz);

// Prettier 1.18
foo && (bar && baz);
foo || (bar || baz);
foo ?? (bar ?? baz);

// Prettier 1.19
foo && bar && baz;
foo || bar || baz;
foo ?? bar ?? baz;

Parenthèses plus lisibles pour les appels new (#6412 par @bakkot)

// Input
var a = new (x().y)();
var a = new (x().y.z)();
var a = new (x().y().z)();

// Prettier 1.18
var a = new (x()).y();
var a = new (x()).y.z();
var a = new (x().y()).z();

// Prettier 1.19
var a = new (x().y)();
var a = new (x().y.z)();
var a = new (x().y().z)();

Conserver les parenthèses avec commentaires dans les expressions unaires (#6217 par @sosukesuzuki)

// Input
!(
/* foo */
foo
);
!(
foo // foo
);

// Prettier 1.18
!/* foo */
foo;
!foo; // foo

// Prettier 1.19
!(/* foo */ foo);
!(
foo // foo
);

Arrêter de déplacer les commentaires dans les littéraux de modèle étiquetés (#6236 par @sosukesuzuki)

// Input
foo //comment
`
`;

// Prettier 1.18
foo` // comment
`;

// Prettier 1.19
foo // comment
`
`;

Les lignes vides dans les paramètres de fonction fléchée destructurés pouvaient casser l'indentation et l'idempotence (#6301 & #6382 par @sosukesuzuki)

Auparavant, Prettier indenait étrangement le code lorsqu'une fonction fléchée dont les paramètres incluaient un pattern objet était passée en argument à un appel de fonction. Cela cassait aussi l'idempotence. Voir #6294 pour plus de détails.

// Input
foo(
({
a,

b
}) => {}
);

// Prettier 1.18
foo(({ a,
b }) => {});

// Prettier 1.19
foo(
({
a,

b
}) => {}
);

Corriger le formatage de la déstructuration d'objet avec décorateurs de paramètres (#6411 par @sosukesuzuki)

// Input
class Class {
method(
@decorator
{ foo }
) {}
}

// Prettier 1.18
class Class {
method(@decorator
{
foo
}) {}
}

// Prettier 1.19
class Class {
method(
@decorator
{ foo }
) {}
}

Gérer les patterns objet vides avec annotations de type dans les paramètres de fonction (#6438 par @bakkot)

// Input
const f = ({}: MyVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryLongType) => {};
function g({}: Foo) {}

// Prettier 1.18
const f = ({
,
}: MyVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryLongType) => {};
function g({ }: Foo) {}

// Prettier 1.19
const f = ({}: MyVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryLongType) => {};
function g({}: Foo) {}

Placer une parenthèse fermante sur une nouvelle ligne après des expressions binaires dans les appels de fonction (#6441 par @sosukesuzuki)

// Input
(
aaaaaaaaaaaaaaaaaaaaaaaaa &&
bbbbbbbbbbbbbbbbbbbbbbbbb &&
ccccccccccccccccccccccccc &&
ddddddddddddddddddddddddd &&
eeeeeeeeeeeeeeeeeeeeeeeee
)();

// Prettier 1.18
(aaaaaaaaaaaaaaaaaaaaaaaaa &&
bbbbbbbbbbbbbbbbbbbbbbbbb &&
ccccccccccccccccccccccccc &&
ddddddddddddddddddddddddd &&
eeeeeeeeeeeeeeeeeeeeeeeee)();

// Prettier 1.19
(
aaaaaaaaaaaaaaaaaaaaaaaaa &&
bbbbbbbbbbbbbbbbbbbbbbbbb &&
ccccccccccccccccccccccccc &&
ddddddddddddddddddddddddd &&
eeeeeeeeeeeeeeeeeeeeeeeee
)();

Corriger le formatage des exports nommés longs (#6446 par @sosukesuzuki)

Désormais, Prettier formate les exports nommés de la même manière que les imports nommés.

// Input
export { fooooooooooooooooooooooooooooooooooooooooooooooooo } from "fooooooooooooooooooooooooooooo";

// Prettier 1.18
export {
fooooooooooooooooooooooooooooooooooooooooooooooooo
} from "fooooooooooooooooooooooooooooo";

// Prettier 1.19
export { fooooooooooooooooooooooooooooooooooooooooooooooooo } from "fooooooooooooooooooooooooooooo";

Corriger le mauvais formatage pour le chaînage optionnel multi-lignes avec commentaire (#6506 par @sosukesuzuki)

// Input
return a
.b()
.c()
// Comment
?.d()

// Prettier 1.18
return a
.b()
.c()
?.// Comment
d();

// Prettier 1.19
return (
a
.b()
.c()
// Comment
?.d()
);

Corriger l'indentation incohérente dans les instructions switch (#6514 par @sosukesuzuki)

// Input
switch ($veryLongAndVeryVerboseVariableName && $anotherVeryLongAndVeryVerboseVariableName) {
}

switch ($longButSlightlyShorterVariableName && $anotherSlightlyShorterVariableName) {
}

// Prettier 1.18
switch (
$veryLongAndVeryVerboseVariableName &&
$anotherVeryLongAndVeryVerboseVariableName
) {
}

switch (
$longButSlightlyShorterVariableName && $anotherSlightlyShorterVariableName
) {
}

// Prettier 1.19
switch (
$veryLongAndVeryVerboseVariableName &&
$anotherVeryLongAndVeryVerboseVariableName
) {
}

switch (
$longButSlightlyShorterVariableName &&
$anotherSlightlyShorterVariableName
) {
}

Prendre en charge le formatage du code avec intrinsèques V8 (#6496 par @rreverser)

// Input
function doSmth() {
%DebugPrint
(
foo )
}

// Prettier 1.18
SyntaxError: Unexpected token (2:13)
1 | function doSmth() {
> 2 | %DebugPrint
| ^

// Prettier 1.19
function doSmth() {
%DebugPrint(foo);
}

La déstructuration d'objet dans les paramètres de méthode cassait toujours sur plusieurs lignes (#6646 par @ericsakmar)

// Input
const obj = {
func(id, { blog: { title } }) {
return id + title;
},
};

class A {
func(id, { blog: { title } }) {
return id + title;
}
#func(id, { blog: { title } }) {
return id + title;
}
}

// Prettier 1.18
const obj = {
func(
id,
{
blog: { title }
}
) {
return id + title;
}
};

class A {
func(
id,
{
blog: { title }
}
) {
return id + title;
}
#func(
id,
{
blog: { title }
}
) {
return id + title;
}
}

// Prettier 1.19
const obj = {
func(id, { blog: { title } }) {
return id + title;
},
};

class A {
func(id, { blog: { title } }) {
return id + title;
}
#func(id, { blog: { title } }) {
return id + title;
}
}

Les séparateurs numériques étaient supprimés des littéraux BigInt (#6796 par @thorn0)

// Input
const bigints = [200_000n, 0x0000_000An, 0b0111_1111n];

// Prettier 1.18
const bigints = [200000n, 0x0000000an, 0b01111111n];

// Prettier 1.19
const bigints = [200_000n, 0x0000_000an, 0b0111_1111n];

Meilleur formatage pour les expressions await imbriquées dans des appels (#6856 par @thorn0)

// Input
async function f() {
const admins = (await(db.select('*').from('admins').leftJoin('bla').where('id', 'in', [1,2,3,4]))).map(({id, name})=>({id, name}))
}

// Prettier 1.18
async function f() {
const admins = (await db
.select("*")
.from("admins")
.leftJoin("bla")
.where("id", "in", [1, 2, 3, 4])).map(({ id, name }) => ({ id, name }));
}

// Prettier 1.19
async function f() {
const admins = (
await db
.select("*")
.from("admins")
.leftJoin("bla")
.where("id", "in", [1, 2, 3, 4])
).map(({ id, name }) => ({ id, name }));
}

HTML

Ne pas casser les éléments template sur des lignes plus courtes que printWidth (#6284 par @sosukesuzuki)

Auparavant, même si la longueur de ligne était inférieure à printWidth, Prettier cassait la ligne avec un élément template.

<!-- Input -->
<template>
<template>foo</template>
</template>

<!-- Prettier 1.18 -->
<template>
<template
>foo</template
>
</template>

<!-- Prettier 1.19 -->
<template>
<template>foo</template>
</template>

Les balises script sont maintenant traitées comme des blocs pour le formatage (#6423 par @thorn0)

Auparavant, dans le mode sensible aux espaces, elles étaient formatées comme si elles étaient en ligne.

<!-- Input -->
<script
async
src="/_next/static/development/pages/_app.js?ts=1565732195968"
></script><script></script>

<!-- Prettier 1.18 -->
<script
async
src="/_next/static/development/pages/_app.js?ts=1565732195968"
></script
><script></script>

<!-- Prettier 1.19 -->
<script
async
src="/_next/static/development/pages/_app.js?ts=1565732195968"
></script>
<script></script>

Ajouter le support pour &excl; et autres entités (#6785 par @lydell et @ikatyang)

Auparavant, Prettier ne prenait en charge que les entités HTML les plus courantes, comme &nbsp; et &quot;. Désormais, Prettier prend en charge toutes les entités HTML spécifiées dans la norme HTML, telles que &excl; et &pitchfork;.

<!-- Input -->
<p>Hi&excl;</p>

<!-- Prettier 1.18
[error] stdin: SyntaxError: Unknown entity "excl" - use the "&#;" or "&#x<hex>;" syntax (1:6)
[error] > 1 | <p>Hi&excl;</p>
[error] | ^
[error] 2 |
-->

<!-- Prettier 1.19 -->
<p>Hi&excl;</p>

Ajout des types de script JSON (#6293 par @ascorbic)

<!-- Input -->
<script type="application/json">
{ "json":true }
</script>
<script type="importmap">
{ "json":true }
{ "json":true }
</script>
</script>
<script type="systemjs-importmap">
{ "json":true }
</script>

<!-- Prettier 1.18 -->
<script type="application/json">
{ "json":true }
</script>
<script type="importmap">
{ "json":true }
{ "json":true }
</script>
</script>
<script type="systemjs-importmap">
{ "json":true }
</script>

<!-- Prettier 1.19 -->
<script type="application/json">
{ "json": true }
</script>
<script type="importmap">
{ "json": true }
</script>
<script type="systemjs-importmap">
{ "json": true }
</script>

Angular

Placement d'une parenthèse fermante sur une nouvelle ligne après des ternaires passés à des pipes (#5682 par @selvazhagan)

<!-- Input -->
{{ (isCustomDiscount ? 'DISCOUNTS__DISCOUNT_TRAINING_HEADER__CUSTOM_DISCOUNT' : 'DISCOUNTS__DISCOUNT_TRAINING_HEADER__DISCOUNT') | translate }}

<!-- Prettier 1.18 -->
{{
(isCustomDiscount
? "DISCOUNTS__DISCOUNT_TRAINING_HEADER__CUSTOM_DISCOUNT"
: "DISCOUNTS__DISCOUNT_TRAINING_HEADER__DISCOUNT") | translate
}}

<!-- Prettier 1.19 -->
{{
(isCustomDiscount
? "DISCOUNTS__DISCOUNT_TRAINING_HEADER__CUSTOM_DISCOUNT"
: "DISCOUNTS__DISCOUNT_TRAINING_HEADER__DISCOUNT"
) | translate
}}

Ajout du formatage pour les attributs i18n (#6695 par @voithos)

Prettier enveloppera automatiquement le contenu des attributs i18n lorsqu'ils dépassent la longueur de ligne.

<!-- Input -->
<h1 i18n="This is a very long internationalization description text, exceeding the configured print width">
Hello!
</h1>

<!-- Prettier 1.18 -->
<h1
i18n="This is a very long internationalization description text, exceeding the configured print width"
>
Hello!
</h1>

<!-- Prettier 1.19 -->
<h1
i18n="
This is a very long internationalization description text, exceeding the
configured print width
"
>
Hello!
</h1>

Handlebars

Correction de la gestion des espaces et des sauts de ligne (#6354 par @chadian)

Ce correctif résout divers cas d'utilisation des espaces et des sauts de ligne dans les templates Handlebars et Glimmer.

<!-- Input -->
<SomeComponent />{{name}}

Some sentence with {{dynamic}} expressions.



sometimes{{nogaps}}areimportant<Hello></Hello>
{{name}} is your name

<!-- Prettier 1.18 -->
<SomeComponent />
{{name}}
Some sentence with
{{dynamic}}
expressions.



sometimes
{{nogaps}}
areimportant
<Hello />
{{name}}
is your name

<!-- Prettier 1.19 -->
<SomeComponent />{{name}}

Some sentence with {{dynamic}} expressions.



sometimes{{nogaps}}areimportant
<Hello />
{{name}} is your name

Éviter d'ajouter des sauts de ligne indésirables entre du texte et des mustaches (#6186 par @gavinjoyce)

Auparavant, Prettier ajoutait des sauts de ligne entre du texte et des mustaches, ce qui produisait des espaces indésirables dans le rendu final.

<!-- Input -->
<p>Your username is @{{name}}</p>
<p>Hi {{firstName}} {{lastName}}</p>

<!-- Prettier 1.18 -->
<p>
Your username is @
{{name}}
</p>
<p>
Hi
{{firstName}}
{{lastName}}
</p>

<!-- Prettier 1.19 -->
<p>
Your username is @{{name}}
</p>
<p>
Hi {{firstName}} {{lastName}}
</p>

Amélioration du formatage des commentaires (#6206 par @gavinjoyce)

<!-- Input -->
<div>
{{! Foo }}
{{#if @foo}}
Foo
{{/if}}

{{! Bar }}
{{#if @bar}}
Bar
{{/if}}
</div>

<!-- Prettier 1.18 -->
<div>
{{! Foo }}
{{#if @foo}}
Foo
{{/if}}{{! Bar }}{{#if @bar}}
Bar
{{/if}}
</div>

<!-- Prettier 1.19 -->
<div>
{{! Foo }}
{{#if @foo}}
Foo
{{/if}}
{{! Bar }}
{{#if @bar}}
Bar
{{/if}}
</div>

Préservation des entités HTML (#6234 par @gavinjoyce)

<!-- Input -->
<p>
Some escaped characters: &lt; &gt; &amp;
</p>

<!-- Prettier 1.18 -->
<p>
Some escaped characters: < > &
</p>

<!-- Prettier 1.19 -->
<p>
Some escaped characters: &lt; &gt; &amp;
</p>

Correction de l'option --single-quote sur les attributs HTML (#6377 par @dcyriller)

Auparavant, cette option n'était pas appliquée aux attributs HTML.

<!-- Input -->
<div class="a-class-name"></div>

<!-- Prettier 1.18, with the option --single-quote -->
<div class="a-class-name"></div>

<!-- Prettier 1.19, with the option --single-quote -->
<div class='a-class-name'></div>

Casser les interpolations longues (#6249 par @jjaffeux)

<!-- Input -->
{{my-component foo="bar" bar="baz" action=(action "almostTheMaximumLengthxxxx")
}}

<!-- Prettier 1.18 -->
{{my-component foo="bar" bar="baz" action=(action "almostTheMaximumLengthxxxx")
}}

<!-- Prettier 1.19 -->
{{my-component
foo="bar"
bar="baz"
action=(action "almostTheMaximumLengthxxxx")
}}

MDX

Le texte suivant du JSX était tronqué incorrectement (#6340 par @JounQin)

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

<!-- Prettier 1.18 -->
<Hello>
test <World /> test
</Hello>123

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

Les éléments JSX adjacents devraient être autorisés (#6332 par @JounQin)

// Input
<Hello>
test <World /> test
</Hello>123

// Prettier 1.18
SyntaxError: Unexpected token (3:9)
1 | <Hello>
2 | test <World /> test
> 3 | </Hello>123
| ^

// Prettier 1.19
<Hello>
test <World /> test
</Hello>123


// Input
<Hello>
test <World /> test
</Hello>
<Hello>
test <World /> test
</Hello>123

// Prettier 1.18
SyntaxError: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>? (4:1)
2 | test <World /> test
3 | </Hello>
> 4 | <Hello>
| ^
5 | test <World /> test
6 | </Hello>123

// Prettier 1.19
<Hello>
test <World /> test
</Hello>
<Hello>
test <World /> test
</Hello>123

Vue

Formatage de style[lang="css"] (#6875 par @fisker)

Auparavant, les éléments <style> avec lang="css" n'étaient pas formatés, alors que ceux sans attribut ou avec d'autres valeurs fonctionnaient. Cette omission a été corrigée.

<!-- Input -->
<style lang="css">
a {
color: #F00
}</style>

<!-- Output (Prettier stable) -->
<style lang="css">
a {
color: #F00
}
</style>

<!-- Output (Prettier master) -->
<style lang="css">
a {
color: #f00;
}
</style>

Less

Ne pas mettre en minuscules les noms de variables et supprimer les espaces entre la variable et le deux-points (#6778 par @fisker)

// Input
@FoO : bar;

// Prettier 1.18
@foo : bar;

// Prettier 1.19
@FoO: bar;

API

Ajout de l'option resolveConfig à getFileInfo() (#6666 par @kaicataldo)

Ajout d'une option resolveConfig: boolean à prettier.getFileInfo() qui, lorsqu'elle est définie sur true, résoudra la configuration pour le chemin de fichier donné. Cela permet aux utilisateurs de prendre en compte les analyseurs surchargés.

CLI

Gestion des erreurs lors de la lecture de stdin (#6708 par @andersk et @lydell)

Si vous aviez une erreur dans votre .prettierrc, Prettier plantait lors du formatage de stdin. Ces erreurs sont désormais correctement gérées.

# Prettier 1.18
$ prettier --parser babel < test.js
(node:21531) UnhandledPromiseRejectionWarning: Error: Invalid printWidth value. Expected an integer, but received "nope".
at _loop (/home/you/project/node_modules/prettier/bin-prettier.js:7887:63)
at Normalizer._applyNormalization (/home/you/project/node_modules/prettier/bin-prettier.js:8000:13)
at applyNormalization (/home/you/project/node_modules/prettier/bin-prettier.js:7817:49)
at Normalizer.normalize (/home/you/project/node_modules/prettier/bin-prettier.js:7823:9)
at normalizeOptions$1 (/home/you/project/node_modules/prettier/bin-prettier.js:8760:31)
at Object.normalizeApiOptions (/home/you/project/node_modules/prettier/bin-prettier.js:8918:10)
at getOptionsForFile (/home/you/project/node_modules/prettier/bin-prettier.js:44160:69)
at /home/you/project/node_modules/prettier/bin-prettier.js:44214:22
at process._tickCallback (internal/process/next_tick.js:68:7)
(node:21531) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)
(node:21531) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

# Prettier 1.19
$ prettier --parser babel < test.js
[error] Invalid printWidth value. Expected an integer, but received "nope".

Gestion élégante des chemins inexistants passés à --stdin-filepath (#6687 par @voithos et @lydell)

Auparavant, si vous passiez un sous-répertoire inexistant à --stdin-filepath, Prettier générait une erreur. Désormais, Prettier gère cela correctement.

# Prettier 1.18
$ prettier --stdin-filepath does/not/exist.js < test.js
[error] Invalid configuration file: ENOENT: no such file or directory, scandir '/home/you/project/does/not'

# Prettier 1.19
$ prettier --stdin-filepath does/not/exist.js < test.js
test;

La configuration ne devrait pas être évaluée pour les fichiers ignorés (#6233 par @jamesreggio)

Avant ce changement, le CLI résolvait la configuration d'un fichier avant de vérifier s'il était ignoré. Si la configuration était invalide, le CLI signalait un échec.

Ce changement déplace la phase de résolution de la configuration après la confirmation que le fichier n'est pas ignoré.

Afficher le nom de fichier de configuration invalide dans les messages d'erreur (#6865 par @fisker)

# Input
$ prettier filename.js --config .invalid-config

# Prettier 1.18
Invalid configuration file: ...

# Prettier 1.19
Invalid configuration file `.invalid-config`: ...

Autres

Un grand merci à @fisker pour la mise à jour de nombreuses dépendances de Prettier !

VS Code : ajout de la prise en charge des fichiers .mongo (#6848 par @aymericbouzy)

Lorsque vous utilisez l'extension Azure Cosmos DB pour VS Code, vous pouvez créer des fichiers .mongo pour écrire des requêtes MongoDB, qui utilisent la syntaxe JavaScript. Cette modification permet à VS Code de formater vos fichiers avec Prettier.

db.users.find({ someField: { $exists: true } });