Aller au contenu principal

Prettier 2.2 : nouveaux analyseurs JavaScript, TS 4.1 et bundles autonomes ESM

· 18 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 prend en charge les nouveaux analyseurs JavaScript espree et meriyah, supporte TypeScript 4.1, propose des bundles autonomes ESM pour navigateurs modernes et inclut de nombreuses corrections de bugs et améliorations !

Principales fonctionnalités

JavaScript

Ajout des analyseurs espree et meriyah (#9000, #9514 par @fisker)

Deux nouvelles valeurs pour l'option parser ont été ajoutées :

TypeScript

Support de TypeScript 4.1 (#9473, #9636 par @sosukesuzuki)

Remappage de clés dans les types mappés
// Input
type MappedTypeWithNewKeys<T> = {
[K in keyof T as NewKeyType]: T[K]
};

// Prettier 2.1
SyntaxError: Unexpected token, expected "]" (2:17)
1 | type MappedTypeWithNewKeys<T> = {
> 2 | [K in keyof T as NewKeyType]: T[K]
| ^
3 | };

// Prettier 2.2
type MappedTypeWithNewKeys<T> = {
[K in keyof T as NewKeyType]: T[K]
};
Types de littéraux de gabarit
// Input
type HelloWorld = `Hello, ${keyof World}`

// Prettier 2.1
SyntaxError: Unexpected token, expected "}" (1:35)
> 1 | type HelloWorld = `Hello, ${keyof World}`
| ^

// Prettier 2.2
type HelloWorld = `Hello, ${keyof World}`;

API

Bundles autonomes ESM (#8983 par @Monchi, @fisker)

Prettier propose désormais également des modules ES, utilisables directement dans les navigateurs modernes :

import prettier from "https://unpkg.com/prettier/esm/standalone.mjs";
import parserGraphql from "https://unpkg.com/prettier/esm/parser-graphql.mjs";

prettier.format("query { }", {
parser: "graphql",
plugins: [parserGraphql],
});

Autres changements

JavaScript

Respecter l'espacement entre valeurs de gabarit dans le CSS intégré (#9078 par @sosukesuzuki)

// Input
const style = css`
width: ${size}${sizeUnit};
`;

// Prettier 2.1
const style = css`
width: ${size} ${sizeUnit};
`;

// Prettier 2.2
const style = css`
width: ${size}${sizeUnit};
`;

Corriger les commentaires dans les littéraux de gabarit avec syntaxe intégrée (#9278 par @fisker)

// Input
html`${
foo
/* comment */
}`;
html`
${
foo
/* comment */
}
`;
graphql`${
foo
/* comment */
}`;
css`${
foo
/* comment */
}`;

// Prettier 2.1
html`${foo}`;
/* comment */
html`
${foo}
/* comment */
`;
graphql`
${foo}
/* comment */
`;
css`
${foo}
/* comment */
`;


// Prettier 2.2
html`${
foo
/* comment */
}`;
html`
${
foo
/* comment */
}
`;
graphql`${
foo
/* comment */
}`;
css`${
foo
/* comment */
}`;

Améliorer le formatage des assignations de classes avec noms de superclasses longs (#9341 par @sosukesuzuki)

Ceci améliore le formatage des espaces de noms de la Google Closure Library.

// Input
aaaaaaaa.bbbbbbbb.cccccccc.dddddddd.eeeeeeee.ffffffff.gggggggg2 = class extends (
aaaaaaaa.bbbbbbbb.cccccccc.dddddddd.eeeeeeee.ffffffff.gggggggg1
) {
method () {
console.log("foo");
}
};

// Prettier 2.1
aaaaaaaa.bbbbbbbb.cccccccc.dddddddd.eeeeeeee.ffffffff.gggggggg2 = class extends aaaaaaaa
.bbbbbbbb.cccccccc.dddddddd.eeeeeeee.ffffffff.gggggggg1 {
method() {
console.log("foo");
}
};

// Prettier 2.2
aaaaaaaa.bbbbbbbb.cccccccc.dddddddd.eeeeeeee.ffffffff.gggggggg2 = class extends (
aaaaaaaa.bbbbbbbb.cccccccc.dddddddd.eeeeeeee.ffffffff.gggggggg1
) {
method() {
console.log("foo");
}
};

Corriger le placement des commentaires en tête des corps d'instructions while (#9345 par @sosukesuzuki)

// Input
while(1) // Comment
foo();

// Prettier 2.1
while (
1 // Comment
)
foo();

// Prettier 2.2
while (1)
// Comment
foo();

Mise à jour vers @babel/parser 7.12 (#9408, #9476, #9597 par @sosukesuzuki)

Mise à jour du parseur JavaScript vers @babel/parser 7.12. Cela corrige plusieurs bugs et prend en charge de nouvelles syntaxes.

Prise en charge des assertions d'import

La proposition "module attributes" prise en charge en 2.1 a été significativement modifiée et renommée en "import assertions".

import foo from "./foo.json" assert { type: "json" };
Prise en charge des imports/exports avec noms sous forme de chaînes
let happy = "happy";
export { happy as "😃" };
Prise en charge des blocs statiques de classe
class C {
static #x = 42;
static y;
static {
try {
this.y = doSomethingWith(this.#x);
} catch {
this.y = "unknown";
}
}
}

Conserver les littéraux de gabarit invalides en HTML/Markdown tels quels (#9431 par @fisker)

// Input
foo = html`<div>\u{prettier}</div>`;
foo = html`\u{prettier}${foo}pr\u{0065}ttier`;
foo = markdown`# \u{prettier}\u{0065}`;

// Prettier 2.1
foo = html``;
foo = html`null${foo}prettier`;
foo = markdown`
# \u{prettier}\u{0065}
`;

// Prettier 2.2
foo = html`<div>\u{prettier}</div>`;
foo = html`\u{prettier}${foo}pr\u{0065}ttier`;
foo = markdown`# \u{prettier}\u{0065}`;

Corriger le formatage pour import {a as a} et export {a as a} (#9435 par @fisker)

// Input
import { a as a } from "a";
export { b as b } from "b";

// Prettier 2.1
import { a } from "a";
export { b } from "b";

// Prettier 2.2
import { a as a } from "a";
export { b as b } from "b";

Corriger le formatage des expressions JSX générées (#9650 par @brainkim)

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

Aplatir les paramètres d'expression de fonction dans le dernier argument embrassé (#9662 par @thorn0)

// Prettier 2.1
function* mySagas() {
yield effects.takeEvery(rexpress.actionTypes.REQUEST_START, function* ({
id
}) {
console.log(id);
yield rexpress.actions(store).writeHead(id, 400);
yield rexpress.actions(store).end(id, "pong");
console.log("pong");
});
}

// Prettier 2.2
function* mySagas() {
yield effects.takeEvery(
rexpress.actionTypes.REQUEST_START,
function* ({ id }) {
console.log(id);
yield rexpress.actions(store).writeHead(id, 400);
yield rexpress.actions(store).end(id, "pong");
console.log("pong");
}
);
}

Corriger le plantage sur require(/* comment */) (#9670 par @fisker)

// Input
require(/* comment */)

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

// Prettier 2.2
require(/* comment */);

TypeScript

Préserver le dernier séparateur dans les types d'objet et interfaces ignorés (#9318 par @sosukesuzuki)

// Input
let x: {
// prettier-ignore
y: z;
};

// Prettier 2.1
let x: {
// prettier-ignore
y: z;;
};

// Prettier 2.2
let x: {
// prettier-ignore
y: z;
};

Ajouter des parenthèses autour des assignations dans les propriétés littérales d'objet (#9484 par @fisker)

// Input
foo = { bar: (a = b) };

// Prettier 2.1
foo = { bar: a = b };

// Prettier 2.2
foo = { bar: (a = b) };

Corriger les incohérences de formatage des types entre typescript et flow (#9521 par @fisker)

// Input
const name: SomeGeneric<
Pick<Config, "ONE_LONG_PROP" | "ANOTHER_LONG_PROP">
> = null;

// Prettier 2.1 (--parser=typescript)
const name: SomeGeneric<Pick<
Config,
"ONE_LONG_PROP" | "ANOTHER_LONG_PROP"
>> = null;

// Prettier 2.1 (--parser=flow)
const name: SomeGeneric<
Pick<Config, "ONE_LONG_PROP" | "ANOTHER_LONG_PROP">
> = null;

// Prettier 2.2 (typescript and flow parser)
const name: SomeGeneric<
Pick<Config, "ONE_LONG_PROP" | "ANOTHER_LONG_PROP">
> = null;

Corriger les types mappés avec prettier-ignore (#9551 par @fisker)

// Input
type a= {
// prettier-ignore
[A in B]: C | D
}

// Prettier 2.1
type a = {
// prettier-ignore
A in B: C | D;
};

// Prettier 2.2
type a = {
// prettier-ignore
[A in B]: C | D
};

Flow

Basculer le parseur babel vers babel-flow si le pragma @flow est détecté (#9071 par @fisker)

En pratique, cela signifie que tant que vos fichiers Flow contiennent le pragma, vous pouvez utiliser l'extension .js en toute sécurité. Prettier les analysera et les imprimera correctement sans configuration supplémentaire. Auparavant, le pragma était reconnu par l'analyseur syntaxique, mais il existait des problèmes mineurs de correction avec l'imprimeur. Par exemple, il n'est pas sûr de supprimer les guillemets des clés numériques dans Flow.

// Input (with --parser babel)
// @flow
f<T>({ "2": 2 })

// Prettier 2.1
// @flow
f<T>({ 2: 2 });

// Prettier 2.2
// @flow
f<T>({ "2": 2 });

Énumérations avec membres inconnus (#9432 par @gkz)

Précédemment non pris en charge. Désormais, le code suivant est formaté :

// Input
enum E {
A,
B,
...
}

// Prettier 2.1: parse error

// Prettier 2.2
enum E {
A,
B,
...
}

Annotations du paramètre this (#9457 par @dsainati1, #9489 par @fisker)

// Input
function f(this: string, a: number) {
}

type T = (this: boolean, a: number) => boolean;

// Prettier 2.1
function f(this: string, a: number) {}

type T = (a: number) => boolean;

// Prettier 2.2
function f(this: string, a: number) {
}

type T = (this: boolean, a: number) => boolean;

Prise en charge de BigIntLiteralTypeAnnotation et BigIntTypeAnnotation (#9523 par @fisker)

Ajoute la prise en charge de BigIntLiteralTypeAnnotation et BigIntTypeAnnotation dans Flow.

// Input
const foo: bigint = 1n;
const bar: baz<1n> = 1n;

// Prettier 2.1
Error: unknown type: "BigIntTypeAnnotation"
at ...

// Prettier 2.2
const foo: bigint = 1n;
const bar: baz<1n> = 1n;

Considérer davantage de types simples comme non-cassants dans les annotations de type générique (#9543 par @fisker)

// Input
const foo1: Fooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo<symbol> = a
const foo2: Fooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo<"STRING"> = a;
const foo3: Fooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo<0> = a;

// Prettier 2.1
const foo1: Fooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo<
symbol
> = a;
const foo2: Fooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo<
"STRING"
> = a;
const foo3: Fooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo<
0
> = a;

// Prettier 2.2 (typescript and flow parser)
const foo1: Fooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo<symbol> = a
const foo2: Fooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo<"STRING"> = a;
const foo3: Fooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo<0> = a;

Correction des parenthèses manquantes autour des assertions de type ignorées par prettier-ignore (#9553 par @fisker)

// Input
transform(
// prettier-ignore
(pointTransformer: (Point => Point))
);

// Prettier 2.1
transform(
// prettier-ignore
pointTransformer: (Point => Point)
);

// Prettier 2.2
transform(
// prettier-ignore
(pointTransformer: (Point => Point))
);

Amélioration de la détection des types de commentaires (#9563 par @fisker)

// Input
foo/*::<bar>*/(baz);
class Foo {
bar( data: Array<string>) {}
}

// Prettier 2.1
foo/*:: <bar> */(baz);
class Foo {
bar(data: Array/*:: <string> */) {}
}

// Prettier 2.2
foo/*:: <bar> */(baz);
class Foo {
bar(data: Array<string>) {}
}

Less

Correction des commentaires dans les listes de valeurs (#9356 par @thorn0)

// Input
@test-space-separated: #aaaaaa // Start with A
#bbbbbb // then some B
#cccccc; // and round it out with C

// Prettier 2.1
@test-space-separated: #aaaaaa a // Start with
#bbbbbb b // then some
#cccccc; // and round it out with C

// Prettier 2.2
@test-space-separated: #aaaaaa // Start with A
#bbbbbb // then some B
#cccccc; // and round it out with C

HTML

Correction du plantage lors de la lecture de Node.sourceSpan (#9368 par @fisker)

<!-- Input -->
<strong>a</strong>-<strong>b</strong>-

<!-- Prettier 2.1 -->
TypeError: Cannot read property 'line' of undefined
at forceNextEmptyLine ...

<!-- Prettier 2.2 -->
<strong>a</strong>-<strong>b</strong>-

Vue

Correction du formatage incohérent pour v-for (#9225 par @zweimach)

<!-- Input -->
<template>
<div
v-for="({ longLongProp=42, anotherLongLongProp='Hello, World!' }, index) of longLongLongLongLongLongLongLongList"
></div>
<div
v-for="({firstValue, secondValue, thirdValue, fourthValue, fifthValue, sixthValue}, objectKey, index) in objectWithAVeryVeryVeryVeryLongName"
></div>
</template>

<!-- Prettier 2.1 -->
<template>
<div
v-for="({ longLongProp = 42, anotherLongLongProp = 'Hello, World!' },
index) of longLongLongLongLongLongLongLongList"
></div>
<div
v-for="({
firstValue,
secondValue,
thirdValue,
fourthValue,
fifthValue,
sixthValue,
},
objectKey,
index) in objectWithAVeryVeryVeryVeryLongName"
></div>
</template>

<!-- Prettier 2.2 -->
<template>
<div
v-for="(
{ longLongProp = 42, anotherLongLongProp = 'Hello, World!' }, index
) of longLongLongLongLongLongLongLongList"
></div>
<div
v-for="(
{
firstValue,
secondValue,
thirdValue,
fourthValue,
fifthValue,
sixthValue,
},
objectKey,
index
) in objectWithAVeryVeryVeryVeryLongName"
></div>
</template>

Correction du formatage incohérent pour les slots, prise en charge de Vue 3 script[setup] et style[vars] (#9609 par @fisker)

<!-- Input -->
<script setup="props, {emit }"></script>
<style vars="{color }"></style>
<template>
<div>
<div v-slot="{destructuring:{ a:{b}}}"/>
<div v-slot:name="{destructuring:{ a:{b}}}"/>
<div #default="{destructuring:{ a:{b}}}"/>
<slot slot-scope="{destructuring:{ a:{b}}}"/>
</div>
</template>

<!-- Prettier 2.1 -->
<script setup="props, {emit }"></script>
<style vars="{color }"></style>
<template>
<div>
<div v-slot="{ destructuring: { a: { b } } }" />
<div v-slot:name="{ destructuring: { a: { b } } }" />
<div #default="{ destructuring: { a: { b } } }" />
<slot
slot-scope="{
destructuring: {
a: { b },
},
}"
/>
</div>
</template>

<!-- Prettier 2.2 -->
<script setup="props, { emit }"></script>
<style vars="{ color }"></style>
<template>
<div>
<div
v-slot="{
destructuring: {
a: { b },
},
}"
/>
<div
v-slot:name="{
destructuring: {
a: { b },
},
}"
/>
<div
#default="{
destructuring: {
a: { b },
},
}"
/>
<slot
slot-scope="{
destructuring: {
a: { b },
},
}"
/>
</div>
</template>

Handlebars (alpha)

Correction des sauts de ligne instables après <Textarea /> (#9403 par @fisker, corrections dans simple-html-tokenizer par @rwjblue)

// Input
<Textarea />
{{#if true}}
Test
{{/if}}

// Prettier 2.1
<Textarea />

{{#if true}}
Test
{{/if}}

// Prettier 2.1 (second format)
<Textarea />
{{#if true}}
Test
{{/if}}

// Prettier 2.2
<Textarea />
{{#if true}}
Test
{{/if}}

Markdown

Mise à jour de remark-math vers la version 3.0.1 ; échapper les signes dollar uniquement s'ils étaient échappés à l'origine (#7938 par @fisker et @thorn0)

<!-- Input -->
Paragraph with $14 million.

Paragraph with $14 million. But if more $dollars on the same line...

<!-- Prettier 2.1 -->
Paragraph with \$14 million.

Paragraph with $14 million. But if more $dollars on the same line...

<!-- Prettier 2.2 -->
Paragraph with $14 million.

Paragraph with $14 million. But if more $dollars on the same line...

Correction des lignes vides manquantes dans les blocs de code délimités qui n'ont pas de délimiteur de fermeture (#8786 par @fisker)

require("prettier").format("```a\n\n\n\n", { parser: "markdown" });

<!-- Prettier 2.1 -->
'```a\n\n```\n'

<!-- Prettier 2.2 -->
'```a\n\n\n\n```\n'

Ajout de la prise en charge des liens [[wiki-style]] (#9275 par @iamrecursion)

  1. La prise en charge des liens [[wiki-style]] garantit qu'ils ne seront pas cassés par le formatage de Prettier en étant répartis sur plusieurs lignes.

  2. Le contenu des liens (entre les crochets [[]]) est traité comme du texte brut. Cela s'explique par le fait que les différents outils utilisant la syntaxe [[]] n'ont pas de consensus sur ce qui est autorisé entre ces crochets.

<!-- Input -->
If I have a prose that forces a wiki link to end up crossing the [[line width limit]] like this. It's wrapped into an invalid state.

<!-- Prettier 2.1 -->
If I have a prose that forces a wiki link to end up crossing the [[line width
limit]] like this. It's wrapped into an invalid state.

<!-- Prettier 2.2 -->
If I have a prose that forces a wiki link to end up crossing the
[[line width limit]] like this. It's wrapped into an invalid state.

Alignement de la détection du langage des blocs de code avec d'autres outils populaires (#9365 par @kachkaev)

Depuis Prettier 1.12, les blocs de code commençant par ```js {something=something} sont détectés comme JavaScript et donc formatés. À l'époque, peu d'outils séparaient le langage des métadonnées, donc il a été décidé de rendre l'espace blanc facultatif pour aussi détecter ```js{something=something} comme JavaScript.

Avec la sortie de Remark v8 (utilisé par Prettier), la détection du langage des blocs de code et leur formatage sont devenus incohérents dans plusieurs cas limites rares. De plus, on a constaté que le comportement de formatage de Prettier ne correspondait pas à la coloration syntaxique dans VSCode. Pour favoriser la cohérence entre les outils et mieux respecter la spécification Commonmark, l'utilisation d'un espace entre le nom du langage et les métadonnées est désormais obligatoire.

<!-- Input -->
```js {something=something}
console.log ( "hello world" );
```

```js{something=something}
console.log ( "hello world" );
```

<!-- Prettier 2.1 -->
```js {something=something}
console.log("hello world");
```

```js{something=something}
console.log("hello world");
```

<!-- Prettier 2.2 -->
```js {something=something}
console.log("hello world");
```

```js{something=something}
console.log ( "hello world" );
```

Correction d'une ligne vide supplémentaire ajoutée après un tableau vide (#9654 par @fisker)

<!-- Input -->
Test line 1

| Specify the selected option : | Option 1 |
| ----------------------------- | -------- |

Test line 6

<!-- Prettier 2.1 -->
Test line 1

| Specify the selected option : | Option 1 |
| ----------------------------- | -------- |


Test line 6

<!-- Prettier 2.2 -->
Test line 1

| Specify the selected option : | Option 1 |
| ----------------------------- | -------- |

Test line 6

MDX

Correction des lignes vides supplémentaires en JSX (#9267 par @fisker)

<!-- Input -->
# title

<Jsx>

text

</Jsx>

<!-- Prettier 2.1 -->
# title

<Jsx>


text

</Jsx>


(Extra empty lines added after `<Jsx>` and `</Jsx>`)

<!-- Prettier 2.2 -->
# title

<Jsx>

text

</Jsx>

YAML

Application de l'option trailingComma (#9665 par @fisker)

Lorsque --trailing-comma=none, ne doit pas ajouter de virgule finale à flowMapping et flowSequence.

# Input
flow-mapping:
{
"object-does-not-fit-within-print-width": "------",
"TEST": "comma IS added here"
}
flow-sequence:
[
"object-does-not-fit-within-print-width", "------",
"TEST", "comma IS added here"
]

# Prettier 2.1
mapping:
{
"object-does-not-fit-within-print-width": "------",
"TEST": "comma IS added here",
}
flow-sequence:
[
"object-does-not-fit-within-print-width",
"------",
"TEST",
"comma IS added here",
]

# Prettier 2.2
flow-mapping:
{
"object-does-not-fit-within-print-width": "------",
"TEST": "comma IS added here"
}
flow-sequence:
[
"object-does-not-fit-within-print-width",
"------",
"TEST",
"comma IS added here"
]

Correction des commentaires dans les flowMapping et flowSequence (#9669 par @fisker)

# Input
a:
[
a, b,
# comment
]

b:
# prettier-ignore
{
a: 1, b: 2,
# comment
}

# Prettier 2.1
a: [a, b]
# comment

b:
# prettier-ignore
{
a: 1, b: 2,
# comment
}
# comment


# Prettier 2.1 (second format)
a:
[a, b]
# comment

b:
# prettier-ignore
{
a: 1, b: 2,
# comment
}
# comment
# comment


# Prettier 2.2
a: [
a,
b,
# comment
]

b:
# prettier-ignore
{
a: 1, b: 2,
# comment
}

API

Arrêt de l'inférence du parseur json pour les fichiers .jsonl (#9371 par @fisker)

// Prettier 2.1
$ prettier --check .
Checking formatting...
[error] bad.jsonl: SyntaxError: Unexpected token (2:1)
[error] 1 | '{"type": "t/f", "head": "England", "relation": "invaded", "tail": "United States"}'
[error] > 2 | '{"type": "t/f", "head": "England", "relation": "attacked", "tail": "Baltimore"}'
[error] | ^
[error] 3 |
All matched files use Prettier code style!

// Prettier 2.2
$ prettier --check .
Checking formatting...
All matched files use Prettier code style!

Vidage du contenu du suffixe de ligne à la fin du document (#9703 par @dangmai)

Prettier ne vidait pas le contenu des suffixes de ligne en fin de document en l'absence de saut de ligne final. Cette correction force le vidage de tout ce contenu même sans saut de ligne final.

CLI

Migration du support pre-commit vers github.com/pre-commit/mirrors-prettier (#8937 par @FloChehab)

Le support de pre-commit a été déplacé vers https://github.com/pre-commit/mirrors-prettier, veuillez mettre à jour votre fichier .pre-commit-config.yaml.

- - repo: https://github.com/prettier/prettier
+ - repo: https://github.com/pre-commit/mirrors-prettier
- rev: "2.2.0"
+ rev: "v2.2.0"
hooks:
- id: prettier

Correction : erreur sur les répertoires et fichiers avec des noms numériques (#9298 par @fisker)

$ cat 1/index.js
hello('world')

// Prettier 2.1
$ prettier 1
[error] The "path" argument must be of type string. Received type number (1)

// Prettier 2.2
$ prettier 1
hello("world");