Formatage avec Prettier

Qu'est-ce que Prettier et pourquoi l'utiliser ?

Alors qu'ESLint se concentre sur la détection des erreurs de code et le respect des bonnes pratiques, un autre aspect crucial de la qualité et de la maintenabilité est la cohérence du style de code. Des styles d'indentation différents, l'utilisation variable de points-virgules ou d'espaces, et d'autres divergences stylistiques peuvent rendre le code difficile à lire et générer des différences ("diffs") bruyantes dans les systèmes de contrôle de version, masquant les changements logiques réels.

C'est là qu'intervient Prettier. Prettier est un formateur de code "opinionated" (qui a des opinions bien arrêtées). Son objectif unique est de prendre votre code source et de le reformater automatiquement selon un ensemble de règles de style prédéfinies et cohérentes. Contrairement à ESLint qui peut avoir des centaines de règles configurables, Prettier a volontairement peu d'options. Il impose un style unique pour que les équipes n'aient plus à débattre (ou à configurer) des détails mineurs de formatage (tabulations vs espaces, simple vs double quotes, etc.).

L'utilisation de Prettier garantit que tout le code du projet aura exactement le même aspect, indépendamment de qui l'a écrit ou de ses préférences personnelles. Cela améliore considérablement la lisibilité et réduit la charge cognitive lors de la lecture ou de la revue de code.

Prettier vs Règles de formatage ESLint : Collaboration harmonieuse

Une question fréquente est : "Si ESLint a déjà des règles de formatage, pourquoi utiliser Prettier ?". Historiquement, ESLint pouvait effectivement gérer le formatage, mais cela nécessitait la configuration de nombreuses règles spécifiques, souvent sources de conflits et de maintenance. Prettier a été conçu spécifiquement pour résoudre ce problème de manière plus simple et plus efficace.

La pratique moderne et recommandée est de laisser Prettier gérer exclusivement le formatage et de désactiver toutes les règles de formatage conflictuelles dans ESLint. Cela permet à chaque outil de se concentrer sur ce qu'il fait le mieux : ESLint pour la qualité du code et les erreurs potentielles, Prettier pour la cohérence du style.

Pour faciliter cette collaboration, on utilise généralement le paquet `eslint-config-prettier`. En ajoutant `'prettier'` à la section `extends` de votre configuration ESLint (après les autres configs comme `plugin:react/recommended`), ce paquet désactive automatiquement toutes les règles ESLint connues qui pourraient entrer en conflit avec la manière dont Prettier formate le code.

Optionnellement, le paquet `eslint-plugin-prettier` permet d'exécuter Prettier comme une règle ESLint. Cela peut être utile pour voir les erreurs de formatage directement dans le rapport ESLint. Si vous l'utilisez, vous ajouteriez `'plugin:prettier/recommended'` à la fin de votre tableau `extends` dans `.eslintrc.js`.

Installation et configuration de Prettier

Installez Prettier et `eslint-config-prettier` (et éventuellement `eslint-plugin-prettier`) comme dépendances de développement :

npm install --save-dev --save-exact prettier eslint-config-prettier eslint-plugin-prettier
# Ou avec yarn
yarn add --dev --exact prettier eslint-config-prettier eslint-plugin-prettier

Note : L'option `--save-exact` (ou `--exact`) est fortement recommandée pour Prettier. Comme il s'agit d'un formateur opinionated, même des changements mineurs dans une nouvelle version pourraient introduire des différences de formatage subtiles. Utiliser une version exacte garantit que tous les membres de l'équipe et les systèmes CI/CD utilisent la même version et produisent un formatage identique.

La configuration de Prettier se fait via un fichier à la racine, comme `.prettierrc.js` ou `.prettierrc.json`. Il contient les quelques options que Prettier permet de personnaliser. Voici quelques options courantes :

// .prettierrc.json
{
  "semi": true, // Ajouter des points-virgules à la fin des instructions
  "singleQuote": true, // Utiliser des guillemets simples au lieu de doubles
  "jsxSingleQuote": false, // Utiliser des guillemets doubles pour les attributs JSX
  "trailingComma": "es5", // Ajouter une virgule finale là où c'est valide en ES5 (objets, tableaux, etc.)
  "tabWidth": 2, // Nombre d'espaces par niveau d'indentation
  "printWidth": 80, // Largeur de ligne maximale avant que Prettier n'essaie de couper la ligne
  "arrowParens": "always" // Toujours inclure les parenthèses autour d'un unique paramètre de fonction fléchée
}

Créez également un fichier `.prettierignore` (syntaxe similaire à `.gitignore`) pour spécifier les fichiers ou dossiers que Prettier doit ignorer (souvent `node_modules`, les dossiers de build comme `dist` ou `build`, les fichiers `package-lock.json`, etc.).

Intégration dans le flux de développement

Pour que Prettier soit réellement efficace, il doit être intégré de manière transparente dans votre flux de travail :

• Intégration à l'éditeur : La méthode la plus populaire. Installez l'extension Prettier pour votre éditeur (ex: "Prettier - Code formatter" pour VS Code). Configurez ensuite votre éditeur pour qu'il formate automatiquement le fichier lors de la sauvegarde ("Format On Save"). C'est le moyen le plus simple d'assurer que votre code est toujours formaté correctement pendant que vous travaillez.
• Via la ligne de commande (CLI) : Vous pouvez exécuter Prettier manuellement ou via des scripts npm/yarn.
  • `npx prettier --check .` : Vérifie si des fichiers nécessitent un formatage (utile en CI).
  • `npx prettier --write .` : Formate tous les fichiers supportés dans le projet.
  Ajoutez un script à votre `package.json` :

  {
    "scripts": {
      "format:check": "prettier --check .",
      "format:write": "prettier --write ."
    }
  }

• Hooks de pré-commit : C'est la solution la plus robuste pour les équipes. En utilisant des outils comme Husky et lint-staged, vous pouvez configurer Prettier pour qu'il formate automatiquement les fichiers que vous avez modifiés (`git add`-és) juste avant de créer un commit. Cela garantit qu'aucun code non formaté n'atteint jamais votre dépôt. Exemple de configuration dans `package.json` ou `.lintstagedrc.js` :

  // package.json (ou fichier séparé)
  {
    "lint-staged": {
      "*.{js,jsx,ts,tsx,json,css,scss,md}": "prettier --write"
    }
  }

Conclusion : La paix de l'esprit stylistique

Prettier est un outil simple mais transformateur pour la qualité du code frontend. En prenant en charge de manière cohérente et automatique tout le formatage, il élimine une source entière de discussions non productives, simplifie les revues de code (en se concentrant sur la logique et non sur le style), et assure une base de code d'une propreté et d'une lisibilité exemplaires.

En l'associant à ESLint (via `eslint-config-prettier` pour désactiver les règles conflictuelles), vous obtenez une combinaison puissante où ESLint garantit la qualité logique et Prettier garantit la qualité stylistique, vous permettant de vous concentrer sur l'écriture de fonctionnalités robustes pour votre application React.