Prettier - Formateur de code automatique

Prettier est un formateur de code automatique qui prend en charge de nombreux langages comme JavaScript, TypeScript, CSS, HTML, JSON et plus encore. Il permet de maintenir un style de code cohérent dans vos projets.

🛠️ Installation

Pour installer Prettier dans votre projet :

npm install --save-dev prettier

🛠️ Configuration

Créez un fichier .prettierrc à la racine de votre projet :

{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5"
}

📘 Utilisation

📘 En ligne de commande

Pour formater un fichier :

npx prettier --write src/index.js

Pour formater tous les fichiers :

npx prettier --write "src/**/*.{js,jsx,ts,tsx}"

📘 Exemples avant/après

Avant formatage :

function maFonction(param1,param2)
{
return param1+param2;
}

const obj={a:1,b:2,
c:3};

Après formatage :

function maFonction(param1, param2) {
  return param1 + param2;
}

const obj = {
  a: 1,
  b: 2,
  c: 3,
};

📘 Intégration avec l'éditeur

La plupart des éditeurs de code proposent des extensions Prettier :

• VS Code : "Prettier - Code formatter"
• WebStorm : support natif
• Sublime Text : "JsPrettier"

📘 Avec ESLint

Avec ESLint 9+, le format recommandé est la flat config. Pour éviter les conflits de règles de style, installez eslint-config-prettier :

npm install --save-dev eslint-config-prettier

Puis dans eslint.config.js :

import js from "@eslint/js";
import eslintConfigPrettier from "eslint-config-prettier";

export default [js.configs.recommended, eslintConfigPrettier];

📘 Git Hooks

Pour formater automatiquement le code avant chaque commit, utilisez Husky 5+ et lint-staged :

npm install --save-dev husky lint-staged
npx husky init

Créez ou adaptez ensuite .husky/pre-commit :

#!/usr/bin/env sh
npx lint-staged

Et gardez la configuration ciblée dans package.json :

{
  "lint-staged": {
    "*.{js,jsx,ts,tsx,css,md}": "prettier --write"
  }
}