Aller au contenu principal

Prettier 2.7 : nouvelle option CLI --cache et syntaxe TypeScript 4.7 !

· 10 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 introduit une nouvelle option CLI --cache. Son activation utilise certains attributs comme clés de cache et ne formate les fichiers que s'ils ont été modifiés. Cela peut considérablement améliorer les performances de la CLI.

Nous avons également ajouté la prise en charge du formatage pour la syntaxe TypeScript 4.7 !

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.7 (#12896, #12897, #12898, #12900, #12921, #12924, #12959 par @sosukesuzuki)​

Prise en charge des nouvelles fonctionnalités de TypeScript 4.7 !

Expressions d'instanciation​
interface Box<T> {
  value: T;
}
function makeBox<T>(value: T) {
  return { value };
}
const makeHammerBox = makeBox<Hammer>;
const makeWrenchBox = makeBox<Wrench>;
Annotations de variance optionnelles​
interface Animal {
  animalStuff: any;
}
interface Dog extends Animal {
  dogStuff: any;
}
type Getter<out T> = () => T;
type Setter<in T> = (value: T) => void;
Contraintes extends pour infer​
type FirstString<T> = T extends [infer S extends string, ...unknown[]]
  ? S
  : never;

CLI​

Ajout des options --cache et --cache-strategy (#12800 par @sosukesuzuki)​

Deux nouvelles options CLI ont été ajoutées pour un système de cache similaire à celui d'ESLint.

Consultez la documentation pour plus de détails.

--cache​

Lorsque cette option est activée, les valeurs suivantes servent de clés de cache et le fichier n'est formaté que si l'une d'elles change :

  • Version de Prettier

  • Options

  • Version de Node.js

  • (si --cache-strategy est content) contenu du fichier

  • (si --cache-strategy est metadata) métadonnées du fichier, comme les horodatages

prettier --write --cache src
--cache-strategy​

Stratégie utilisée par le cache pour détecter les fichiers modifiés. Peut être metadata ou content. Si aucune stratégie n'est spécifiée, content sera utilisé.

prettier --write --cache --cache-strategy metadata src

Autres changements​

JavaScript​

Conservation des lignes vides entre les spécificateurs d'exportation (#12746 par @sosukesuzuki)​

// Input
export {
  // a
  foo1,

  // b
  bar1,
  baz1,
} from "mod";

// Prettier 2.6
export {
  // a
  foo1,
  // b
  bar1,
  baz1,
} from "mod";

// Prettier 2.7
export {
  // a
  foo1,

  // b
  bar1,
  baz1,
} from "mod";

Reconnaissance élargi des motifs d'appelants comme "test call callee". (#12779 par @HosokawaR)​

Ajoute la prise en charge des appels de test comme test.describe de Playwright.

// Input
test.step("does something really long and complicated so I have to write a very long name for the test", () => {});

test.describe("does something really long and complicated so I have to write a very long name for the test", () => {});

test.describe.only("does something really long and complicated so I have to write a very long name for the test", () => {});

test.describe.parallel("does something really long and complicated so I have to write a very long name for the test", () => {});

test.describe.parallel.only("does something really long and complicated so I have to write a very long name for the testThis is a very", () => {});

test.describe.serial("does something really long and complicated so I have to write a very long name for the test", () => {});

test.describe.serial.only("does something really long and complicated so I have to write a very long name for the test", () => {});

// Prettier 2.6
test.step(
  "does something really long and complicated so I have to write a very long name for the test",
  () => {}
);

test.describe(
  "does something really long and complicated so I have to write a very long name for the test",
  () => {}
);

test.describe.only(
  "does something really long and complicated so I have to write a very long name for the test",
  () => {}
);

test.describe.parallel(
  "does something really long and complicated so I have to write a very long name for the test",
  () => {}
);

test.describe.parallel.only(
  "does something really long and complicated so I have to write a very long name for the testThis is a very",
  () => {}
);

test.describe.serial(
  "does something really long and complicated so I have to write a very long name for the test",
  () => {}
);

test.describe.serial.only(
  "does something really long and complicated so I have to write a very long name for the test",
  () => {}
);

// Prettier 2.7
test.step("does something really long and complicated so I have to write a very long name for the test", () => {});

test.describe("does something really long and complicated so I have to write a very long name for the test", () => {});

test.describe
  .only("does something really long and complicated so I have to write a very long name for the test", () => {});

test.describe
  .parallel("does something really long and complicated so I have to write a very long name for the test", () => {});

test.describe.parallel
  .only("does something really long and complicated so I have to write a very long name for the testThis is a very", () => {});

test.describe
  .serial("does something really long and complicated so I have to write a very long name for the test", () => {});

test.describe.serial
  .only("does something really long and complicated so I have to write a very long name for the test", () => {});

Correction du formatage des commentaires dans (#12860 par @HosokawaR)​

Cette modification aligne le formatage des commentaires dans exports avec celui des commentaires dans import.

Bien que ce changement n'affecte pas le formatage des commentaires dans import, le journal des modifications suivant inclut des exemples de commentaires dans import à titre de référence.

// Input
export {
  foo,

  bar as  // comment
		 baz,
}

import {
  foo,

  bar as  // comment
		 baz,
} from 'foo'

// Prettier 2.6
export {
  foo,
  bar as baz, // comment
};

import {
  foo,
  // comment
  bar as baz,
} from "foo";

// Prettier 2.7
export {
  foo,
  // comment
  bar as baz,
};

import {
  foo,
  // comment
  bar as baz,
} from "foo";

TypeScript​

Utilisation de as au lieu de : pour le parseur babel-ts (#12706 par @HosokawaR)​

// Input
[x as any] = x;

// Prettier 2.6
[x: any] = x;

// Prettier 2.7
[x as any] = x;

Correction du formatage pour les Enum TypeScript avec membres calculés (#12930 par @HosokawaR)​

// Input
enum A {
  [i++],
}

// Prettier 2.6
enum A {
  i++,
}

// Prettier 2.7
enum A {
  [i++],
}

Arrêt de l'analyse du code invalide (#12982 par @fisker)​

// Input
const object = ({ methodName() });

// Prettier 2.6
const object = { methodName(); };

// Prettier 2.7
SyntaxError: Unexpected token. (1:29)
> 1 | const object = ({ methodName() });
    |                             ^^

HTML​

Prise en charge du formatage de l'API Speculation Rules en HTML (#12882 par @sosukesuzuki)​

Consultez https://web.dev/speculative-prerendering/ pour plus d'informations sur l'API Speculation Rules.

<!-- Input -->
<script type="speculationrules">
  {
   "prerender": [
  {"source": "list", "urls": ["https://a.test/foo"]}
  ]
  }
</script>


<!-- Prettier 2.6 -->
<script type="speculationrules">
  {
   "prerender": [
  {"source": "list", "urls": ["https://a.test/foo"]}
  ]
  }
</script>

<!-- Prettier 2.7 -->
<script type="speculationrules">
  {
    "prerender": [{ "source": "list", "urls": ["https://a.test/foo"] }]
  }
</script>

Vue​

Autorisation du formatage des expressions de template Vue écrites en TypeScript (#12584 par @sosukesuzuki)​

<!-- input -->
<script setup lang="ts">
let x: string | number = 1
</script>

<template>
  {{ (x      as      number).toFixed(2) }}
</template>

<!-- Prettier 2.6 -->
<script setup lang="ts">
let x: string | number = 1
</script>

<template>
  {{ (x      as      number).toFixed(2) }}
</template>

<!-- Prettier 2.7 -->
<script setup lang="ts">
let x: string | number = 1;
</script>

<template>
  {{ (x as number).toFixed(2) }}
</template>

Inférence du parseur Stylus pour les blocs de style Vue SFC (#12707 par @lsdsjy)​

Les blocs <style lang="stylus"> dans les Vue SFC peuvent être traités par le plugin approprié si disponible.

Éviter l'impression d'attributs par ligne dans les blocs Vue SFC (#12895 par @sosukesuzuki)​

<!-- Input (singleAttributePerLine: true) -->
<script lang="ts" setup>
</script>

<!-- Prettier 2.6 -->
<script
 lang="ts"
 setup
>
</script>

<!-- Prettier 2.7 -->
<script lang="ts" setup>
</script>

Angular​

Correction du formatage des propriétés raccourcies (#12993 par @sosukesuzuki, @fisker)​

<!-- Input -->
<ng-container *ngTemplateOutlet="someTmpl; context: { app }"></ng-container>

<!-- Prettier 2.6 -->
<ng-container
  *ngTemplateOutlet="someTmpl; context: { app: this.app }"
></ng-container>

<!-- Prettier 2.7 -->
<ng-container *ngTemplateOutlet="someTmpl; context: { app }"></ng-container>

GraphQL​

Ajout de la prise en charge de l'impression des nœuds SchemaExtension (#12519 par @trevor-scheer)​

# Input
extend schema { subscription: Subscription }
extend schema @directive

# Prettier 2.6
N/A - throws error

# Prettier 2.7
extend schema {
  subscription: Subscription
}
extend schema @directive

Correction du formatage des descriptions sur une seule ligne et vides (#12608 par @chimurai, @fisker)​

# Input
""" Customer """
type Person {
  name: String
}

""""""
type Person {
  name: String
}

# Prettier 2.6.2
"""
 Customer
"""
type Person {
  name: String
}

"""

"""
type Person {
  name: String
}

# Prettier 2.6.2 (second format)
"""
Customer
"""
type Person {
  name: String
}

"""

"""
type Person {
  name: String
}

# Prettier 2.7
"""
Customer
"""
type Person {
  name: String
}

"""
"""
type Person {
  name: String
}

CLI​

Affichage du nombre de fichiers nécessitant des modifications (#12561 par @Harry-Hopkinson)​

# Prettier 2.6
$ prettier src --check
Checking formatting...
[warn] src/fileA.js
[warn] Code style issues found in the above file(s). Forgot to run Prettier?

# Prettier 2.7
$ prettier src --check
Checking formatting...
[warn] src/fileA.js
[warn] src/fileB.js
[warn] Code style issues found in 2 files. Forgot to run Prettier?

$ prettier src --check
Checking formatting...
[warn] src/fileA.js
[warn] Code style issues found in the above file. Forgot to run Prettier?

Inférence du parseur pour les fichiers .importmap (#12603 par @fisker)​

Formate les fichiers .importmap comme des fichiers JSON.

Simplification du test de performance (#12682, #12698 par @fisker)​

Lorsque --debug-benchmark ou --debug-repeat est passé :

  1. Le CLI saute l'affichage du code à l'écran et l'écriture des fichiers

  2. Définit automatiquement le niveau de log sur debug