Le trailing comma ou la virgule magique

Le trailing comma fait partie de ces choses qui semblent inutiles ou détestables au premier abord, mais dont on a du mal à se passer une fois adoptées.

C’est quoi le trailing comma ?

Il s’agit d’une virgule optionnelle que l’on peut ajouter à la fin d’une série d’éléments. Par exemple, en JavaScript, cette virgule peut être placée après le dernier élément d’un tableau, la dernière clé d’un objet, le dernier argument d’une fonction, le dernier symbole d’une liste d’imports, etc. Voici quelques exemples :

1const dishes = [
2  'Thieboudienne',
3  'Pizza Margherita',
4  'Tajine', // <-- trailing comma dans un tableau
5];

1const dish = {
2  id: '9',
3  name: 'Yassa',
4  continent: 'Afrique',
5  country: 'Sénégal', // <-- trailing comma dans un objet
6};

1import {
2  Component,
3  inject,
4  signal,
5  input,
6  output,
7  model,
8  linkedSignal,
9  computed, // <-- trailing comma au niveau des imports
10} from '@angular/core';

Pourquoi le trailing comma ?

Le trailing comma n’a aucun impact sur la sémantique du code, mais le rend tout simplement meilleur. Je suis adepte du trailing comma et l’appelle virgule magique pour deux raisons principales :

Il facilite l’ajout et le réagencement d’éléments

Prenons l’exemple d’un tableau avec trois éléments, sans trailing comma :

1const dishes = [
2  'Thieboudienne',
3  'Pizza Margherita',
4  'Tajine'
5];

Si l’on veut remonter le dernier élément (Tajine) d’un rang :

1const dishes = [
2  'Thieboudienne',
3  'Tajine',
4  'Pizza Margherita'
5];

Ce simple refactoring nécessite trois actions :

Utilisation de la combinaison Alt + Shift + Up pour remonter l’élément.
Ajout d’une virgule après le nouveau deuxième élément (Tajine); sinon, le code ne compile pas.
Suppression de la virgule après le troisième élément (Pizza Margherita), car elle n’est plus souhaitable.

Voyons maintenant le même exemple avec un trailing comma :

1const dishes = [
2  'Thieboudienne',
3  'Pizza Margherita',
4  'Tajine',
5];

On peut réordonner librement les éléments sans se soucier d’ajouter ou de supprimer des virgules.

1const dishes = [
2  'Thieboudienne',
3  'Tajine',
4  'Pizza Margherita',
5];

Le refactoring se réalise maintenant une seule action : Alt + Shift + Up pour remonter le dernier élément.

Il facilite la revue de code en limitant les différences

Prenons un tableau sans trailing comma auquel on veut rajouter un élément :

1const dishes = [
2  'Thieboudienne',
3  'Tajine',
4  'Pizza Margherita'
5];

Ajoutons un élément en fin de liste :

1const dishes = [
2  'Thieboudienne',
3  'Tajine',
4  'Pizza Margherita',
5  'Yassa'
6];

Voici le différentiel généré lors de la revue de code :

1const dishes = [
2  'Thieboudienne',
3  'Tajine',
4- 'Pizza Margherita'
5+ 'Pizza Margherita',
6+ 'Yassa'
7];

Git détecte une suppression de ligne et deux ajouts, alors qu’on a simplement ajouté un nouvel élément. Cela génère un bruit inutile dans la revue de code.

Voyons maintenant le même exemple avec un trailing comma :

1const dishes = [
2  'Thieboudienne',
3  'Tajine',
4  'Pizza Margherita',
5];

Après ajout d’un élément en fin de liste :

1const dishes = [
2  'Thieboudienne',
3  'Tajine',
4  'Pizza Margherita',
5  'Yassa',
6];

Et voici le différentiel généré lors de la revue de code :

1const dishes = [
2  'Thieboudienne',
3  'Tajine',
4  'Pizza Margherita',
5+ 'Yassa',
6];

Seul l’ajout du nouvel élément est visible dans le différentiel. Le résultat est plus clair et facilite la revue de code.

Comment activer les trailing commas dans son projet ?

Pour le développeur JavaScript

Dans le monde de JavaScript, nous disposons d’un outil formidable pour formater automatiquement le code et éliminer la nécessité de gérer manuellement les trailing commas : Prettier. Par défaut, Prettier ajoute automatiquement ces trailing commas. Cependant, de nombreux développeurs JavaScript, ne connaissant pas leur utilité, choisissent de désactiver cette fonctionnalité.

Si vous souhaitez tirer parti des trailing commas, assurez-vous que l’option suivante n’est pas présente dans votre fichier de configuration.

1{
2  "trailingComma": "none"
3}

Bien que cela ne soit pas nécessaire (puisque c’est la valeur par défaut), vous pouvez aussi expliciter que vous souhaitez activer les trailing commas :

1{
2  "trailingComma": "all"
3}

Si vous n’utilisez pas Prettier, arrêtez de lire cet article et allez l’installer immédiatement, car vous passez à côté de quelque chose.

Pour le développeur Kotlin

Le trailing comma n’est pas limité au monde de JavaScript. D’autres langages de programmation, comme Kotlin, le prennent également en charge. L’équipe Kotlin recommande même de les utiliser.

Cependant, il n’existe pas en Kotlin d’outil équivalent à Prettier. Heureusement, vous pouvez facilement configurer votre IDE pour ajouter automatiquement les trailing commas. Voici comment faire dans IntelliJ :

Ouvrez les paramètres de l’IDE en utilisant le raccourci Control/Cmd + ,.
Dans la navigation à gauche, rendez-vous dans Editor > Code Style > Kotlin.
Ensuite, sélectionner l’onglet Other, puis cocher Use trailing comma.

Conclusion

Le trailing comma fait partie de ces éléments qui peuvent sembler insignifiants ou provoquer une certaine résistance. Mais pour moi, ce n’est pas un caprice de formatage. Il simplifie la vie du développeur, qu’il s’agisse de l’auteur du code ou de son relecteur.