Aller au contenu principal

Prettier 1.16 : Améliorations HTML et meilleure gestion des CRLF

· 11 minutes de lecture
Ika
Ika
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 améliore le formatage HTML et inclut une meilleure gestion des CRLF, de nouvelles fonctionnalités syntaxiques ainsi que plusieurs corrections de bugs.

Principales fonctionnalités​

HTML​

Respecter les sauts de ligne environnants (#5596 par @ikatyang)​

Auparavant, Prettier plaçait toujours les éléments sur une seule ligne s'ils ne dépassaient pas la printWidth, mais cela ne fonctionne pas pour les éléments utilisés comme blocs if-else ou destinés à contenir plusieurs éléments. Pour résoudre ce problème, nous respecterons désormais les sauts de ligne environnants pour tous les éléments, car il n'existe pas de moyen fiable de déterminer s'ils sont utilisés de cette manière.

<!-- Input -->
<div class="list">
  <div class="item">Jan</div>
</div>
<a v-if="i !== -1" href="#" @click.prevent="select(i)">
  {{ i }}
</a>
<span v-else>
  <slot name="ellipsis">&hellip;</slot>
</span>

<!-- Output (Prettier 1.15) -->
<div class="list"><div class="item">Jan</div></div>
<a v-if="i !== -1" href="#" @click.prevent="select(i)"> {{ i }} </a>
<span v-else> <slot name="ellipsis">&hellip;</slot> </span>

<!-- Output (Prettier 1.16) -->
<div class="list">
  <div class="item">Jan</div>
</div>
<a v-if="i !== -1" href="#" @click.prevent="select(i)">
  {{ i }}
</a>
<span v-else>
  <slot name="ellipsis">&hellip;</slot>
</span>

Général​

Meilleure gestion des CRLF (#5494 par @ikatyang)​

Vous avez peut-être remarqué des problèmes de formatage étranges uniquement sur Windows. Nombre de ces problèmes étaient causés par notre gestion des fins de ligne CR-LF. Dans cette version, nous avons résolu ces problèmes en normalisant les sauts de ligne avant et après le formatage.

JavaScript​

Améliorer le modèle utilisé pour les hooks React (#5608 par @j-f1)​

// Input
function helloWorld() {
  useEffect(() => {
    // do something
  }, [props.value])
}

// Output (Prettier 1.15)
function helloWorld() {
  useEffect(
    () => {
      // do something
    },
    [props.value]
  );
}

// Output (Prettier 1.16)
function helloWorld() {
  useEffect(() => {
    // do something
  }, [props.value]);
}

Renommer l'analyseur babylon en babel (#5647 par @wuweiweiwu)​

L'analyseur de Babel, babylon, a été renommé @babel/parser dans Babel 7. Nous avons également renommé notre analyseur babylon en babel pour réduire la confusion.

Le nom d'analyseur babylon est désormais déprécié mais fonctionne toujours.

Si vous devez modifier votre configuration suite à ce changement, veuillez consulter notre documentation sur l'option parser, en particulier la note en bas de page.

Flow​

Ajouter l'analyseur babel-flow (#5685 par @ikatyang)​

Les analyseurs babel et flow prennent tous deux en charge la syntaxe Flow par défaut, mais certains cas limites présentent des ambiguïtés syntaxiques. Par défaut, l'analyseur Flow de Babel interprète le code ambigu comme du JS standard, tandis que l'analyseur natif Flow l'interprète comme de la syntaxe Flow. Pour résoudre ce problème, nous avons ajouté l'option d'analyseur babel-flow qui utilise l'analyseur de Babel mais privilégie la syntaxe Flow en cas d'ambiguïté.

// Input
const Theme = React.createContext<"light" | "dark">("light");

// Output (Prettier 1.15, --parser babylon)
const Theme = (React.createContext < "light") | ("dark" > "light");

// Output (Prettier 1.16, --parser babel-flow)
const Theme = React.createContext<"light" | "dark">("light");

CLI​

Ajouter un indicateur --check (#5629 par @kachkaev)​

Utiliser --list-different avec la commande CLI prettier fait quitter Prettier avec un code d'erreur si un ou plusieurs fichiers ne sont pas formatés. Cela fonctionne bien mais ne fournit aucune information de sortie hormis la liste des fichiers mal formatés. Peu convivial pour les nouveaux contributeurs, nous avons donc ajouté une option --check produisant une sortie plus lisible.

# Prettier 1.15
$ prettier *.js --list-different
unformatted.js

# Prettier 1.16
$ prettier *.js --check
Checking formatting...
unformatted.js
Code style issues found in the above file(s). Forgot to run Prettier?

Autres changements​

Général​

Corriger le formatage inattendu causé par le formatage par plage (#5632 par @lhchavez)​

// Input
something("something", () => {
  const something = {
    something: [
      {
        long1: "longlonglonglonglonglonglonglonglonglonglonglong",
        long2: "longlonglonglonglonglonglonglonglonglonglonglong",
      }
    ]
  };
});

// Output (Prettier 1.15, --range-start 100 --range-end 120)
something("something", () => {
  const something = { something: [{ long1: "longlonglonglonglonglonglonglonglonglonglonglong", long2: "longlonglonglonglonglonglonglonglonglonglonglong" }] };
});

// Output (Prettier 1.16, --range-start 100 --range-end 120)
something("something", () => {
  const something = {
    something: [
      {
        long1: "longlonglonglonglonglonglonglonglonglonglonglong",
        long2: "longlonglonglonglonglonglonglonglonglonglonglong",
      }
    ]
  };
});

API​

Autoriser les instances de plugin dans le champ plugins des options de formatage (#5763 par @Kingwl)​

Auparavant, les instances de plugin étaient inexplicablement interdites dans le champ plugins des options de formatage alors que cela devrait être autorisé. Nous avons corrigé ce problème dans Prettier 1.16.

const prettier = require("prettier");
const fooPlugin = require("./path/to/foo-plugin");
const formatted = prettier.format("foo-code", {
  plugins: [fooPlugin],
  parser: "foo-parser",
});
// Prettier 1.15: Error
// Prettier 1.16: No error

Standalone​

Suppression de l'appel require() dynamique dans le bundle autonome (#5612 par @j-f1)​

Auparavant, un appel require() dynamique était présent dans le fichier standalone.js conçu pour une utilisation dans les navigateurs. Bien qu'il ne soit pas réellement exécuté, cela provoquait des avertissements dans des outils comme webpack. Nous avons ajusté le script de build pour supprimer cet appel require() dans le bundle autonome de Prettier 1.16.

TypeScript​

Gestion correcte de // dans TSX (#5728 par @JamesHenry)​

Auparavant, placer // comme enfant d'un élément JSX en TypeScript provoquait une erreur car il était interprété comme un commentaire. Prettier 1.16 corrige ce problème.

// Input
const link = <a href="example.com">http://example.com</a>

// Output (Prettier 1.15)
// Error: Comment location overlaps with node location

// Output (Prettier 1.16)
const link = <a href="example.com">http://example.com</a>;

Suppression des parenthèses redondantes autour des annotations de type (#5724 par @flurmbo)​

// Input
class Foo {
  bar: (() => boolean);
}

// Output (Prettier 1.15)
class Foo {
  bar: (() => boolean);
}

// Output (Prettier 1.16)
class Foo {
  bar: () => boolean;
}

JavaScript​

Ne pas traiter something.connect() comme une composition fonctionnelle (#5739 par @makepost)​

Un format spécial pour les appels connect() avait été introduit pour améliorer le formatage Redux il y a plusieurs versions, mais il existe de nombreux autres cas d'utilisation pour des fonctions nommées connect qui ne devraient pas être formatées ainsi. Comme la plupart de ces cas concernaient une méthode connect, nous ne traitons plus les appels foo.connect() comme de la composition fonctionnelle.

// Input
app.connect("activate", async () => {
  await data.load();
  win.show_all();
});
const ConnectedComponent = connect(
  bar,
  baz
)(foo);

// Output (Prettier 1.15)
app.connect(
  "activate",
  async () => {
    await data.load();
    win.show_all();
  }
);
const ConnectedComponent = connect(
  bar,
  baz
)(foo);

// Output (Prettier 1.16)
app.connect("activate", async () => {
  await data.load();
  win.show_all();
});
const ConnectedComponent = connect(
  bar,
  baz
)(foo);

Ajout du support pour les méthodes privées de classe (#5637 par @existentialism)​

// Input
class Hello {
  #world() {}
}

// Output (Prettier 1.15)
// SyntaxError

// Output (Prettier 1.16)
class Hello {
  #world() {}
}

Correction de l'indentation des expressions dans les templates racines (#5607 par @ikatyang)​

// Input
if (a) {
  return `
hello
${foo({
  bar,
  baz
})}
world
`;
}

// Output (Prettier 1.15)
if (a) {
  return `
hello
${foo({
    bar,
    baz
  })}
world
`;
}

// Output (Prettier 1.16)
if (a) {
  return `
hello
${foo({
  bar,
  baz
})}
world
`;
}

Suppression des sauts de ligne inutiles dans les templates littéraux HTML (#5771 par @ikatyang)​

// Input
function HelloWorld() {
  return html`
    <h3>Bar List</h3>
    ${bars.map(bar => html`
       <p>${bar}</p>
    `)}
  `;
}

// Output (Prettier 1.15)
function HelloWorld() {
  return html`
    <h3>Bar List</h3>
    ${
      bars.map(
        bar => html`
          <p>${bar}</p>
        `
      )
    }
  `;
}

// Output (Prettier 1.16)
function HelloWorld() {
  return html`
    <h3>Bar List</h3>
    ${bars.map(
      bar => html`
        <p>${bar}</p>
      `
    )}
  `;
}

TypeScript/Flow​

Reconnaissance correcte des templates /* HTML */ (#5658 par @ikatyang)​

Nous avions ajouté le support du formatage des templates littéraux HTML via le pseudo-tag /* HTML */ dans Prettier 1.15, mais à cause d'un bug, cela ne fonctionnait qu'en JavaScript. Nous avons corrigé ce problème dans Prettier 1.16.

CSS​

Correction du rendu incorrect des listes causé par les commentaires (#5710 par @jsnajdr)​

// Input
$my-list2:
  a // a
  b
  c;

// Output (Prettier 1.15)
$my-list2: a// a
  bc;

// Output (Prettier 1.16)
$my-list2: a // a
  b c;

Gestion correcte des barres obliques inverses (#5597 par @sh7dm)​

// Input
.figcaption {
    .margin-top-1\/2;
    .large\:none;
}

// Output (Prettier 1.15)
.figcaption {
  .margin-top-1\ / 2;
  .large\: none;
}

// Output (Prettier 1.16)
.figcaption {
  .margin-top-1\/2;
  .large\: none;
}

MDX​

Gestion correcte du HTML en ligne (#5704 par @ikatyang)​

<!-- Input -->
| Column 1 | Column 2 |
|---|---|
| Text | <Hello>Text</Hello> |

<!-- Output (Prettier 1.15) -->
<!-- SyntaxError -->

<!-- Output (Prettier 1.16) -->
| Column 1 | Column 2            |
| -------- | ------------------- |
| Text     | <Hello>Text</Hello> |

HTML​

Formatage des scripts avec type "application/ld+json" (#5642 par @ikatyang)​

<!-- Input -->
<script type="application/ld+json">
  {   "json":true  }
</script>

<!-- Output (Prettier 1.15) -->
<script type="application/ld+json">
  {   "json":true  }
</script>

<!-- Output (Prettier 1.16) -->
<script type="application/ld+json">
  { "json": true }
</script>

Traitement des fichiers .mjml comme du HTML (#5505 par @n1ru4l)​

MJML est un langage de balisage utilisant la même syntaxe que le HTML. Nous avons ajouté l'extension .mjml à la liste des extensions reconnues comme HTML, donc Prettier les formatera.

Guillemets intelligents pour les attributs (#5590 par @ikatyang)​

Auparavant, les guillemets autour des valeurs d'attributs HTML étaient toujours des doubles guillemets. Pour améliorer la lisibilité, ils utilisent désormais le type de guillemet minimisant le nombre de caractères d'échappement, comme pour les autres chaînes.

<!-- Input -->
<div x='123"456'></div>
<div x="123'456"></div>

<!-- Output (Prettier 1.15) -->
<div x="123&quot;456"></div>
<div x="123'456"></div>

<!-- Output (Prettier 1.16) -->
<div x='123"456'></div>
<div x="123'456"></div>

Vue​

Les noms de balises sont sensibles à la casse (#5606 par @ikatyang)​

Auparavant, nous convertissions les noms de balises en minuscules avant de consulter leur définition lors de l'analyse, ce qui faisait que le composant <Input> était reconnu comme un élément natif <input>. Cela provoquait une erreur syntaxique lorsque </Input> était rencontré, car <input> est un élément vide qui ne peut pas avoir de balise fermante. Nous avons résolu ce problème dans la version 1.16.

<!-- Input -->
<template>
  <Input></Input>
</template>

<!-- Output (Prettier 1.15) -->
<!-- SyntaxError -->

<!-- Output (Prettier 1.16) -->
<template>
  <Input></Input>
</template>

Vue/Angular​

Ajout de parenthèses pour éviter les }} inattendus dans les interpolations (#5657 par @ikatyang)​

Les }} ne sont pas autorisés dans les interpolations car ils sont interprétés comme la fin de l'interpolation. Prettier 1.15 produisait parfois du code enfreignant cette règle. Prettier 1.16 ajoute désormais des parenthèses pour empêcher l'apparition de }} dans les interpolations.

<!-- Input -->
<p>{{ foo({ bar: {} }) }}</p>

<!-- First Output (Prettier 1.15, --no-bracket-spacing) -->
<p>{{ foo({bar: {}}) }}</p>

<!-- Second Output (Prettier 1.15, --no-bracket-spacing) -->
<!-- SyntaxError -->

<!-- Output (Prettier 1.16, --no-bracket-spacing) -->
<p>{{ foo({bar: ({})}) }}</p>