Écrire un code propre et maintenable (ESLint, Prettier)

1. Objectifs

   • Connaître les principes d'un code propre et maintenable.
   • Réécrire (refactoriser) un code difficile à lire.
   • Installer et configurer ESLint et Prettier dans un projet avec npm.
   • Automatiser les vérifications avec des scripts npm et VS Code.

2. Qu'est-ce qu'un code propre ?

   • Un code propre se lit facilement, fait ce qu'il annonce, se modifie sans tout casser et ne contient pas de répétitions inutiles.
   • Le code est lu bien plus souvent qu'il n'est écrit : ce que vous gagnez en écrivant vite, vous le perdez dix fois en relisant, en corrigeant et en expliquant.
   • Un code « qui marche » n'est pas forcément un bon code : il doit aussi être compréhensible par un autre développeur.

3. Les principes essentiels

Principe	Signification
Noms explicites	moyenneGenerale plutôt que m; une fonction commence par un verbe : calculerTotal().
Une fonction = une tâche	Des fonctions courtes ; si une fonction calcule ET affiche ET enregistre, on la découpe.
DRY (Don't Repeat Yourself)	Un même bloc copié trois fois devient une fonction.
KISS (Keep It Simple, Stupid)	La solution la plus simple qui fonctionne est souvent la meilleure.
YAGNI (You Aren't Gonna Need It)	On ne code pas aujourd'hui une fonctionnalité « au cas où ».
Pas de nombres magiques	if (note >= SEUIL_ADMISSION) plutôt que if (note >= 10).
Retour anticipé	On traite les cas d'erreur au début de la fonction pour éviter les if imbriqués.
Fonctions pures	Une fonction qui calcule sans modifier l'extérieur est facile à tester et à réutiliser.
Séparer logique et affichage	Les calculs dans un module (notes.js), la manipulation du DOM dans un autre (affichage.js).



4. Exemple de refactorisation

Avant: ce code fonctionne, mais il est difficile à lire, à modifier et à tester.

var l = [12, 8, 15, 20, 9]
function f(x) {
  var t = 0, c = 0
  for (var i = 0; i < x.length; i++) {
    if (x[i] >= 0) { if (x[i] <= 20) { t = t + x[i]; c++ } }
  }
  var m = t / c
  if (m >= 10) { document.getElementById("r").innerHTML = "Moyenne : " + m + " admis" }
  else { document.getElementById("r").innerHTML = "Moyenne : " + m + " ajourné" }
}
f(l)

Après: noms explicites, constantes, fonctions pures séparées de l'affichage, textContent.

const NOTE_MIN = 0;
const NOTE_MAX = 20;
const SEUIL_ADMISSION = 10;

const estNoteValide = (note) => note >= NOTE_MIN && note <= NOTE_MAX;

function calculerMoyenne(notes) {
  const notesValides = notes.filter(estNoteValide);
  if (notesValides.length === 0) {
    return 0;
  }
  const total = notesValides.reduce((somme, note) => somme + note, 0);
  return total / notesValides.length;
}

function obtenirDecision(moyenne) {
  return moyenne >= SEUIL_ADMISSION ? "admis" : "ajourné";
}

function afficherResultat(moyenne) {
  const zone = document.querySelector("#resultat");
  zone.textContent = `Moyenne : ${moyenne.toFixed(2)} (${obtenirDecision(moyenne)})`;
}

afficherResultat(calculerMoyenne([12, 8, 15, 20, 9]));

5. Installer ESLint et Prettier avec npm

   • Il faut Node.js (version LTS, sur nodejs.org), qui installe aussi npm. Vérifiez avec node -v et npm -v.
   • Dans le dossier du projet :

   npm init -y
   npm pkg set type=module
   npm install --save-dev eslint @eslint/js globals prettier eslint-config-prettier

   • npm init -y crée le fichier package.json; type=module permet d'utiliser import/export dans les fichiers de configuration ; --save-dev indique des outils de développement (ils ne sont pas envoyés aux visiteurs).
   • Ajoutez un fichier .gitignore contenant node_modules/: ce dossier ne doit jamais être envoyé sur GitHub.

6. Configurer ESLint

   • Créez à la racine le fichier eslint.config.js (format « flat config », utilisé par ESLint 9 et 10) :

   import js from "@eslint/js";
   import globals from "globals";
   import eslintConfigPrettier from "eslint-config-prettier/flat";
   
   export default [
     {
       ignores: ["node_modules/", "coverage/"],
     },
     js.configs.recommended,
     {
       files: ["**/*.js"],
       languageOptions: {
         ecmaVersion: "latest",
         sourceType: "module",
         globals: {
           ...globals.browser,
           ...globals.node,
         },
       },
       rules: {
         eqeqeq: "error",
         "no-var": "error",
         "prefer-const": "warn",
         "no-unused-vars": "warn",
         "no-console": ["warn", { allow: ["warn", "error"] }],
         "no-eval": "error",
         "no-implied-eval": "error",
         "id-length": ["warn", { min: 2, exceptions: ["i", "j"] }],
         "no-restricted-syntax": [
           "error",
           {
             selector: "AssignmentExpression[left.property.name='innerHTML']",
             message: "Risque XSS : utilisez textContent ou createElement.",
           },
         ],
       },
     },
     eslintConfigPrettier,
     {
       // après Prettier : on réactive les accolades obligatoires (compatible avec Prettier)
       rules: { curly: ["error", "all"] },
     },
   ];

   • js.configs.recommended active les règles recommandées (variable non déclarée, code inaccessible…).
   • globals.browser déclare document, window… pour qu'ESLint ne les signale pas comme inconnus.
   • eslint-config-prettier désactive les règles de mise en forme d'ESLint qui entreraient en conflit avec Prettier : ESLint s'occupe du fond, Prettier de la forme.
   • id-length signale les noms trop courts (sauf i et j) et no-restricted-syntax interdit ici d'écrire dans innerHTML, pour appliquer automatiquement la leçon sur la sécurité.
   • Chaque règle peut valoir "off", "warn" (avertissement jaune) ou "error" (erreur rouge).

7. Configurer Prettier

   • Fichier .prettierrc à la racine :

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

   • Fichier .prettierignore pour exclure ce qui ne doit pas être reformaté : node_modules, coverage, fichiers *.min.js.

8. Utiliser les outils

   • Ajoutez des scripts dans package.json:

   npm pkg set scripts.lint="eslint ."
   npm pkg set scripts.lint:fix="eslint . --fix"
   npm pkg set scripts.format="prettier --write ."

   • Puis lancez npm run lint pour lister les problèmes, npm run lint:fix pour corriger automatiquement ce qui peut l'être, et npm run format pour mettre en forme tous les fichiers.
   • Exemple de résultat d'ESLint sur le code « Avant » :

   src/avant.js
      1:1   error    Unexpected var, use let or const instead            no-var
      1:5   warning  Identifier name 'l' is too short (< 2)              id-length
      2:10  warning  Identifier name 'f' is too short (< 2)              id-length
      ...
      8:18  error    Risque XSS : utilisez textContent ou createElement  no-restricted-syntax
      9:10  error    Risque XSS : utilisez textContent ou createElement  no-restricted-syntax
   
   ✖ 12 problems (6 errors, 6 warnings)
     4 errors and 0 warnings potentially fixable with the `--fix` option.

   • Dans VS Code, les extensions ESLint et Prettier utilisent automatiquement ces fichiers : les erreurs sont soulignées pendant la frappe et le code est formaté à chaque enregistrement (Format On Save).
   • Pour aller plus loin : les outils husky et lint-staged lancent ESLint et Prettier automatiquement avant chaque commit.

9. Activités

Activité 1 : repérer les défauts

• Relevez dans le code « Avant » au moins 8 défauts en citant le principe non respecté (noms, nombres magiques, var, ==, innerHTML, duplication…).

Activité 2 : installer les outils

• Dans un nouveau dépôt GitHub js-code-propre, installez ESLint et Prettier avec la configuration de la leçon, ajoutez le .gitignore et les scripts npm.
• Placez le code « Avant » dans src/avant.js et lancez npm run lint. Notez le nombre d'erreurs et d'avertissements.

Activité 3 : corriger avec les outils

• Lancez npm run lint:fix puis npm run format. Quels problèmes ont été corrigés automatiquement ? Lesquels restent à corriger à la main ?
• Terminez la refactorisation jusqu'à obtenir 0 erreur. Faites un commit avant et après.

Activité 4 : refactoriser

function calc(p, q, t) {
  if (t == 1) { return p * q * 1.19 }
  if (t == 2) { return p * q * 1.07 }
  if (t == 3) { return p * q }
}

• Réécrivez cette fonction de calcul de prix TTC (prix, quantité, type de TVA) avec des noms explicites, un objet de constantes pour les taux, et un retour d'erreur clair pour un type inconnu.

const TAUX_TVA = {
  normal: 0.19,
  reduit: 0.07,
  exonere: 0
};

function calculerPrixTTC(prixUnitaire, quantite, typeTva) {
  if (!(typeTva in TAUX_TVA)) {
    throw new Error(`Type de TVA inconnu : ${typeTva}`);
  }
  const prixHT = prixUnitaire * quantite;
  return prixHT * (1 + TAUX_TVA[typeTva]);
}