Aller au contenu principal

Prettier 2.8 : amélioration de l'option CLI --cache et prise en charge de l'opérateur satisfies de TypeScript 4.9 !

· 8 minutes de lecture
Sosuke Suzuki
Sosuke Suzuki
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 des améliorations de l'option --cache ajoutée dans la 2.7. Une nouvelle option --cache-location a été ajoutée, et un bug qui enregistrait le cache même lorsque --write n'était pas spécifié a été corrigé.

Nous ajoutons également la prise en charge de l'opérateur satisfies de TypeScript 4.9 !

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.

L'équipe Prettier prévoit de publier la version 3.0 dans les prochains mois. Si vous développez des plugins, préparez-vous à la migration. Consultez le guide de migration et l'issue #13606 pour plus d'informations.

Principales fonctionnalités​

TypeScript​

Prise en charge de l'opérateur satisfies de TypeScript 4.9 (#13764, #13783, #13872 par @sosukesuzuki)​

const palette = {
  red: [255, 0, 0],
  green: "#00ff00",
  blue: [0, 0, 255]
} satisfies Record<Colors, string | RGB>;

Les Auto-Accesseurs dans les classes seront pris en charge dans une prochaine mise à jour corrective de la 2.8. Nous les avons temporairement exclus pour publier plus rapidement l'opérateur satisfies.

CLI​

Ne pas enregistrer le cache si l'option --write n'est pas spécifiée (#13016 par @Milly)​

# Prettier 2.7
$ prettier --cache foo.js
# This shows formatted contents of `foo.js`.
# Then cache is created and `foo.js` is flagged as already formatted.

$ prettier --cache --write foo.js
foo.js 2ms (cached)
# "... (cached)" means the file is already formatted, so nothing is done this time.

# Prettier 2.8
$ prettier --cache foo.js
# Show formatted contents of `foo.js`.

$ prettier --cache --write foo.js
foo.js 2ms
# `foo.js` is formatted now.

Ajout de l'option --cache-location (#13019 par @sosukesuzuki)​

Par défaut, l'interface CLI de Prettier enregistre le fichier de cache pour l'option --cache à l'emplacement ./node_modules/.cache/prettier/.prettier-cache. Ce chemin peut désormais être modifié :

prettier --write --cache --cache-location=my_cache_file src

Autres changements​

JavaScript​

Correction du parsing des docblocks (#13054 par @fisker)​

// With `--insert-pragma` flag

// Input
/* comment */
foo()

// Prettier 2.7
/**
 * /* comment
 *
 * @format
 */

foo();

// Prettier 2.8
/**
 * comment
 *
 * @format
 */

foo();

Correction du formatage des plages pour les corps de fonctions (#13173 par @thorn0)​

// Input
let fn = (() => {
  return; //
//^^^^^^^^^^ - range
});

// Prettier 2.7
let fn = (() => {
  return; //
};);

// Prettier 2.8
let fn = (() => {
  return; //
});

Correction du formatage incohérent des chaînes multilignes (#13274 par @GlebDolzhikov)​

// Input
const loremIpsumFooBazBar1 = 'Multiline string\
         Multiline string\
'

const loremIpsumFooBazBar2 = 'Multiline string\
         Multiline string\
         Multiline string'

// Prettier 2.7
const loremIpsumFooBazBar1 = "Multiline string\
         Multiline string\
";

const loremIpsumFooBazBar2 =
  "Multiline string\
         Multiline string\
         Multiline string";

// Prettier 2.8
const loremIpsumFooBazBar1 =
  "Multiline string\
         Multiline string\
";

const loremIpsumFooBazBar2 =
  "Multiline string\
         Multiline string\
         Multiline string";

TypeScript​

Correction des parenthèses dans les types de retour de fonctions inférées avec extends (#13289 par @GlebDolzhikov)​

// Input
type Foo<T> = T extends (...a: any[]) => (infer R extends string) ? R : never;

// Prettier 2.7
type Foo<T> = T extends (...a: any[]) => infer R extends string ? R : never;

// Prettier 2.8
type Foo<T> = T extends ((...a: any[]) => infer R extends string) ? R : never;

CSS​

Correction du formatage des sélecteurs longs :is, :where et :not (#13577 par @j-f1)​

Les pseudo-sélecteurs comme :is, :where et :not, qui peuvent prendre plusieurs sélecteurs en arguments, sont désormais formatés comme des appels de fonction dans d'autres langages. Auparavant, les virgules entre leurs "arguments" n'avaient pas de traitement particulier, ce qui entraînait un comportement de retour à la ligne déroutant. Des améliorations restent probablement à apporter ici - n'hésitez pas à ouvrir une issue avec un exemple de code si vous rencontrez un résultat inattendu.

/* Input */
:where(
  label > input:valid,
  label > textarea:not(:empty),
  label > button[disabled]
) ~ .errors > .error { display: none; }

/* Prettier 2.7 */
:where(label > input:valid, label > textarea:not(:empty), label
    > button[disabled])
  ~ .errors
  > .error {
  display: none;
}

/* Prettier 2.8 */
:where(
    label > input:valid,
    label > textarea:not(:empty),
    label > button[disabled]
  )
  ~ .errors
  > .error {
  display: none;
}

SCSS​

Correction : espace supplémentaire entre '#' et '{' (#13286 par @jspereiramoura)​

// Input
padding: var(--spacer#{(1) + 2});

// Prettier 2.7
padding: var(--spacer# {(1) + 2});

// Prettier 2.8
padding: var(--spacer#{(1) + 2});

Angular​

Insertion d'espaces dans les pipes (#13100 par @sosukesuzuki)​

<!-- Input -->
<tui-line-chart
  [value]="chart | tuiFilter : filter : range | tuiMapper : toNumbers : range"
></tui-line-chart>

<!-- Prettier 2.7 -->
<tui-line-chart
  [value]="chart | tuiFilter: filter:range | tuiMapper: toNumbers:range"
></tui-line-chart>

<!-- Prettier 2.8 -->
<tui-line-chart
  [value]="chart | tuiFilter : filter : range | tuiMapper : toNumbers : range"
></tui-line-chart>

Ember / Handlebars​

Formatage correct des blocs personnalisés "else if" (#13507 par @jamescdavis)​

Une transformation de template peut être utilisée pour créer des mots-clés de blocs personnalisés se comportant comme if. Cette mise à jour permet à printer-glimmer de reconnaître et formater correctement le cas "else if" lorsque "if" est un mot-clé personnalisé.

{{! Input }}
{{#when isAtWork}}
  Ship that code!
{{else when isReading}}
  You can finish War and Peace eventually...
{{else}}
  Go to bed!
{{/when}}

{{! Prettier 2.7 }}
{{#when isAtWork}}
  Ship that code!
{{else}}{{#when isReading}}
    You can finish War and Peace eventually...
  {{else}}
    Go to bed!
  {{/when}}{{/when}}

{{! Prettier 2.8 }}
{{#when isAtWork}}
  Ship that code!
{{else when isReading}}
  You can finish War and Peace eventually...
{{else}}
  Go to bed!
{{/when}}

Markdown​

Préservation des sauts de ligne dans le code en ligne avec --prose-wrap=preserve (#11373 par @andersk)​

<!-- Input -->
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod `tempor
incididunt` ut labore et dolore magna aliqua.

<!-- Prettier 2.7 -->
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod `tempor incididunt` ut labore et dolore magna aliqua.

<!-- Prettier 2.8 -->
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod `tempor
incididunt` ut labore et dolore magna aliqua.

MDX​

Amélioration de la prise en charge des ignorations de plages dans MDX (#12208 par @nickrttn)​

Ajoute la prise en charge des directives d'ignoration de plage Markdown dans MDX, en utilisant des commentaires JSX.

// Input
{/* prettier-ignore-start */}

export const Hello = () => {
  return (<p>
  Hello</p>)
}

{/* prettier-ignore-end */}

// Prettier 2.7 (throws an error)
TypeError: Cannot read properties of undefined (reading 'type')

// Prettier 2.8
{/* prettier-ignore-start */}

export const Hello = () => {
  return (<p>
  Hello</p>)
}

{/* prettier-ignore-end */}

API​

Mode "Doc Explorer" pour le Playground (#10183 par @thorn0)​

Changez l'option parser pour la valeur spéciale doc-explorer pour explorer la représentation intermédiaire de Prettier et voir son rendu avec différentes options.

Correction d'un problème d'impression de doc avec ifBreak dans group (#12362 par @fisker)​

// Input
//                                                                              |80
for (const number of [123_123_123, 123_123_123, 123_123_123, 123_123_123, 12]) {
}

// Prettier 2.7
for (const number of [
  123_123_123, 123_123_123, 123_123_123, 123_123_123, 12,
]) {
}

// Prettier 2.8
for (const number of [123_123_123, 123_123_123, 123_123_123, 123_123_123, 12]) {
}

Option "Rethrow embed errors" dans le Playground (#13227 par @thorn0)​

Auparavant, le comportement du Playground était incohérent avec celui de Prettier en local car il affichait les erreurs d'analyse des langages embarqués à des fins de débogage. Ce comportement est désormais contrôlé par une case à cocher et désactivé par défaut.

CLI​

Inférence du parser pour .lintstagedrc (#13081 par @OrRosenblatt)​

Un fichier .lintstagedrc (sans extension) est désormais traité avec les parsers json et yaml.