Aller au contenu

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 des espaces (généralement deux ou quatre, selon le langage et le projet) 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 pour les variables et les fonctions, PascalCase pour les classes
  • Java → camelCase pour les variables et les méthodes, PascalCase pour les classes

Sources :

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 noms de 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 différences lors des comparaisons de fichiers
  • Ne pas utiliser de tabulations (hard tabs)

✅ Indenter toutes les balises

✅ Pas d'espace en fin de ligne

✅ Terminer chaque fichier texte par un saut de ligne

✅ Tout le code HTML doit être écrit en minuscules : noms des balises, des attributs et valeurs techniques (ex. utf-8), hors texte affiché

✅ 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 éléments vides (void elements : <img>, <br>, <input>, …)

  • Ecrire <br>, et non <br /> ni <br></br>

✅ 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

Sources :

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.

Source : Prettier - What is Prettier?

Prettier et les règles HTML du cours

Si un projet utilise Prettier pour formater le HTML, le résultat diffère sur certains points des règles ci-dessus (Prettier 3.9, configuration par défaut).

Différences imposées par Prettier

  • Eléments vides : Prettier ajoute une barre oblique finale (<br> devient <br />), sans option pour le désactiver. Cette barre oblique est autorisée par le standard HTML, mais n'a aucun effet.
  • Longueur des lignes : au-delà de 80 caractères (option printWidth), Prettier coupe le texte et place chaque attribut d'une balise sur sa propre ligne.

Règles que Prettier n'applique pas (à respecter soi-même)

  • Ordre alphabétique des attributs
  • Suppression de l'attribut type sur <link> et <script>
  • Commentaires en anglais

Règles appliquées comme dans le cours

  • Indentation de 2 espaces, sans tabulation
  • Suppression des espaces en fin de ligne et saut de ligne à la fin du fichier
  • Noms des balises et des attributs en minuscules, doctype écrit <!doctype html>
  • Doubles guillemets pour les valeurs d'attributs

→ Dans un projet qui utilise Prettier, c'est sa notation (<br />) qui s'applique : l'essentiel est que toute l'équipe utilise le même outil avec la même configuration.

Source : Prettier - Options