Aller au contenu principal

Prettier 3.5 : Nouvelle option objectWrap, option experimentalOperatorPosition et support des fichiers de configuration TypeScript !

· 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 inclut de nombreuses corrections de bugs ainsi que les nouvelles fonctionnalités suivantes :

  • Support de la nouvelle option objectWrap

  • Support de la nouvelle option expérimentale experimentalOperatorPosition

  • Support des fichiers de configuration TypeScript

Consultez chaque section pour plus de détails.

Si vous appréciez Prettier et souhaitez soutenir notre travail, envisagez de nous sponsoriser directement via notre OpenCollective ou en soutenant les projets dont nous dépendons, comme typescript-eslint, remark et Babel. Merci pour votre soutien continu !

Pourquoi nous avons ajouté deux nouvelles options​

Cette version introduit deux nouvelles options. Si vous connaissez la Philosophie des options de Prettier, vous pourriez vous demander : « Pourquoi ajouter de nouvelles options ? » Soyez assurés que ce ne sont pas des options classiques et qu'elles ne violent pas notre philosophie.

Comme son nom l'indique, experimentalOperatorPosition est expérimentale. Nous avons une politique pour les options expérimentales, ce qui signifie qu'elle sera finalement supprimée. À l'avenir, le nouveau comportement pourrait devenir celui par défaut, ou cette option pourrait être abandonnée. Si vous suivez Prettier depuis un moment, vous vous souvenez peut-être que nous avions ajouté une option experimentalTernaries, et cette nouvelle option suit la même approche.

objectWrap est un peu spéciale. Depuis longtemps, nous luttons avec la mise en forme des objets multi-lignes. Nous n'avons pas encore trouvé la solution parfaite, nous avons donc opté pour une approche semi-manuelle. Pour plus de détails, consultez notre Justification. Le comportement actuel n'est pas idéal car le résultat final peut varier selon la manière dont l'utilisateur écrit son code. Pour offrir un format plus cohérent, nous avons décidé d'introduire l'option objectWrap.

Bien que cette version inclue deux nouvelles options, nous tenons à souligner que nous n'avons pas oublié la philosophie des options de Prettier. Ces options répondent à des défis spécifiques et anciens de mise en forme sans compromettre notre philosophie.

Principales fonctionnalités​

JavaScript​

Ajout d'une option expérimentale pour les sauts de ligne avant les opérateurs binaires (#7111 par @btmills)​

Cette fonctionnalité est implémentée derrière le drapeau --experimental-operator-position <start|end>.

Lorsque les expressions binaires nécessitent des sauts de ligne, start place les opérateurs au début des nouvelles lignes. Positionner les opérateurs binaires en début de ligne les rend plus visibles et facilite la lecture.

// Input
var a = Math.random() * (yRange * (1 - minVerticalFraction)) + minVerticalFraction * yRange - offset;

// `experimentalOperatorPosition: end` (default behavior)
var a =
  Math.random() * (yRange * (1 - minVerticalFraction)) +
  minVerticalFraction * yRange -
  offset;

// `experimentalOperatorPosition: start`
var a =
  Math.random() * (yRange * (1 - minVerticalFraction))
  + minVerticalFraction * yRange
  - offset;

Implémentation de l'option objectWrap (#16163 par @pauldraper, @sosukesuzuki)​

Prettier a historiquement utilisé une mise en forme semi-manuelle pour les littéraux d'objets JavaScript multi-lignes.

Concrètement, un objet est conservé sur plusieurs lignes s'il y a un saut de ligne avant la première propriété, même s'il pourrait tenir sur une seule ligne. Voir Objets multi-lignes pour plus de détails.

Bien que ce comportement reste celui par défaut, --object-wrap=collapse ignore les espaces lors de la mise en forme des littéraux d'objets.

// Input
const obj1 = {
  name1: "value1", name2: "value2",
};

const obj2 = { name1: "value1",
  name2: "value2",
};

// Prettier 3.4
const obj1 = {
  name1: "value1",
  name2: "value2",
};

const obj2 = { name1: "value1", name2: "value2" };

// Prettier 3.5 (with `--object-wrapping=collapse`)
const obj1 = { name1: "value1", name2: "value2" };

const obj2 = { name1: "value1", name2: "value2" };

API​

Ajout de la prise en charge des fichiers de configuration TypeScript (#16828 par @itsyoboieltr et @fisker)​

Ajout de nouveaux formats de fichiers de configuration :

  • .prettierrc.ts

  • .prettierrc.mts

  • .prettierrc.cts

  • prettier.config.ts

  • prettier.config.mts

  • prettier.config.cts

Note :

Actuellement, la prise en charge de TypeScript dans Node.js est expérimentale.

Pour que les fichiers de configuration TypeScript fonctionnent, Node.js>=22.6.0 est requis et Node.js v22 nécessite --experimental-strip-types.

Vous pouvez exécuter Prettier avec

node --experimental-strip-types node_modules/prettier/bin/prettier.cjs . --write

ou

NODE_OPTIONS="--experimental-strip-types" prettier . --write

ou

Par exemple, avec tsx, vous pouvez

node --import tsx node_modules/prettier/bin/prettier.cjs . --write

ou

tsx node_modules/prettier/bin/prettier.cjs . --write

Autres changements​

JavaScript​

Amélioration des cas limites de retour à la ligne dans JSX (#16700 par @seiyab)​

// Input
br_triggers_expression_break =
  <div><br />
  text text text text text text text text text text text {this.props.type} </div>

// Prettier 3.4
br_triggers_expression_break = (
  <div>
    <br />
    text text text text text text text text text text text {
      this.props.type
    }{" "}
  </div>
);

// Prettier 3.5
br_triggers_expression_break = (
  <div>
    <br />
    text text text text text text text text text text text{" "}
    {this.props.type}{" "}
  </div>
);

Flow​

Prise en charge des paramètres de type const dans Flow (#16947 par @gkz)​

function f<const T>(): void {}

// Prettier 3.4
// Parse error

// Prettier 3.5
function f<const T>(): void {}

CSS​

Saut de ligne avant les valeurs séparées par des virgules nécessitant un retour à la ligne (#16907 par @seiyab)​

/* Input */
a {
  background-image:
    linear-gradient(to bottom, rgb(255 255 0 / 50%), rgb(0 0 255 / 50%)),
    url("catfront.png");
}

/* Prettier 3.4 */
a {
  background-image: linear-gradient(
      to bottom,
      rgb(255 255 0 / 50%),
      rgb(0 0 255 / 50%)
    ),
    url("catfront.png");
}

/* Prettier 3.5 */
a {
  background-image:
    linear-gradient(to bottom, rgb(255 255 0 / 50%), rgb(0 0 255 / 50%)),
    url("catfront.png");
}

Vue​

Prise en charge du raccourci .prop (#16920 par @fisker)​

.foo est un raccourci pour v-bind:foo.prop. Voir v-bind directive intégrée pour plus de détails.

<!-- Input -->
<template>
  <button .disabled="   a &&b ">Click!</button>
</template>

<!-- Prettier 3.4 -->
<template>
  <button .disabled="   a &&b ">Click!</button>
</template>

<!-- Prettier 3.5 -->
<template>
  <button .disabled="a && b">Click!</button>
</template>

Angular​

Améliorer les sauts de ligne dans les blocs ICU (#16922 par @fisker)​

<!-- Input -->
<span>The author is {gender, select, male {male} female {female} other {other}}</span>
<span>The author is <span>male consectetur adipiscing elit, sed do eiusmod</span></span>

<!-- Prettier 3.4 -->
<span
  >The author is {gender, select, male {male} female {female} other {other}
}</span>
<span
  >The author is
  <span>male consectetur adipiscing elit, sed do eiusmod</span></span
>

<!-- Prettier 3.5 -->
<span
  >The author is
  {gender, select, male {male} female {female} other {other}}</span
>
<span
  >The author is
  <span>male consectetur adipiscing elit, sed do eiusmod</span></span
>

Amélioration des retours à la ligne dans les blocs ICU (#16922 par @fisker)​

<!-- Input -->
{active, select,
  true {
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod temp
  }
  false {
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod temp
  }
}

<!-- Prettier 3.4 -->
{active, select,
  true {
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod temp

  }
  false {
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod temp

  }
}

<!-- Prettier 3.5 -->
{active, select,
  true {
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod temp
  }
  false {
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod temp
  }
}

Ember / Handlebars​

Gérer les balises <style> et <pre> dans Handlebars/Glimmer (#15087 par @jurgenwerk)​

{{!-- Input --}}
<pre>
  cd ~
  ls
  echo "hey"
</pre>
<style>
  .red { color: red }
  .blue {
    color: red
  }
</style>

{{!-- Prettier 3.4 --}}
<pre>
  cd ~ ls echo "hey"
</pre>
<style>
  .red { color: red } .blue { color: blue }
</style>

{{!-- Prettier 3.5 --}}
<pre>
  cd ~
  ls
  echo "hey"
</pre>
<style>
  .red {
    color: red;
  }
  .blue {
    color: red;
  }
</style>

Markdown​

Markdown​

U+FF5E comme ponctuation CJK (#16832 par @tats-u)​

Le caractère U+FF5E TILDE PLEINE CHASSE (～) est couramment utilisé comme substitut du U+301C TIRET ONDULÉ (〜) sous Windows en japonais. Les caractères alphabétiques pleine chasse sont moins utilisés dans les documents Markdown que dans d'autres types de documents (par exemple les documents Microsoft Office), et le tilde pleine chasse est beaucoup moins utilisé dans ce contexte comparé aux chiffres et lettres pleine chasse. Nous pouvons donc considérer que les tildes pleine chasse dans les documents Markdown existants représentent une forme alternative du tiret ondulé et font partie de la ponctuation CJK.

<!-- Input (--prose-wrap=never) -->
a 字 a 字 a 字
60～
100点
60〜
100点

<!-- Prettier 3.4 -->
a 字 a 字 a 字 60～ 100点 60〜10点


<!-- Prettier 3.5 -->
a 字 a 字 a 字 60～10点 60〜100点

Le premier symbole entre 60 et 100 dans l'exemple ci-dessus est U+FF5E TILDE PLEINE CHASSE (～) et le second est U+301C TIRET ONDULÉ (〜).

API​

Prise en charge de la lecture de configuration depuis package.json avec syntaxe JSONC sur Bun (#17041 par @fisker)​

Bun 1.2 a ajouté la prise en charge JSONC dans package.json. Dans les versions précédentes de Prettier, la configuration prettier était ignorée. Depuis Prettier 3.5, nous pouvons lire la configuration prettier à partir de celui-ci sans erreur.

Cependant, comme il s'agit d'une fonctionnalité spécifique à Bun et non prise en charge par Node.js, cela ne fonctionne que lorsque Prettier est exécuté avec Bun.

Note importante : Prettier utilise par défaut le parser json-stringify pour formater les fichiers package.json. Pour formater un fichier package.json avec syntaxe JSONC, vous devez surcharger l'option du parser.

export default {
  overrides: [
    {
      files: ["package.json"],
      options: {
        parser: "jsonc",
      },
    },
  ],
};

Si vous ne pouvez pas mettre à jour Prettier, vous pouvez toujours utiliser la syntaxe JSONC dans package.json, mais sans y placer votre configuration prettier. Vous devrez utiliser un autre fichier de configuration.

Divers​

Utiliser le point d'entrée ESM pour require(ESM) (#16958 par @tats-u)​

information

Ce changement a été annulé dans la v3.5.2, consultez #17139 pour plus de détails.

Node.js 22.12 ou ultérieur peut (expérimentalement) charger des modules ESM avec la fonction require sans drapeaux d'exécution. Ce changement permet à require de charger Prettier sans utiliser le point d'entrée CommonJS, en important presque exclusivement le point d'entrée ESM.

La fonctionnalité de chargement des modules ES avec require n'est pas complètement stable mais peut être utilisée sans ExperimentalWarning à partir de Node 22.13.