Prettier

Formateur de code opiniâtre et multilangage

Prettier est un formateur de code opiniâtre qui applique un style cohérent en analysant votre code et en le réimprimant avec ses propres règles, prenant en compte la longueur des lignes et renvoyant le code à la ligne lorsque nécessaire. En uniformisant automatiquement le formatage, Prettier élimine les débats sur le style de code, permettant aux équipes de se concentrer sur ce qui compte : la logique métier.

JavaScriptTypeScriptHTMLCSSGraphQLMarkdown

Qu'est-ce que Prettier ?

Prettier est comme un assistant de mise en page automatique pour le code informatique. Si vous avez déjà utilisé un logiciel comme Microsoft Word, vous avez probablement remarqué qu'il ajuste automatiquement certains aspects de la mise en page pour que votre document soit bien présenté. Prettier fait la même chose, mais pour le code.

Pour les non-développeurs, imaginez que vous rédigez un livre avec plusieurs co-auteurs. Sans règles établies, l'un pourrait utiliser des phrases courtes, un autre des paragraphes longs, un troisième pourrait indenter différemment ses paragraphes... Le résultat serait visuellement incohérent et difficile à lire. Prettier agit comme un éditeur automatique qui reformate tout le livre selon un style uniforme, sans changer le sens du contenu.

Ce qui rend Prettier spécial, c'est qu'il est "opiniâtre", ce qui signifie qu'il a des idées très arrêtées sur la façon dont le code devrait être formaté et offre peu d'options de personnalisation. Cela peut sembler limitant, mais c'est en fait l'un de ses plus grands avantages : il élimine les débats interminables sur le style de code, permettant aux équipes de se concentrer sur ce qui importe vraiment : la fonctionnalité du code.

Fonctionnalités Techniques Clés

Support multi-langage

Une des caractéristiques les plus impressionnantes de Prettier est sa capacité à formater de nombreux langages différents avec la même simplicité et cohérence, rendant le processus de formatage uniforme à travers toute la base de code.

Support complet pour JavaScript, TypeScript et Flow
Formatage de HTML, CSS, SCSS, et Less
Support pour les langages de données comme JSON, YAML et TOML
Formatage des requêtes GraphQL
Support pour les fichiers Markdown, rendant la documentation cohérente
Extensions communautaires pour d'autres langages comme PHP, Ruby, etc.

Configuration minimale

Fidèle à sa philosophie opiniâtre, Prettier fonctionne avec peu ou pas de configuration, offrant une expérience "ça marche tout de suite" qui élimine les débats interminables sur les règles de formatage.

Fonctionne immédiatement sans aucune configuration
Un nombre délibérément limité d'options pour réduire les débats sur le style
Options clés comme la largeur de ligne, l'utilisation de guillemets simples/doubles, etc.
Configuration via fichiers .prettierrc ou dans package.json
Possibilité d'ignorer certains fichiers ou parties de code avec .prettierignore
Intégration simple avec les outils de configuration existants

Intégration avec les outils de développement

Prettier s'intègre parfaitement dans le flux de travail des développeurs grâce à des extensions pour pratiquement tous les éditeurs de code populaires comme WebStorm ou PhpStorm et des outils de build.

Extensions disponibles pour VS Code, WebStorm, Atom, Sublime Text, etc.
Formatage automatique à la sauvegarde dans la plupart des éditeurs
Intégration avec ESLint via eslint-plugin-prettier
Hooks git pre-commit pour assurer que tout le code commité est formaté
Scripts npm pour le formatage en ligne de commande
Intégration dans les workflows CI/CD comme GitHub Actions pour vérification du formatage

Formatage basé sur l'AST

Contrairement à la plupart des formateurs qui opèrent sur le texte brut, Prettier analyse d'abord le code en un arbre syntaxique abstrait (AST), puis génère à nouveau le code avec son propre style cohérent.

Compréhension sémantique complète du code plutôt que simple manipulation de texte
Préservation de la logique et du comportement du code pendant le reformatage
Formatage intelligent des structures complexes comme les expressions conditionnelles
Distinction entre différents contextes (JSX vs. JavaScript standard)
Gestion correcte des commentaires dans le code
Analyse robuste qui évite les erreurs courantes de formatage

Changements minimaux entre les exécutions

Prettier garantit que les exécutions répétées sur le même code produisent toujours le même résultat, ce qui est essentiel pour éviter les "diff wars" dans le contrôle de version.

Résultats déterministes qui ne changent pas entre les exécutions
Stabilité entre les différentes versions de Prettier
Approche "une seule bonne façon" pour chaque structure de code
Minimisation des changements dans l'historique git
Évite les cycles de reformatage pouvant survenir avec d'autres outils
Meilleure compatibilité avec les processus de revue de code

Configuration et utilisation

Configuration de base

Un exemple de fichier de configuration Prettier () :

.prettierrc

{
  "printWidth": 80,
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "singleQuote": true,
  "trailingComma": "es5",
  "bracketSpacing": true,
  "jsxBracketSameLine": false,
  "arrowParens": "avoid",
  "proseWrap": "preserve"
}

Ignorer des fichiers ou dossiers

Exemple de fichier .prettierignore pour exclure certains fichiers du formatage :

.prettierignore

# Dossiers générés
dist/
build/
coverage/

# Fichiers tierces parties
node_modules/
vendor/

# Fichiers spécifiques
*.min.js
*.bundle.js
*.lock

# Fichiers générés automatiquement
package-lock.json
yarn.lock

Intégration dans package.json

Configuration des scripts npm et hooks pour Prettier dans package.json :

package.json

{
  "scripts": {
    "format": "prettier --write "**/*.{js,jsx,ts,tsx,json,css,scss,md}"",
    "format:check": "prettier --check "**/*.{js,jsx,ts,tsx,json,css,scss,md}"",
    "precommit": "lint-staged"
  },
  "lint-staged": {
    "*.{js,jsx,ts,tsx,json,css,scss,md}": [
      "prettier --write",
      "git add"
    ]
  },
  "prettier": {
    "singleQuote": true,
    "trailingComma": "all"
  }
}

Intégration avec ESLint

Configuration pour utiliser Prettier avec ESLint :

.eslintrc.js

module.exports = {
  extends: [
    'eslint:recommended',
    'plugin:react/recommended',
    'plugin:prettier/recommended'  // Intègre Prettier dans ESLint
  ],
  plugins: ['prettier'],
  rules: {
    'prettier/prettier': 'error',  // ESLint signale les problèmes de formatage comme des erreurs
    'arrow-body-style': ['error', 'as-needed'],
    'prefer-arrow-callback': 'error'
  }
}

Prettier vs Linters: Différences et complémentarité

Rôles distincts

Prettier

Se concentre uniquement sur le formatage du code
Gère l'espacement, les sauts de ligne, l'indentation, les virgules, etc.
Reformate intégralement le code selon ses règles
Ne cherche pas à détecter les erreurs ou les problèmes de logique
Opiniâtre avec peu d'options de configuration

Linters (comme ESLint)

Identifient les erreurs potentielles et les anti-patterns
Appliquent les meilleures pratiques spécifiques au langage
Peuvent avoir des milliers de règles configurables
Incluent certaines règles de formatage (que l'on désactive généralement avec Prettier)
Peuvent détecter des problèmes liés à la logique ou à la sécurité

Utilisation complémentaire

La meilleure pratique consiste à utiliser Prettier et ESLint ensemble, chacun pour sa spécialité :

Prettier pour tout ce qui concerne la mise en forme et le style visuel du code
ESLint pour détecter les erreurs, appliquer les meilleures pratiques et améliorer la qualité
Configurez ESLint pour désactiver toutes les règles de formatage qui entreraient en conflit avec Prettier
Utilisez le plugin eslint-config-prettier pour désactiver automatiquement les règles conflictuelles
Intégrez les deux outils dans votre processus de pré-commit pour garantir à la fois un style cohérent et un code de qualité

Cas d'Usage et Applications

Cohésion d'équipe et onboarding

Prettier élimine les débats sur le style de code et simplifie l'intégration des nouveaux développeurs. Les nouvelles recrues n'ont pas besoin d'apprendre un guide de style complexe - elles peuvent commencer à coder immédiatement, et Prettier s'occupera de la mise en forme.

Revues de code plus efficaces

Avec Prettier, les revues de code peuvent se concentrer sur la logique et l'architecture plutôt que sur des détails de formatage. Les réviseurs n'ont plus à faire des commentaires sur l'indentation ou les sauts de ligne, ce qui accélère le processus de révision et améliore la qualité des discussions.

Refactoring progressif

Pour les projets existants avec un style de code incohérent, Prettier permet de standardiser progressivement le code. On peut commencer par formatter les nouveaux fichiers, puis étendre progressivement aux fichiers existants à mesure qu'ils sont modifiés, ou effectuer un grand remaniement en une seule fois.

Projets open-source

Dans les projets open-source avec de nombreux contributeurs occasionnels, Prettier garantit que toutes les contributions suivent le même style, indépendamment de l'expérience du contributeur ou de ses préférences personnelles, ce qui facilite la maintenance à long terme.

Assurance qualité automatisée

Intégré dans les pipelines CI/CD, Prettier peut vérifier automatiquement que tout le code est correctement formaté avant d'être fusionné ou déployé. Cela permet de maintenir la cohérence du code tout au long du cycle de développement.

Formatage multi-langage

Pour les projets full-stack qui utilisent plusieurs langages (JavaScript, TypeScript, CSS, HTML, etc.), Prettier offre une solution unifiée pour formater tous ces fichiers avec un seul outil et une configuration minimale, simplifiant grandement la gestion du code.

Technologies associées

Prettier

Qu'est-ce que Prettier ?

Fonctionnalités Techniques Clés

Support multi-langage

Configuration minimale

Intégration avec les outils de développement

Formatage basé sur l'AST

Changements minimaux entre les exécutions

Configuration et utilisation

Configuration de base

Ignorer des fichiers ou dossiers

Intégration dans package.json

Intégration avec ESLint

Prettier vs Linters: Différences et complémentarité

Rôles distincts

Prettier

Linters (comme ESLint)

Utilisation complémentaire

Cas d'Usage et Applications

Cohésion d'équipe et onboarding

Revues de code plus efficaces

Refactoring progressif

Projets open-source

Assurance qualité automatisée

Formatage multi-langage

Ressources et Documentation

Site Officiel de Prettier

Playground Prettier

Extension VS Code Prettier

Guide d'intégration avec les linters

Issues et discussions GitHub

Configuration pré-commit

Technologies associées

ESLint

GitHub

Node.js

React

GitHub Actions

Jest

WebStorm