Aller au contenu principal

Prettier 1.7 : Améliorations JSX, Pragma et correctifs TypeScript et CSS

· 10 minutes de lecture
Lily Skye
Lily Skye
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 des corrections de bugs et des ajustements autour du formatage JSX, TypeScript, CSS et JavaScript, ainsi que quelques nouvelles fonctionnalités.

Principales fonctionnalités​

Évolutions JSX​

Nous avons reçu de nombreux retours de la communauté concernant les changements de formatage JSX introduits dans la version 1.6.0, et avons apporté des modifications pour mieux correspondre aux standards et attentes communautaires.

Dans la 1.6.0, nous avions ajouté un second style pour les ternaires (expressions conditionnelles, a ? b : c), basé sur un format populaire dans la communauté utilisant des parenthèses pour délimiter le contenu JSX :

const DinnerOptions = ({ willEatMeat, willEatEggs, willEatVegetables }) => (
  <div>
    <div>Let's get some dinner...</div>
    {willEatMeat ? (
      <FullMenu />
    ) : willEatEggs ? (
      <VegetarianMenu />
    ) : willEatVegetables ? (
      <VeganMenu />
    ) : (
      <BackupMenu />
    )}
  </div>
);

Avant cette fonctionnalité, prettier ne formatait les ternaires qu'avec un seul style cohérent :

willEatMeat
  ? "Full Menu"
  : willEatEggs
    ? "Vegetarian Menu"
    : willEatVegetables ? "Vegan Menu" : "Backup Menu";

Dans la 1.6.0, nous utilisions l'heuristique suivante pour décider quand employer les "ternaires en mode JSX" :

We should print a ternary using JSX mode if:
  * The ternary contains some JSX in it
  OR
  * The ternary appears inside of some JSX

Cependant, cette heuristique a causé certains formatages inattendus : Diff GitHub montrant un ternaire contenant des chaînes d&#39;internationalisation à l&#39;intérieur d&#39;un élément JSX converti en style ternaire mode-JSX

Ainsi, dans la 1.7.0, nous avons simplifié notre heuristique comme suit :

We should print a ternary using JSX mode if:
  * The ternary contains some JSX in it

Nous espérons que ce changement réduira les cas de ternaires surprenants.

Un grand merci à @duailibe qui a implémenté cette modification ainsi que plusieurs autres problèmes de formatage JSX signalés.

Uniformisation de la casse CSS​

Nous avons consacré du temps lors de cette version à peaufiner notre formatage CSS, et dans ce cadre, @lydell a travaillé à normaliser la casse.

Désormais, presque tout en CSS s'imprimera en lower case.

/* Before */
DIV.Foo {
  HEIGHT: 12PX;
}

/* After */
div.Foo {
  height: 12px;
}

Mais ne vous inquiétez pas - Prettier ne touchera pas à vos $scss-variables, [@less](https://github.com/less)-variables ou FunctionNames(). Continuez vos préprocesseurs !

Support du pragma​

Une nouvelle option --require-pragma (requirePragma via l'API) modifie le comportement de prettier pour qu'il ne reformate un fichier que s'il contient un commentaire "pragma" spécial en en-tête, comme ceci :

/**
 * @prettier
 */

ou

/**
 * @format
 */

Cette idée vient de @ajhyndman et a été implémentée par @wbinnssmith.

Autres changements​

TypeScript​

Un bug dans Prettier 1.6.1 provoquait une erreur lors du parsing de TypeScript utilisant le type never, par exemple :

Observable.empty<never>();

De plus, Prettier 1.6.1 supprimait incorrectement le mot-clé declare des déclarations enum dans les fichiers *.d.ts :

// In
declare const enum Foo {}

// Out
const enum Foo {}

Ces deux problèmes ont été corrigés. Merci à @JamesHenry et @existentialism pour ces correctifs qui soutiennent notre communauté TypeScript !

Configuration​

Priorité configurable​

Une nouvelle option CLI --config-precedence détermine comment prettier doit prioriser les sources de configuration. Les valeurs valides sont :

cli-override (par défaut) - Les options CLI priment sur le fichier de config

file-override - Le fichier de config prime sur les options CLI

prefer-file - Si un fichier de configuration est trouvé, il sera évalué et les autres options CLI seront ignorées. Si aucun fichier de configuration n'est trouvé, les options CLI seront évaluées normalement.

Cette option ajoute un support pour les intégrations d'éditeurs où les utilisateurs définissent leur configuration par défaut mais souhaitent respecter la configuration spécifique au projet.

prettier.resolveConfig.sync​

Précédemment, il n'existait aucun moyen via l'API de résoudre la configuration pour un fichier source de manière synchrone. Grâce à des ajouts dans cosmiconfig par @sudo-suhas, @ikatyang a pu ajouter cette fonctionnalité à l'API prettier.

PRs fusionnées dans cette version​

Problèmes résolus dans cette version​

Un grand merci à toutes les personnes qui ont contribué à cette version, que ce soit par la création d'issues, les contributions de code, les relectures de code, ou les commentaires et retours généraux. Prettier est un projet géré par la communauté et continue d'exister grâce à des personnes comme vous. Merci !