Prettier 1.9 : Fragments JSX, EditorConfig et Parenthèses de Flèches

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 une option pour les parenthèses des fonctions fléchées dans les arguments, la prise en charge de la nouvelle syntaxe de fragments JSX (<>), le support des fichiers .editorconfig, ainsi que des améliorations pour GraphQL et Markdown.

Principales fonctionnalités

JavaScript

Option pour ajouter des parenthèses aux arguments des fonctions fléchées (#3324) par @rattrayalex et @suchipi

Lors de l'impression des fonctions fléchées, Prettier ommettait les parenthèses autour des arguments lorsqu'elles n'étaient pas strictement nécessaires, comme ceci :

// no parens
foo => {};

// parens
(foo: Number) => {};

// parens
({ foo }) => {}

// parens
(foo = 5) => {}

Cela a engendré le thread le plus commenté de notre issue tracker. Prettier propose désormais l'option --arrow-parens (arrowParens dans la config) qui peut prendre deux valeurs :

• "avoid" - (par défaut) conserve le comportement qui supprime les parenthèses quand possible

• "always" - inclut toujours les parenthèses

Syntaxe de fragments JSX (#3237) par @duailibe

Prettier reconnaît et formate désormais le JSX avec la nouvelle syntaxe de fragments, comme dans l'exemple ci-dessous :

function MyComponent() {
  return (
    <>
      <Children1 />
      <Children2 />
      <Children3 />
    </>
  );
}

Correction des lenteurs lors du formatage de longs textes en JSX (#3268, #3273) par @duailibe

Nous avons reçu des retours indiquant que le formatage de fichiers JSX contenant de très longs textes (~1000 lignes) était très lent. Nous avons identifié deux goulots d'étranglement de performance dans notre primitive fill, qui imprime du texte jusqu'à atteindre la largeur maximale avant d'insérer un saut de ligne.

Markdown

Ajout d'une option pour préserver les sauts de ligne (#3340) par @ikatyang

Après la sortie de notre support Markdown, nous avons reçu des retours indiquant que la césure de texte pour respecter la largeur d'impression pouvait perturber certains moteurs de rendu sensibles aux sauts de ligne. Dans la version 1.8.2, nous avons introduit l'option proseWrap: false qui imprime un paragraphe sur une seule ligne, laissant aux utilisateurs le soin de s'appuyer sur le "soft wrapping" de leurs éditeurs.

Dans la version 1.9, nous introduisons une nouvelle option proseWrap: "preserve" qui respecte les sauts de ligne originaux du texte, permettant aux utilisateurs de décider où le texte doit être coupé.

[AVERTISSEMENT] proseWrap avec une valeur booléenne est obsolète, utilisez plutôt "always", "never" ou "preserve".

[CHANGEMENT CASSANT] L'option proseWrap prend désormais "preserve" par défaut car certains moteurs de rendu sont sensibles aux sauts de ligne.

GraphQL

Prise en charge des interpolations de premier niveau (#3370) par @lydell

Lorsque le support GraphQL a été lancé, Prettier ne prenait pas en charge les interpolations et sautait donc le formatage si des interpolations étaient présentes, car celles-ci rendent le formatage très complexe. Bien que cela fonctionne bien dans la plupart des cas, les utilisateurs d'Apollo Client ne bénéficiaient parfois pas du support GraphQL de Prettier, car Apollo Client utilise l'interpolation pour partager des fragments entre requêtes. La bonne nouvelle est que seules les interpolations de niveau supérieur sont autorisées, ce qui était beaucoup plus facile à implémenter dans Prettier.

Dans la version 1.9, nous formatons les requêtes GraphQL avec interpolation de niveau supérieur :

gql`
  query User {
    user(id: "Bob") {
      ...UserDetails
    }
  }

  ${UserDetailsFragment}
`

(Prettier continuera à ignorer le formatage si l'interpolation se trouve à l'intérieur d'une requête ou mutation.)

Préserver les sauts de ligne intentionnels en GraphQL (#3252) par @duailibe

Prettier respectera désormais les sauts de ligne intentionnels dans les requêtes GraphQL (en les limitant à 1), alors qu'auparavant il les supprimait.

query User {
  name

  age
}

CSS

Ne pas mettre en minuscules les noms d'éléments et d'attributs dans les sélecteurs (#3317) par @lydell

Le CSS est généralement insensible à la casse, donc Prettier mettait en minuscules depuis un moment pour maintenir une cohérence. Il s'avère que nous avons négligé un détail de la spécification CSS. Les noms d'éléments et d'attributs dans les sélecteurs dépendent du langage de balisage : en HTML ils sont insensibles à la casse, mais en SVG (XML) ils ne le sont pas. Précédemment, Prettier mettait incorrectement en minuscules ces noms, mais ce n'est plus le cas désormais.

Configuration

Ajout du support EditorConfig (#3255) par @josephfrazier

Cela a pris du temps, mais Prettier respectera enfin votre fichier .editorconfig. Cela inclut :

• indent_style

• indent_size/tab_width

• max_line_length

Le CLI prettier respecte .editorconfig par défaut, mais vous pouvez désactiver ce comportement avec --no-editorconfig.
Cependant, l'API ne respecte pas .editorconfig par défaut, pour éviter d'éventuels problèmes d'intégration dans les éditeurs (voir ici pour plus de détails). Pour l'activer, ajoutez editorconfig: true aux options de prettier.resolveConfig.

Autres changements

JavaScript

Ne pas couper les éléments simples en JSX (#3250) par @duailibe

Prettier ne coupera plus un élément sans attributs, conservant des éléments comme <br /> comme unité unique.

Ne pas couper les identifiants dans les expressions de littéraux de gabarit (#3299) par @duailibe

Dans la version précédente, nous avions essayé une nouvelle stratégie de césure pour les littéraux de gabarit contenant des expressions afin de respecter la largeur d'impression. Nous avons reçu des retours indiquant que dans certains cas, il était préférable de dépasser la largeur plutôt que de couper sur plusieurs lignes.

Désormais, les expressions de littéraux de gabarit contenant un seul identifiant ne seront plus coupées :

const foo = `Hello ${username}. Today is ${month} ${day}. You have ${newMessages} new messages`.

Correction du formatage des commentaires dans les fonctions fléchées (#3334) par @jackyho112

Corrige un cas limite où Prettier déplaçait des commentaires, ce qui cassait des outils comme Webpack :

const API = {
  loader: () => import('./test' /* webpackChunkName: "test" */),
};

// would get formatted to

const API = {
  loader: (/* webpackChunkName: "test" */) => import("./test")
};

Correction de l'impression des commentaires autour des décorateurs et propriétés de classe (#3382) par @azz

Un cas où les commentaires entre un décorateur et une propriété de classe étaient déplacés vers une position invalide a été corrigé.

// Before
class Something {
  @decorator
  static // comment
  property = 1;
}

// After
class Something {
  @decorator
  // comment
  static property = 1;
}

Flow

Ne pas ajouter de saut de ligne pour les paramètres de type vides (#3281) par @Vjeux

Les paramètres de type vides (foo: Type<>) ne provoquent plus de saut de ligne.

Ajout du support des mixins Flow avec le parser Babylon (#3391) par @bakkot

Les mixins Flow étaient accidentellement supprimés lors du formatage. Ce problème est maintenant résolu, mais uniquement pour le parser babylon.

// Before
class Foo extends Bar {}

// After
class Foo extends Bar mixins Baz {}

TypeScript

Ne pas ajouter de virgule finale après un spread d'objet (#3313) par @duailibe

Cette pratique était inconsistante avec JavaScript et Flow. Prettier n'ajoutera plus de virgule finale dans les cas suivants avec le parser TypeScript :

const {
  bar,
  baz,
  ...rest
} = foo;

Ajout de parenthèses autour des assertions de type pour les décorateurs (#3329) par @azz

Les parenthèses autour des assertions de type dans les décorateurs étaient omises :

@(bind as ClassDecorator)
class Decorated {}

Markdown

Ne pas couper le inlineCode (#3230) par @ikatyang

Prettier ne coupera plus le texte à l'intérieur des inlineCode, ce qui signifie qu'il ne créera des sauts de ligne qu'avant ou après ceux-ci.

Suppression des espaces superflus entre caractères non-CJK et ponctuation CJK (et vice-versa) (#3244, #3249) par @ikatyang

Correction des cas où Prettier ajoutait des espaces superflus comme dans les exemples suivants :

扩展运算符（spread ）是三个点（`...`）。

This is an english paragraph with a CJK quote " 中文 ".

Échappement systématique du texte ressemblant à de l'emphase (#3246) par @ikatyang

Correction du cas où \_\_text\_\_ était formaté en __text__.

Prise en charge des variantes de ponctuation (#3254) par @ikatyang

Prettier considère désormais non seulement les caractères de ponctuation ASCII mais aussi Unicode.

Support du front matter TOML (#3290) par @ikatyang

Nous supportions déjà le YAML dans le front matter des fichiers Markdown. Le format TOML est désormais également pris en charge, car certains générateurs de sites statiques l'utilisent.

+++
date: '2017-10-10T22:49:47.369Z'
title: 'My Post Title'
categories: ['foo', 'bar']
+++

This is the markdown body of my post.

Indentation uniquement du premier nœud non-liste dans les éléments de liste à cases (#3297) par @ikatyang

Correction d'un bug où l'indentation était appliquée après une liste alors que cela n'était pas nécessaire :

* parent list item

     * child list item

* [x] parent task list item

     * [x] child task list item

devenait :

* parent list item

  * child list item

* [x] parent task list item

      * [x] child task list item

Préserver les espaces insécables (#3327) par @ikatyang

Les espaces insécables sont utiles pour maintenir des mots séparés par des espaces sur la même ligne (par ex. un nombre et son unité ou des noms de produits multi-mots). Prettier les convertissait incorrectement en espaces normaux.

Ne pas couper avant un préfixe spécial (#3347) par @ikatyang

Corrige un bogue où Prettier pouvait couper le texte en cas de dépassement de largeur juste avant un nombre suivi de ., ce qui serait interprété comme une liste numérotée :

She grew up in an isolated village in the 19th century and met her father aged
29. Oh no, why are we in a numbered list now?

Omettre le point-virgule dans les expressions JSX simples (#3330) par @sapegin

Prettier omettra désormais le point-virgule (avant et après) dans les exemples de code pour les expressions JSX simples :

No semi:

<!-- prettier-ignore -->
```jsx
<div>Example</div>
```