AccueilActualités informatiqueL'outil de formatage de code Prettier 2.6 place les attributs à la...

L’outil de formatage de code Prettier 2.6 place les attributs à la ligne si on le souhaite

La version 2.6 de l’outil de formatage de code Prettier est sortie. Dans cette version, l’outil open source dispose d’une nouvelle option pour formater les attributs en HTML, JSX et Vue. Il travaille en outre avec un autre analyseur JavaScript et apporte de nombreux petits compléments pour JavaScript.

Prettier sert à formater le code selon des directives fixes. Il est conçu pour JavaScript, TypeScript, CSS, HTML, JSON et Markdown, entre autres, et traite le code de frameworks tels que Vue, Angular et Ember. D’autres langages de programmation et formats peuvent être intégrés via des plug-ins. Il existe des plug-ins communautaires pour Java, PHP, Ruby et XML, entre autres.

Le terme anglais Opinionated Code Formatter montre que Prettier applique des directives strictes, ce qui ne se traduit que difficilement en français – autoritaire est peut-être le terme le plus approprié. L’outil ne comporte volontairement que peu d’options, mais certaines directives peuvent être configurées. La version 2.6 introduit l’option singleAttributePerLine qui fait en sorte que Prettier place chaque attribut dans une ligne séparée dans le code HTML.

La directive s’applique également aux attributs dans Vue SFC Templates (Single File Component), un format de fichier du framework Vue qui mise sur une syntaxe similaire à celle de HTML, et dans React JSX (JavaScript XML), qui sert à écrire du code HTML dans React.

L’exemple suivant, tiré du blog de Prettier, montre une fois la mise en œuvre avec l’option désactivée et en dessous avec l’option activée singleAttributePerLine. Si la valeur est false la sortie correspond à celle de Prettier 2.5 :

<!-- Input -->
<div data-a="1">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div data-a="1" data-b="2" data-c="3">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>

<!-- Prettier 2.6, with `{"singleAttributePerLine": false}` -->
<div data-a="1">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div data-a="1" data-b="2" data-c="3">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>

<!-- Prettier 2.6, with `{"singleAttributePerLine": true}` -->
<div data-a="1">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div
  data-a="1"
  data-b="2"
  data-c="3"
>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>

Le pull request pour l’option existe déjà depuis 2019 et la communauté a longuement discuté de cette nouveauté. Avec cette option, l’équipe suit entre autres les directives de style de Vue.

Par ailleurs, la version apporte de nombreuses petites adaptations au formatage de JavaScript. Pour TypeScript, elle connaît certes la version actuelle 4.6 qui, contrairement à TypeScript 4.5, n’a pas apporté de modifications qui se reflètent dans le formatage.

L’intégration de l’analyseur JavaScript allégé Acorn (open source) mérite d’être mentionnée. En outre, il y a des adaptations et des corrections de bugs pour les commentaires en fin de ligne : Prettier 2.6 les autorise pour if-sans bloc, au lieu de les placer sur une ligne séparée comme dans la version 2.5. Après continue– et break-les commentaires apparaissent désormais aussi correctement, alors que la version précédente s’en était étouffée :

// Input
for (;;) continue // comment
;

// Prettier 2.5
Error: Comment "comment" was not printed. Please report this error!

// Prettier 2.6
for (;;)
  continue; // comment

Autres corrections de bugs et nouveautés comme le nouveau paramètre de ligne de commande --no-plugin-search pour désactiver le chargement automatique des plug-ins, peuvent être trouvés sur le blog de Prettier. Le code source de l’outil se trouve sur GitHub. Ceux qui souhaitent essayer Prettier 2.6 sans l’installer peuvent se rendre sur le terrain de jeu en ligne.

Plus d'articles