Prettier

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

pnpm add --save-dev prettier

yarn add --dev prettier

bun add --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

Pour utiliser Prettier avec ESLint, installez :

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

pnpm add --save-dev eslint-config-prettier eslint-plugin-prettier

yarn add --dev eslint-config-prettier eslint-plugin-prettier

bun add --dev eslint-config-prettier eslint-plugin-prettier

Puis dans votre .eslintrc :

{
  "extends": [
    "prettier"
  ],
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": "error"
  }
}

Git Hooks

Pour formater automatiquement le code avant chaque commit, utilisez husky et lint-staged :

npm install --save-dev husky lint-staged

pnpm add --save-dev husky lint-staged

yarn add --dev husky lint-staged

bun add --dev husky lint-staged

Dans votre package.json :

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