Code style

Le code style désigne l'ensemble des conventions et règles de formatage utilisées pour écrire du code de manière cohérente, lisible et maintenable. Un code bien formaté facilite la compréhension, la relecture, la maintenance et la collaboration entre développeurs.

Principes généraux

Indentation

Utiliser l'espacement (généralement deux espaces) ou la tabulation pour structurer le code : blocs, boucles, conditions, etc.

Conventions de nommage

Définir des règles claires pour nommer les variables, fonctions, classes ou constantes.

Exemples :

Python → snake_case
Java → CamelCase

Commentaires

Ajouter des commentaires clairs et pertinents pour expliquer la logique du code, ses objectifs ou ses parties complexes.

Organisation du code

Structurer logiquement le code (imports, fonctions, classes) pour le rendre facile à lire et à naviguer.

Espaces vides

Utiliser les espaces pour aérer le code : autour des opérateurs, parenthèses, accolades, etc.

Pour le HTML, il existe également des conventions et des règles, bien que celles-ci se concentrent davantage sur la structuration et la mise en forme du code HTML plutôt que sur des aspects tels que l'organisation du code ou les conventions de nommage, qui sont plus courants dans les langages de programmation.

Conventions de nommage - Case

Les différentes "cases" (styles d'écriture) permettent de rendre le code plus lisible.

snake_case

Mots séparés par des underscores, en minuscules.

variable_name = "Hello, world!"

camelCase

Première lettre en minuscule, majuscules aux débuts des mots suivants.

let variableName = "Hello, world!";

PascalCase

Chaque mot commence par une majuscule, utilisé notamment pour les classes.

class ClassName
{
    // Code de la classe
}

kebab-case

Mots séparés par des tirets, en minuscules, souvent pour les fichiers ou identifiants CSS.

.background-color {
    color: white;
}

SCREAMING_SNAKE_CASE

Variante en majuscules du snake_case, pour les constantes.

#define MAX_SIZE 100

Les règles générales de base (HTML)

✅ 2 espaces pour l'indentation du code (soft tab)

Uniformiser l'indentation pour éviter les écarts lors des comparaisons de fichiers
Ne pas utiliser de tabulations (hard tabs)

✅ Indenter toutes les balises

✅ Pas d'espace en fin de ligne

✅ Une ligne vide à la fin de chaque fichier texte

✅ Tout le code HTML doit être écrit en minuscules

✅ Encodage du fichier : UTF-8 sans BOM

Déclarer l'encodage dans le fichier HTML :

<meta charset="utf-8">

✅ Le fichier HTML déclare le doctype HTML 5

→ A placer sur la première ligne du fichier.

<!doctype html>

✅ Ne pas fermer les balises sans contenu (<img>, <br>, <input>, …)

✅ Utiliser des doubles guillemets pour les attributs

✅ Trier les attributs par ordre alphabétique

✅ Commentaires en anglais uniquement

✅ Ne pas omettre les balises optionnelles

✅ Ne pas utiliser l'attribut type sur <link> ou <script>, sauf cas spécifiques

✅ Vérifier la validité du code avec le validateur du W3C : Nu Html Checker

Exemple

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>…</title>
    <link href="…" rel="stylesheet">
    <script src="…"></script>
  </head>
  <body>
    <!-- Page header -->
    <header>
      <img alt="…" src="…">
      <h1>…</h1>
      <!-- Site navigation -->
      <nav>…</nav>
    </header>
    <!-- Main content -->
    <section>
      <h2>…</h2>
      <div>
        <p>
          <strong>…</strong>
          <br>
          <a href="…" title="…">…</a>
        </p>
        <ul>
          <li>…</li>
          <li>…</li>
        </ul>
      </div>
    </section>
    <!-- Page footer -->
    <footer>…</footer>
  </body>
</html>

Tip

Discutez entre vous et avec moi si des règles ne sont pas clairement définies.

Configurez vos IDE pour appliquer automatiquement ces règles de formatage.

Prettier

Prettier est un outil open source de formatage automatique de code source. Il garantit un style de code cohérent et uniforme dans un projet.

Automatisation du formatage

Prettier reformate automatiquement le code selon des règles prédéfinies.

Conventions strictes

Le formatage est imposé (peu de personnalisation) pour éviter les divergences de style entre développeurs.

Compatibilité étendue

Supporte de nombreux langages : JavaScript, TypeScript, HTML, CSS, JSON, Markdown, YAML, etc.

Intégration facile

Fonctionne avec la plupart des IDE, éditeurs de texte et systèmes de contrôle de version.

Convention over Configuration

L'outil impose des conventions standard plutôt que de dépendre de configurations personnalisées.

➡️ Site web officiel

Note

L'utilisation de Prettier complète la configuration des règles générales de code dans votre IDE.

Tous les aspects ne sont pas pris en charge par Prettier.
Prettier doit être exécuté après les règles de base appliquées par l'IDE.

Cela garantit que le formatage final reste cohérent.