✨ Prettier

PrettierPrettier
Formateur de code automatique assurant un style cohérent dans le projet. est un formateur de code automatique qui prend en charge de nombreux langages comme JavaScript, TypeScriptTypeScript
Sur-ensemble typé de JavaScript qui ajoute un système de types statiques., CSS, HTML, JSONJSON
JavaScript Object Notation – format léger d'échange de données, lisible par l'humain et la machine. 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 ESLintESLint
Outil d'analyse statique pour identifier les problèmes dans le code JavaScript/TypeScript., 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 commitcommit
Instantané enregistré des modifications dans un dépôt Git., 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"
  }
}