Aller au contenu principal

Prettier 2.5 : Syntaxe TypeScript 4.5 et commentaires MDX v2 !

· 7 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 ajoute le support de la nouvelle syntaxe de TypeScript 4.5 et des commentaires MDX v2 !

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​

Éviter le décalage supplémentaire dans les corps de fonctions fléchées avec des types longs (#11515 par @kachkaev et @thorn0)​

Depuis Prettier 2.3.0, les déclarations de types dans les fonctions fléchées pouvaient affecter l'indentation du corps de la fonction. Modifier la longueur de l'annotation de type pouvait générer d'importants diffs et ainsi augmenter les risques de conflits git. Pour prévenir cela, le décalage du corps de fonction a été stabilisé.
Note : Ce changement peut impacter un grand nombre de lignes dans votre codebase.

// Input
const MyComponentWithLongName: React.VoidFunctionComponent<MyComponentWithLongNameProps> = ({ x, y }) => {
  const a = useA();
  return <div>{x + y + a}</div>;
};

// Prettier 2.2 and below
const MyComponentWithLongName: React.VoidFunctionComponent<MyComponentWithLongNameProps> = ({
  x,
  y,
}) => {
  const a = useA();
  return <div>{x + y + a}</div>;
};

// Prettier 2.4
const MyComponentWithLongName: React.VoidFunctionComponent<MyComponentWithLongNameProps> =
  ({ x, y }) => {
    const a = useA();
    return <div>{x + y + a}</div>;
  };

// Prettier 2.5
const MyComponentWithLongName: React.VoidFunctionComponent<
  MyComponentWithLongNameProps
> = ({ x, y }) => {
  const a = useA();
  return <div>{x + y + a}</div>;
};

Support de TypeScript 4.5 (#11721, #11723, #11813 par @sosukesuzuki)​

Nous avons ajouté le support des nouvelles fonctionnalités syntaxiques de TypeScript 4.5 :

Modificateurs type sur les noms d'import​
// Example
import { type A } from "mod";

Vérifications de présence des champs privés​
// Example
class Foo {
  #prop1;
  method() {
    return #prop1 in this;
  }
}

Assertions d'import​
// Example
import obj from "./something.json" assert { type: "json" };

Prise en charge des extensions .mts et .cts​

Prettier formatera désormais les fichiers avec les extensions .mts et .cts comme du TypeScript.

HTML​

Regrouper les attributs class HTML sur une seule ligne (#11827 par @jlongster)​

Annule #7865.

Bien que cette fonctionnalité visait à aider les utilisateurs de bibliothèques CSS comme Tailwind qui génèrent souvent de nombreuses classes sur les éléments, il est apparu que nos heuristiques pour découper la liste des classes sur plusieurs lignes ne produisaient pas systématiquement de bons résultats. Nous réfléchissons toujours à de meilleures façons de formater le HTML avec de nombreuses classes — n'hésitez pas à discuter avec nous.

<!-- Input -->
<div
  class="SomeComponent__heading-row d-flex flex-column flex-lg-row justify-content-start justify-content-lg-between align-items-start align-items-lg-center"
></div>

<!-- Prettier 2.4 -->
<div
  class="
    SomeComponent__heading-row
    d-flex
    flex-column flex-lg-row
    justify-content-start justify-content-lg-between
    align-items-start align-items-lg-center
  "
></div>

<!-- Prettier 2.5 -->
<div
  class="SomeComponent__heading-row d-flex flex-column flex-lg-row justify-content-start justify-content-lg-between align-items-start align-items-lg-center"
></div>

MDX​

Ajout du support de la syntaxe de commentaires MDX v2 (#11563 par @wooorm)​

Cela ajoute un support basique pour la syntaxe de commentaires MDX v2 (commentaires de style JavaScript) en complément du support existant pour la syntaxe MDX v1 (commentaires de style HTML).

Remarque : Prettier ne prend actuellement en charge que la nouvelle syntaxe de commentaires pour les commentaires sur une seule ligne (afin que {/* prettier-ignore */} puisse être utilisé), et ne prend pas en charge le reste de MDX v2.

Input:
{/*A comment*/}

Prettier 2.4:
{/_A comment_/}

Prettier 2.5:
{/*A comment*/}

Autres changements​

JavaScript​

Correction des parenthèses autour des expressions de séquence en tant que corps d'une chaîne de flèches (#11593 par @bakkot)​

Les parenthèses requises autour des expressions de séquence en tant que corps des fonctions fléchées sont désormais préservées pour les flèches chaînées. Auparavant, Prettier les supprimait, ce qui entraînait une syntaxe invalide.

// Input
const f = () => () => (0, 1);

// Prettier 2.4
const f = () => () => 0, 1;

// Prettier 2.5
const f = () => () => (0, 1);

Ignorer les erreurs de syntaxe en mode non strict (#11750 par @fisker, #11778 par @sosukesuzuki)​

Le mode strict de JavaScript ajoute plusieurs erreurs utiles pour prévenir les erreurs. Certaines de ces erreurs sont des erreurs de syntaxe qui se produisent au moment de l'analyse. Comme l'objectif de Prettier est de formater tout code JavaScript syntaxiquement valide, qu'il s'exécute ou non, nous avons choisi de laisser la vérification de ces erreurs aux linters, compilateurs et à l'environnement d'exécution.

// Input
function foo() { var bar = 1; delete bar; }

// Prettier 2.4
SyntaxError: Deleting local variable in strict mode. (1:31)
> 1 | function foo() { var bar = 1; delete bar; }
    |                               ^

// Prettier 2.5
function foo() {
  var bar = 1;
  delete bar;
}

Respecter l'espacement entre les expressions et les parenthèses dans le CSS intégré (#11800 par @sosukesuzuki)​

// Input
const paragraph2 = css`
  transform1: ${expr}(30px);
  transform2: ${expr} (30px);
`;

// Prettier 2.4
const paragraph2 = css`
  transform1: ${expr} (30px);
  transform2: ${expr} (30px);
`;

// Prettier 2.5
const paragraph2 = css`
  transform1: ${expr}(30px);
  transform2: ${expr} (30px);
`;

Prise en charge de la syntaxe ES2022 class-private-fields-in dans l'analyseur espree (#11835 par @fisker)​

// Example
class Foo {
  #brand;
  static isC(obj) {
    return #brand in Foo;
  }
}

TypeScript​

Suppression des parenthèses inutiles pour les décorateurs (#11717, #11849 par @sosukesuzuki)​

// Input
class Test {
  @foo`bar`
  test1: string = "test"

  @test().x("global").y()
  test2: string = "test";
}

// Prettier 2.4
class Test {
  @(foo`bar`)
  test: string = "test"

  @(test().x("global").y())
  test2: string = "test";
}

// Prettier 2.5
class Test {
  @foo`bar`
  test: string = "test"

  @test().x("global").y()
  test2: string = "test";
}

SCSS​

Amélioration du formatage de @use with (#11637 par @sosukesuzuki)​

// Input
@use 'library' with (
  $black: #222,
  $border-radius: 0.1rem,
  $font-family: 'Helvetica, sans-serif'
);

// Prettier 2.4
@use "library" with
  ($black: #222, $border-radius: 0.1rem, $font-family: "Helvetica, sans-serif");

// Prettier 2.5
@use 'library' with (
  $black: #222,
  $border-radius: 0.1rem,
  $font-family: 'Helvetica, sans-serif'
);

Correction de l'erreur de formatage de @forward with (#11683 par @sriramarul, @sosukesuzuki)​

// Input
@forward 'foo.scss' with ($components: red);

// Prettier 2.4
TypeError: Cannot read properties of undefined (reading 'type')

// Prettier 2.5
@forward "foo.scss" with (
  $components: red
);

Ember / Handlebars​

Utilisation du type de guillemets opposé pour les guillemets à l'intérieur des instructions mustache dans les attributs (#11524 par @bmaehr)​

{{!-- Input --}}
<div title="{{t 'login.username.description'}}" />

{{!-- Prettier 2.5 --}}
<div title="{{t 'login.username.description'}}" />

{{!-- Prettier 2.4 --}}
<div title="{{t "login.username.description"}}" />

Markdown​

Conservation des virgules finales pour les paramètres de type dans le TSX intégré (#11685 par @sosukesuzuki)​

La virgule finale est nécessaire pour empêcher TypeScript d'interpréter <T> comme le début d'une expression JSX.

<!-- Input  -->
```tsx
const test = <T,>(value: T) => {};
```

<!-- Prettier 2.4 -->
```tsx
const test = <T>(value: T) => {};
```

<!-- Prettier 2.5 -->
```tsx
const test = <T,>(value: T) => {};
```