Les conventions d'écriture de JavaScript

Mise en forme du code

• Indentation: 2 espaces par niveau (convention la plus courante), jamais un mélange d'espaces et de tabulations.
• Espaces autour des opérateurs (a + b, x = 5) et après les virgules.
• Guillemets: choisissez doubles "..." ou simples '...' et restez cohérent ; les gabarits `...${variable}...` servent quand on insère une valeur.
• Longueur des lignes: environ 80 à 100 caractères maximum.
• Une ligne vide pour séparer les blocs logiques.

// ✘ Difficile à lire
let a=12,b=15;function moy(x,y){return (x+y)/2}console.log('Moyenne : '+moy(a,b))

// ✔ Lisible
const noteDevoir = 12;
const noteExamen = 15;

function calculerMoyenne(note1, note2) {
  return (note1 + note2) / 2;
}

console.log(`Moyenne : ${calculerMoyenne(noteDevoir, noteExamen)}`);

Les commentaires

• // ...: commentaire sur une ligne.
• /* ... */: commentaire sur plusieurs lignes.
• /** ... */: commentaire de documentation JSDoc, reconnu par VS Code qui l'affiche au survol de la fonction.
• Un bon commentaire explique pourquoi, pas ce que fait une ligne évidente.

/**
 * Calcule la moyenne d'un tableau de notes.
 * @param {number[]} notes - Les notes sur 20.
 * @returns {number} La moyenne arrondie à 2 décimales.
 */
function calculerMoyenne(notes) {
  const total = notes.reduce((somme, note) => somme + note, 0);
  // On arrondit pour l'affichage du bulletin (2 chiffres après la virgule)
  return Math.round((total / notes.length) * 100) / 100;
}

7. Les bonnes pratiques modernes

   • const par défaut, let si la valeur doit changer, jamais var (ancienne syntaxe aux règles de portée piégeuses).
   • === et !== plutôt que == et !=: la comparaison stricte ne convertit pas les types ("5" == 5 vaut true, "5" === 5 vaut false).
   • Toujours des accolades, même pour un if d'une seule ligne.
   • Éviter les variables globales: déclarer les variables dans le bloc ou la fonction où elles servent.
   • Mode strict: "use strict"; en haut d'un script classique transforme certaines erreurs silencieuses en vraies erreurs. Les modules et les classes sont automatiquement en mode strict.
   • Des fonctions courtes qui font une seule chose.

   "use strict";
   
   const NOTE_MAX = 20;
   let nombreEssais = 0;
   
   if (nombreEssais === 0) {
     console.log("Premier essai");
   }
   
   totalPoints = 10; // ✘ ReferenceError en mode strict : variable non déclarée

8. Faire vérifier ses conventions par des outils

   • Prettier s'occupe de la forme: indentation, guillemets, points-virgules, longueur des lignes. Avec Format On Save, le code est remis en forme à chaque enregistrement.
   • ESLint s'occupe du fond: variables inutilisées ou non déclarées, == au lieu de ===, code inaccessible…
   • Configuration minimale d'ESLint (fichier eslint.config.mjs à la racine, ESLint 9) :

   // eslint.config.mjs
   import js from "@eslint/js";
   import globals from "globals";
   
   export default [
     js.configs.recommended,
     {
       languageOptions: {
         globals: globals.browser // document, window, console… sont connus
       },
       rules: {
         eqeqeq: "error",       // impose === et !==
         "no-var": "error",     // interdit var
         "prefer-const": "warn" // conseille const si la variable ne change pas
       }
     }
   ];

   • Pour l'installer dans un projet (Node.js nécessaire) : npm init -y puis npm install --save-dev eslint @eslint/js globals.
   • Un fichier .prettierrc fixe les choix de Prettier pour toute l'équipe : { "semi": true, "singleQuote": false, "tabWidth": 2 }.

9. Activités

Activité 1 : bon nom ou mauvais nom ?

• Classez chaque nom en « valide et conforme », « valide mais non conforme » ou « invalide » : prixTTC, 2emeNote, Prix_total, class, estMajeur, TAUX_REMISE, calcul moyenne, $bouton, NombreDeStagiaires (pour une variable).

Activité 2 : rendre ce code lisible

• Réécrivez ce code en appliquant toutes les conventions de la leçon :

var N1=14,n2=9,N3=17
function F(a,b,c){var t=a+b+c;return t/3}
if(F(N1,n2,N3)>=10)console.log('admis')
else console.log("ajourné")

Activité 3 : le piège de return

• Exécutez dans la console les deux fonctions obtenirStagiaire() et obtenirStagiaireCorrect() de la leçon. Expliquez la différence de résultat.

Activité 4 : laisser les outils travailler

• Collez le code de l'activité 2 (version d'origine) dans un fichier, enregistrez avec Prettier activé : que change-t-il ? Que ne change-t-il pas ?
• Installez ESLint dans le projet avec la configuration de la leçon et relevez les messages affichés. Corrigez-les un par un.
• Déposez les deux versions (avant/après) dans votre dépôt GitHub js-conventions.

const note1 = 14;
const note2 = 9;
const note3 = 17;

function calculerMoyenne(a, b, c) {
  const total = a + b + c;
  return total / 3;
}

if (calculerMoyenne(note1, note2, note3) >= 10) {
  console.log("Admis");
} else {
  console.log("Ajourné");
}

À retenir

• JavaScript est sensible à la casse; on termine les instructions par ;.
• camelCase pour les variables et fonctions, PascalCase pour les classes, UPPER_SNAKE_CASE pour les constantes de configuration.
• const par défaut, let si nécessaire, jamais var; === plutôt que ==.
• Prettier gère la forme, ESLint le fond : ils appliquent les conventions pour vous.

Sources : MDN Web Docs (developer.mozilla.org), documentation de Visual Studio Code et des Chrome DevTools.