Aller au contenu principal

Prettier 2.6 : nouvelle option singleAttributePerLine et nouvelles fonctionnalités JavaScript !

· 15 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 inclut une nouvelle option singleAttributePerLine. Il s'agit d'une option permettant d'afficher un seul attribut par ligne dans les templates Vue SFC, HTML et JSX. Conformément à notre Philosophie des options, nous aurions préféré ne pas ajouter une telle option. Cependant, de nombreux utilisateurs souhaitent cette fonctionnalité, et des guides de style majeurs comme le Guide de style JavaScript d'Airbnb et le guide de style Vue recommandent le style un attribut par ligne. Une PR pour ajouter cette fonctionnalité a été ouverte en octobre 2019, et celle-ci ainsi que l'issue correspondante ont reçu un soutien significatif des utilisateurs. Pour nous, ajouter cette option a été une décision difficile. Nous espérons que cette nouvelle option bénéficiera à de nombreux utilisateurs sans compromettre significativement nos principes.

Nous avons également ajouté la prise en charge du formatage pour certaines nouvelles propositions de syntaxe JavaScript via Babel.

Merci à nos sponsors !

Comme discuté dans un article de blog plus tôt cette année, nous avons commencé à rémunérer nos mainteneurs grâce aux fonds reçus de nos sponsors. Nous souhaitons remercier nos nombreux sponsors qui ont rendu cela possible ! Nous sommes particulièrement reconnaissants envers les entreprises et personnes suivantes, qui ont fait un don de plus de 1000 $ :

Si vous appréciez Prettier et souhaitez soutenir notre travail, envisagez de nous sponsoriser directement via notre OpenCollective ou en sponsorisant les projets dont nous dépendons, notamment typescript-eslint, remark et Babel.

Principales fonctionnalités

TypeScript

Prise en charge de TypeScript 4.6 (#12400 par @dependabot)

Nous avons mis à jour la version de TypeScript que nous utilisons pour analyser le code TS vers TypeScript 4.6. Cependant, aucune nouvelle syntaxe n'a été ajoutée dans cette version de TypeScript, nous n'avons donc pas eu à apporter d'autres modifications.

HTML

Forcer un seul attribut par ligne (#6644 par @kankje)

Ajout de l'option singleAttributePerLine pour spécifier si Prettier doit forcer un seul attribut par ligne en HTML, Vue et JSX.

<!-- Input -->
<div data-a="1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div data-a="1" data-b="2" data-c="3">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>

<!-- Prettier 2.5 -->
<div data-a="1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div data-a="1" data-b="2" data-c="3">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>

<!-- Prettier 2.6, with `{"singleAttributePerLine": false}` -->
<div data-a="1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div data-a="1" data-b="2" data-c="3">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>

<!-- Prettier 2.6, with `{"singleAttributePerLine": true}` -->
<div data-a="1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div
data-a="1"
data-b="2"
data-c="3"
>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>

Autres changements

JavaScript

Reconnaître waitForAsync comme instruction de test dans Angular (#11992 par @HendrikN)

// Input
test("foo bar", waitForAsync(() => {
const foo = "bar";
expect(foo).toEqual("bar")
}));

// Prettier 2.5
test(
"foo bar",
waitForAsync(() => {
const foo = "bar";
expect(foo).toEqual("bar");
})
);

// Prettier 2.6
test("foo bar", waitForAsync(() => {
const foo = "bar";
expect(foo).toEqual("bar");
}));

Préserver les commentaires de fin de ligne après les instructions if sans blocs (#12017 par @sosukesuzuki)

// Input
if (condition1) expression1; // comment A
else if (condition2) expression2; // comment B
else expression3; // comment C

// Prettier 2.5
if (condition1) expression1;
// comment A
else if (condition2) expression2;
// comment B
else expression3; // comment C

// Prettier 2.6
if (condition1) expression1; // comment A
else if (condition2) expression2; // comment B
else expression3; // comment C

Afficher les commentaires pour les types mot-clé TS entre parenthèses avec l'analyseur babel-ts (#12070 par @sosukesuzuki)

// Input
let foo: (
// comment
never
);

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

// Prettier 2.6
let foo: // comment
never;

Afficher les commentaires de fin de ligne pour les instructions continue/break (#12075 par @sosukesuzuki)

// Input
for (;;) continue // comment
;

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

// Prettier 2.6
for (;;)
continue; // comment

Mettre en ligne les expressions await dans JSX (#12088 & #12109 par @j-f1)

Les expressions await dans JSX sont désormais mises en ligne si leur argument le serait.

// Input
{await Promise.all(
someVeryLongExpression
)}

{await (
<div>Lorem ipsum ...</div>
)}


// Prettier 2.5
{
await Promise.all(
someVeryLongExpression
)
}

{
await (
<div>Lorem ipsum ...</div>
)
}


// Prettier 2.6
{await Promise.all(
someVeryLongExpression
)}

{await (
<div>Lorem ipsum ...</div>
)}

Ajouter l'analyseur acorn (#12172 par @fisker)

Une nouvelle valeur pour l'option parser a été ajoutée : acorn - Un petit analyseur JavaScript rapide basé sur JavaScript.

Conserver les commentaires après les cas default sur la même ligne (#12177 par @duailibe)

Conserver les commentaires juste après les cas default (dans les instructions switch) sur la même ligne, lorsque possible.

// Input
function read_statement() {
switch (peek_keyword()) {
case Keyword.impl: // impl<T> Growling<T> for Wolf {}
return ImplDeclaration.read();

default: // expression;
return ExpressionStatement.read();
}
}

// Prettier 2.5
function read_statement() {
switch (peek_keyword()) {
case Keyword.impl: // impl<T> Growling<T> for Wolf {}
return ImplDeclaration.read();

default:
// expression;
return ExpressionStatement.read();
}
}

// Prettier 2.6
function read_statement() {
switch (peek_keyword()) {
case Keyword.impl: // impl<T> Growling<T> for Wolf {}
return ImplDeclaration.read();

default: // expression;
return ExpressionStatement.read();
}
}

Corriger le commentaire d'argument mal placé dans les méthodes abstraites (#12185 par @duailibe)

// Input
abstract class Foo {
abstract bar(
/** comment explaining userId param */
userId
)
}

// Prettier 2.5
abstract class Foo {
abstract bar(userId);
/** comment explaining userId param */
}

// Prettier 2.6
abstract class Foo {
abstract bar(
/** comment explaining userId param */
userId
);
}

Corriger le cast de type de la superclasse dans les déclarations de classe (#12222 & #12226 par @duailibe)

Il s'agissait d'une combinaison de deux bogues distincts : déplacer les commentaires avant la superclasse et ajouter plusieurs parenthèses autour de la superclasse.

// Input
class Foo extends /** @type {Type} */ (Bar) {}

// Prettier 2.5
class Foo /** @type {Type} */ extends ((Bar)) {}

// Prettier 2.6
class Foo extends /** @type {Type} */ (Bar) {}

Ajouter la prise en charge de la notation d'ensemble Unicode dans les expressions régulières (#12241 par @fisker)

La proposition de stade 3 pour la notation d'ensemble Unicode dans les expressions régulières est désormais prise en charge via Babel 7.17.0.

Consultez l'article de blog sur la version 7.17.0 de Babel et le README de cette proposition pour plus de détails. Gardez également à l'esprit notre politique concernant la syntaxe non standard avant d'utiliser cette fonctionnalité syntaxique proposée avec Prettier.

// Examples

/[\p{Decimal_Number}--[0-9]]/v; // Non-ASCII decimal digits

"Did you see the 👩🏿‍❤️‍💋‍👩🏾 emoji?".match(/\p{RGI_Emoji}/v). // ["👩🏿‍❤️‍💋‍👩🏾"]

/[\r\n\q{\r\n|NEWLINE}]/v; // Matches \r, \n, \r\n or NEWLINE

Ajout de parenthèses aux ClassExpression avec décorateurs (#12260 par @fisker)

// Input
(@f() class {});

// Prettier 2.5
@f()
class {};

// Prettier 2.5 (Second format)
SyntaxError: A class name is required. (2:7)
1 | @f()
> 2 | class {};
| ^
3 |

// Prettier 2.6
(
@f()
class {}
);

Amélioration de l'affichage des commentaires dans les alias de type Flow et TypeScript (#12268 par @duailibe)

Pour Flow, les commentaires seront désormais alignés sur la façon dont nous affichons les commentaires dans les assignations où le côté droit est une expression d'objet :

// Input
type Props = // comment explaining the props
{
isPlaying: boolean
};

// Prettier 2.5
// comment explaining the props
type Props = {
isPlaying: boolean,
};

// Prettier 2.6
type Props =
// comment explaining the props
{
isPlaying: boolean,
};

Ce changement corrige également un problème où un commentaire placé de façon similaire dans TypeScript serait déplacé à nouveau après une deuxième opération de formatage :

// Input
type Props = // comment explaining the props
{
isPlaying: boolean
};

// Prettier 2.5
type Props = { // comment explaining the props
isPlaying: boolean;
};

// Prettier 2.5 (2nd format)
type Props = {
// comment explaining the props
isPlaying: boolean;
};

// Prettier 2.6
type Props =
// comment explaining the props
{
isPlaying: boolean,
};

Ajout de la prise en charge de la déstructuration des champs privés (#12276 par @sosukesuzuki)

La proposition TC39 de stade 2 pour la déstructuration des champs privés est désormais prise en charge via Babel 7.17. Veuillez consulter notre politique concernant la syntaxe non standard avant de décider d'utiliser cette fonctionnalité syntaxique proposée avec Prettier.

// Example
class Foo {
constructor() {
console.log(this.#x); // => 1
const { #x: x } = this;
console.log(x); // => 1
}
}

Prise en charge de la syntaxe des auto-accesseurs avec décorateurs (#12299 par @sosukesuzuki)

Prise en charge de la syntaxe des auto-accesseurs introduite dans la nouvelle proposition de décorateurs. Veuillez consulter notre politique concernant la syntaxe non standard avant d'utiliser cette fonctionnalité syntaxique proposée avec Prettier.

// Example
@defineElement("my-class")
class C extends HTMLElement {
@reactive accessor clicked = false;
}

Correction des problèmes d'idempotence causés par les commentaires de ligne après = dans les assignations (#12349 par @thorn0)

// Input
const kochabCooieGameOnOboleUnweave = // !!!
rhubarbRhubarb(annularCooeedSplicesWalksWayWay);

// Prettier 2.5, first format
const kochabCooieGameOnOboleUnweave = rhubarbRhubarb( // !!!
annularCooeedSplicesWalksWayWay
);

// Prettier 2.5, second format
const kochabCooieGameOnOboleUnweave = rhubarbRhubarb(
// !!!
annularCooeedSplicesWalksWayWay
);

// Prettier 2.6
const kochabCooieGameOnOboleUnweave = // !!!
rhubarbRhubarb(annularCooeedSplicesWalksWayWay);

TypeScript

Refactorisation de l'affichage des assertions d'assignation définitive (#12351 par @thorn0)

Les assertions d'assignation définitive sont désormais affichées même lorsqu'elles ne sont pas suivies d'annotations de type. Bien que ce soit une erreur dans TypeScript, TS parvient tout de même à analyser le fichier.

// Input
let a!;

// Prettier 2.5
let a;

// Prettier 2.6
let a!;

Ajout d'une virgule finale pour les éléments restants dans les types de tuples (#12390 par @sosukesuzuki)

TypeScript permet aux éléments restants dans les types de tuples (...T) d'avoir des éléments normaux après eux depuis TypeScript 4.2. Prettier ajoute désormais une virgule finale pour l'élément restant terminal (lorsque les virgules finales sont activées) pour plus de cohérence et pour réduire les différences si vous décidez d'ajouter d'autres éléments après l'élément final ultérieurement.

// { trailingCommma: "all" }

// Input
type Foo = [
Element,
Element,
Element,
Element,
Element,
Element,
...RestElement,
];


// Prettier 2.5
type Foo = [
Element,
Element,
Element,
Element,
Element,
Element,
...RestElement
];


// Prettier 2.6
type Foo = [
Element,
Element,
Element,
Element,
Element,
Element,
...RestElement,
];

Flow

Correction du formatage des indexeurs static dans les déclarations de classe Flow (#12009 par @gkz)

// Input
declare class A {
static [string]: boolean;
}

// Prettier 2.5
declare class A {
[string]: boolean;
}

// Prettier 2.6
declare class A {
static [string]: boolean;
}

CSS

Préservation des lignes vides dans les maps SCSS (#12210 par @duailibe)

Ce changement s'applique également à certaines fonctionnalités PostCSS avec une syntaxe similaire.

/* Input */
$colours: (
"text": $light-100,

"background-primary": $dark-300,
"background-secondary": $dark-200,
"background-tertiary": $dark-100
);

/* Prettier 2.5 */
$colours: (
"text": $light-100,
"background-primary": $dark-300,
"background-secondary": $dark-200,
"background-tertiary": $dark-100
);

/* Prettier 2.6 */
$colours: (
"text": $light-100,

"background-primary": $dark-300,
"background-secondary": $dark-200,
"background-tertiary": $dark-100
);

Correction de la mise en minuscules des valeurs PostCSS (#12393 par @niklasvatn)

Les valeurs PostCSS peuvent commencer par des chiffres. Prettier interprète cela comme un nombre suivi d'une unité dans l'exemple ci-dessous.

// Input
@value 4XLarge 28/36px;

.test {
font: 4XLarge Helvetica;
}

// Prettier 2.5
@value 4XLarge 28/36px;

.test {
font: 4xlarge Helvetica;
}

// Prettier 2.6
@value 4XLarge 28/36px;

.test {
font: 4XLarge Helvetica;
}

SCSS

Correction des commentaires dans les maps (#11920 par @fisker)

// Input
.ag-theme-balham {
@include ag-theme-balham(
(
foreground-color: $custom-foreground-color,
disabled-foreground-color: null, // TODO some comment
)
);
}

// Prettier 2.5
.ag-theme-balham {
@include ag-theme-balham(
(
foreground-color: $custom-foreground-color,
disabled-foreground-color: null,
r: null, // TODO som
)
);
}

// Prettier 2.6
.ag-theme-balham {
@include ag-theme-balham(
(
foreground-color: $custom-foreground-color,
disabled-foreground-color: null,
// TODO some comment
)
);
}

Correction de l'impression des paramètres d'une mixin nommée selector() (#12213 par @duailibe)

/* Input */
@mixin selector($param: 'value') {
}

/* Prettier 2.5 */
@mixin selector($param: 'value) {
}

/* Prettier 2.6 */
@mixin selector($param: 'value') {
}

Vue

Correction des blocages sur les v-for invalides (#12113 par @fisker)

// Input
<template>
<div>
<div v-for=" a in ">aaaaa</div>
</div>
</template>

// Prettier 2.5
// Hangs

// Prettier 2.6
<template>
<div>
<div v-for=" a in ">aaaaa</div>
</div>
</template>;

Autorisation de l'attribut lang vide dans <template> (#12394 par @HallvardMM)

La balise template doit autoriser lang="" (chaîne vide) ou lang non défini

<!-- Input -->
<template lang="">
<v-app-bar>
<v-menu offset-y>
<template></template>
</v-menu>
</v-app-bar>
</template>

<template lang>
<v-app-bar>
<v-menu offset-y>
<template></template>
</v-menu>
</v-app-bar>
</template>

<!-- Prettier 2.5 -->
SyntaxError: Unexpected closing tag "v-menu". 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 (5:5)
[error] 3 | <v-menu offset-y>
[error] 4 | <template></template>
[error] > 5 | </v-menu>
[error] | ^^^^^^^^^
[error] 6 | </v-app-bar>
[error] 7 | </template>

<!-- Prettier 2.6 -->
<template lang="">
<v-app-bar>
<v-menu offset-y>
<template></template>
</v-menu>
</v-app-bar>
</template>

<template lang>
<v-app-bar>
<v-menu offset-y>
<template></template>
</v-menu>
</v-app-bar>
</template>

Ember / Handlebars

Identification correcte des backslashes supprimés par glimmer (#12302 par @MattTheNub)

Cela provoquait l'ajout inutile de backslashes par Prettier à chaque formatage de fichier.

{{! Input }}
<p>\</p>
<p>\\</p>
<p>\\\</p>

{{! Prettier 2.5 }}
<p>\\</p>
<p>\\\</p>
<p>\\\\</p>

{{! Prettier 2.6 }}
<p>\</p>
<p>\\</p>
<p>\\\</p>

GraphQL

Affichage des descriptions sur les nœuds de définition de schéma GraphQL (#11901 par @trevor-scheer)

# Input
"""SchemaDefinition description is lost"""
schema {
query: Query
}

# Prettier 2.5
schema {
query: Query
}

# Prettier 2.6
"""
SchemaDefinition description is lost
"""
schema {
query: Query
}

YAML

Correction de la suppression inattendue des lignes de littéraux de bloc commençant par U+3000 (#12305 par @Quramy)

# Input
block_with_ideographic_space: |
 line-content # This line starts with U+3000

# Prettier 2.5
block_with_ideographic_space: |

// Prettier 2.6
block_with_ideographic_space: |
 line-content # This line starts with U+3000

CLI

Ajout de l'option --no-plugin-search pour désactiver l'auto-chargement des plugins (#10274 par @fisker)

Pour désactiver l'auto-chargement des plugins, utilisez --no-plugin-search avec la CLI Prettier ou ajoutez { pluginSearchDirs: false } aux options de prettier.format() ou dans le fichier de configuration.

// Prettier 2.5
$ prettier . --plugin-search-dir=a-dir-without-plugins

// Prettier 2.6
$ prettier . --no-plugin-search

Inférence du parser pour .swcrc (#12320 par @sosukesuzuki)

Formatage du fichier .swcrc en tant que fichier JSON.

Divers

Migration vers esbuild (#12055 par @fisker)

Nous avons remplacé notre chaîne de build de Rollup par esbuild. esbuild est beaucoup plus rapide et a amélioré notre expérience de développement. Il s'agit d'un changement interne qui ne devrait pas affecter les utilisateurs. Si vous rencontrez un problème après la mise à jour, ouvrez une issue !