Utilisation d'un linter (ESLint) et d'un formateur de code (Prettier)

Pourquoi la qualité et la cohérence du code sont-elles primordiales ?

Ecrire du code qui fonctionne est une chose, mais écrire du code de haute qualité, lisible et maintenable en est une autre. Dans un environnement de développement professionnel, en particulier en équipe, la cohérence du style de code et l'absence d'erreurs potentielles non détectées sont cruciales. Un code incohérent est difficile à lire, augmente le risque d'introduction de bugs et ralentit considérablement le processus de revue de code et d'intégration de nouveaux développeurs.

Imaginez relire du code où chaque développeur utilise un style différent pour l'indentation, les points-virgules, les guillemets, ou la déclaration de variables. Ou pire, découvrir des erreurs logiques subtiles dues à des portées de variables incorrectes ou à du code mort non détecté. C'est là qu'interviennent les linters et les formateurs de code, deux types d'outils devenus indispensables dans la boîte à outils du développeur Node.js moderne.

Un linter analyse statiquement votre code à la recherche de problèmes potentiels, allant des erreurs de syntaxe aux bugs logiques subtils et aux violations de conventions de style. Un formateur de code, quant à lui, se concentre exclusivement sur la mise en forme du code (indentation, espacement, sauts de ligne, etc.) pour garantir une apparence uniforme et cohérente sur l'ensemble du projet. Ensemble, ils forment un duo puissant pour améliorer drastiquement la qualité et la maintenabilité de votre base de code.

ESLint : Le gardien de la qualité et des bonnes pratiques

ESLint est l'outil de linting le plus populaire dans l'écosystème JavaScript et Node.js. Il est extrêmement configurable et extensible. Son rôle principal est d'identifier et de signaler les motifs problématiques dans votre code JavaScript.

Ses capacités incluent :

• Détection d'erreurs potentielles : Variables non utilisées, code inaccessible après un `return`, utilisation de `==` au lieu de `===`, erreurs de portée, etc.
• Application des bonnes pratiques : Encourager l'utilisation de `const` et `let` au lieu de `var`, suggérer l'utilisation de fonctionnalités ES6+ plus modernes, etc.
• Maintien de la cohérence du style : Bien que Prettier soit spécialisé là-dedans, ESLint possède également des règles de style (indentation, points-virgules, guillemets), mais il est souvent préférable de désactiver celles qui entrent en conflit avec Prettier.

Pour commencer avec ESLint, installez-le en tant que dépendance de développement :

npm install eslint --save-dev
# ou
yarn add eslint --dev

Ensuite, initialisez sa configuration. ESLint vous posera quelques questions pour adapter la configuration à votre projet (type de module, framework, style guide populaire comme Airbnb, Standard, Google...) :

npx eslint --init

Cela générera un fichier de configuration (souvent `.eslintrc.js` ou `.eslintrc.json`). Voici un exemple simple :

// .eslintrc.js
module.exports = {
  env: {
    browser: true,
    commonjs: true,
    es2021: true,
    node: true, // Important pour Node.js
  },
  extends: 'eslint:recommended', // Utilise les règles recommandées par ESLint
  parserOptions: {
    ecmaVersion: 12,
  },
  rules: {
    // Ici, vous pouvez surcharger ou ajouter des règles spécifiques
    'no-unused-vars': 'warn', // Avertir pour les variables non utilisées
    'no-console': 'off', // Autoriser console.log (souvent désactivé en prod)
    'semi': ['error', 'always'], // Exiger des points-virgules
    'quotes': ['error', 'single'] // Exiger des guillemets simples
  },
};

Vous pouvez ensuite lancer ESLint sur vos fichiers :

npx eslint your-code-directory/**/*.js
# Ou via un script npm dans package.json
"scripts": {
  "lint": "eslint . --ext .js"
}
# Puis : npm run lint

ESLint peut souvent corriger automatiquement certains problèmes avec l'option `--fix`.

Prettier : L'expert intransigeant du formatage

Prettier est un formateur de code 'opinionated' (qui a ses propres opinions tranchées). Son objectif n'est pas de détecter des erreurs logiques, mais de reformater automatiquement votre code pour qu'il respecte un style cohérent et prédéfini. Il prend votre code en entrée, le transforme en une structure abstraite (AST), puis le réécrit en respectant ses règles de formatage.

Les avantages de Prettier sont nombreux :

• Fin des débats sur le style : L'équipe n'a plus à discuter de l'indentation, des espaces, etc. Prettier décide.
• Formatage automatique : Gagnez du temps en laissant Prettier formater le code pour vous (souvent configuré pour s'exécuter à la sauvegarde du fichier).
• Cohérence garantie : Tout le code du projet aura exactement le même style.
• Facilite les revues de code : Les relecteurs peuvent se concentrer sur la logique métier plutôt que sur des détails de style.

Installation :

# Il est recommandé d'installer une version exacte pour garantir la cohérence
npm install prettier --save-dev --save-exact 
# ou
yarn add prettier --dev --exact

Créez un fichier de configuration (optionnel, mais recommandé) `.prettierrc.json` ou `.prettierrc.js` pour ajuster quelques options (Prettier reste volontairement peu configurable) :

// .prettierrc.json
{
  "semi": true,        // Ajouter des points-virgules
  "singleQuote": true, // Utiliser des guillemets simples
  "tabWidth": 2,       // Indentation de 2 espaces
  "trailingComma": "es5", // Virgule finale pour objets/tableaux multilignes (style ES5)
  "printWidth": 80     // Largeur de ligne maximale indicative
}

Pour formater vos fichiers (en les modifiant directement) :

npx prettier --write "**/*.js" 
# Ou via un script npm
"scripts": {
  "format": "prettier --write ."
}
# Puis : npm run format

Faire travailler ESLint et Prettier en harmonie

Comme ESLint possède des règles de style qui peuvent entrer en conflit avec la manière dont Prettier formate le code, il est essentiel de les faire collaborer correctement. Si les deux essaient d'imposer des styles différents, vous vous retrouverez avec des changements contradictoires.

La solution consiste à utiliser `eslint-config-prettier`. Ce paquet désactive toutes les règles de style d'ESLint qui sont inutiles ou qui pourraient entrer en conflit avec Prettier. Ainsi, ESLint se concentre sur la détection d'erreurs et l'application des bonnes pratiques logiques, tandis que Prettier gère exclusivement le formatage.

Installation :

npm install eslint-config-prettier --save-dev
# ou
yarn add eslint-config-prettier --dev

Ensuite, ajoutez `prettier` à la fin du tableau `extends` dans votre configuration ESLint (`.eslintrc.js`). Il doit être en dernier pour pouvoir surcharger les configurations précédentes.

// .eslintrc.js (extrait)
module.exports = {
  // ... autres configurations ...
  extends: [
    'eslint:recommended', 
    'plugin:node/recommended', // Exemple si vous utilisez eslint-plugin-node
    // Mettez 'prettier' EN DERNIER pour désactiver les règles conflictuelles
    'prettier' 
  ],
  // ... règles ...
};

Avec cette configuration, vous pouvez lancer ESLint pour vérifier la qualité et Prettier pour assurer le formatage, sans qu'ils ne se marchent sur les pieds. Certains développeurs utilisent aussi `eslint-plugin-prettier` pour exécuter Prettier comme une règle ESLint, mais l'approche recommandée est souvent de garder les deux outils séparés et de les exécuter indépendamment ou via des hooks.

Intégration dans votre flux de travail quotidien

Pour tirer le meilleur parti d'ESLint et de Prettier, il faut les intégrer de manière transparente dans votre processus de développement.

Intégration IDE : La plupart des éditeurs de code modernes (VS Code, WebStorm, Sublime Text, etc.) disposent d'extensions pour ESLint et Prettier. Configurez votre éditeur pour :

• Afficher les erreurs et avertissements ESLint directement dans le code.
• Formater automatiquement le code avec Prettier à chaque sauvegarde de fichier (`formatOnSave`).

Cela fournit un retour d'information immédiat et garantit que votre code est toujours propre.

Hooks Git (Pré-commit) : Pour assurer que seul du code propre et correctement formaté est commit dans votre dépôt Git, utilisez des hooks de pré-commit. Des outils comme `husky` et `lint-staged` sont parfaits pour cela. `husky` facilite la gestion des hooks Git, et `lint-staged` permet d'exécuter des commandes (comme ESLint et Prettier) uniquement sur les fichiers qui ont été modifiés et sont sur le point d'être commit (`staged files`).

Installation :

npm install husky lint-staged --save-dev
# ou
yarn add husky lint-staged --dev

# Initialisation (Husky v5+)
npx husky install
npm set-script prepare "husky install" # S'assure que husky install est lancé après npm install
npx husky add .husky/pre-commit "npx lint-staged"

Ajoutez la configuration `lint-staged` dans votre `package.json` :

// package.json (extrait)
{
  "lint-staged": {
    "*.js": [
      "eslint --fix",      // Lance ESLint (correction auto)
      "prettier --write"   // Lance Prettier (formatage)
    ],
    "*.{json,md,yaml}": [
      "prettier --write"   // Formate aussi d'autres types de fichiers
    ]
  }
}

Désormais, avant chaque `git commit`, `lint-staged` exécutera ESLint et Prettier sur les fichiers modifiés, garantissant la propreté du code ajouté au dépôt.

En adoptant ESLint et Prettier et en les intégrant à votre flux de travail, vous produirez un code Node.js plus fiable, plus lisible et plus facile à maintenir, tout en réduisant les frictions liées au style au sein de votre équipe. C'est un investissement essentiel pour tout projet Node.js sérieux.