Aller au contenu

Code style

Le "code style" fait référence à un ensemble de conventions et de règles de formatage utilisées pour écrire du code informatique de manière cohérente et lisible. Il s'agit d'un aspect important de la programmation, car un code bien écrit et bien formaté est plus facile à comprendre, à maintenir, et facilite la collaboration avec d'autres développeurs.

Indentation : Utiliser l'espacement ou la tabulation pour définir la structure du code, notamment l'alignement des blocs de code, des instructions conditionnelles, des boucles, etc.

Conventions de nommage : Les conventions de nommage dictent comment les variables, les fonctions, les classes, les constantes, etc., doivent être nommés. Par exemple, en Python, on utilise souvent la convention "snake_case" pour les noms de variables et de fonctions, tandis qu'en Java, on utilise la convention "CamelCase" pour les noms de classes.

Commentaires : Les conventions peuvent inclure des directives sur la manière d'écrire des commentaires dans le code pour expliquer son fonctionnement, son but, et ses parties importantes.

Organisation du code : Les règles peuvent également inclure des directives sur la manière d'organiser le code, comme la disposition des importations, la structure des classes et des fonctions, etc.

Espaces vides : Les conventions peuvent spécifier l'utilisation d'espaces vides pour améliorer la lisibilité, par exemple, l'ajout d'espaces autour des opérateurs, des parenthèses, des 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" en programmation sont des styles utilisés pour écrire les noms de variables, fonctions, ou classes, en combinant majuscules, minuscules, et séparateurs pour rendre le code plus lisible.

snake_case : Les mots sont séparés par des underscores (_), et toutes les lettres sont en minuscules.

variable_name = "Hello, world!"

camelCase : Le premier mot commence par une minuscule, et chaque mot suivant commence par une majuscule, sans espaces ni underscores.

let variableName = "Hello, world!";

PascalCase : Chaque mot commence par une majuscule, y compris le premier mot. C'est souvent utilisé pour les noms de classes.

class ClassName
{
    // Code de la classe
}

kebab-case : Les mots sont séparés par des tirets (-), avec toutes les lettres en minuscules. Cette convention est souvent utilisée pour les noms de fichiers ou les identifiants CSS.

.background-color {
    color: white;
}

SCREAMING_SNAKE_CASE : C'est une variante du snake_case, mais avec toutes les lettres en majuscules. Utilisée principalement 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)

  • Toujours uniformiser l'indentation : Cela évite des problèmes (par exemple lors de la comparaison de fichiers).
  • Pas de tabulation (hard tab).

✅ De manière générale, indenter toutes les balises.

✅ Pas d'espace en fin de ligne (trailing white spaces).

✅ Une ligne vide à la fin de chaque fichier texte.

✅ Le code est écrit uniquement en minuscules (lowercase).

✅ L'encodage du fichier doit être UTF-8 sans BOM (encoding).

  • Spécifiez l'encodage du contenu dans votre fichier HTML avec la balise <meta charset="utf-8">.

✅ Un fichier HTML déclare le doctype HTML 5 <!doctype html>.

  • À placer sur la première ligne du fichier.

✅ Ne pas fermer les balises qui n'ont pas de contenu (<img>, <br>, <input>, …).

✅ Doubles guillemets pour les valeurs des attributs.

✅ Les attributs sont triés par ordre alphabétique.

✅ Les commentaires dans le code HTML sont utiles pour décrire et délimiter des zones de contenu.

  • En anglais uniquement.

✅ Ne pas omettre les balises optionnelles.

  • Cela peut rendre la lecture du code confuse.
  • Les balises optionnelles ne le sont que sous certaines conditions.

✅ Ne pas utiliser l'attribut type sur les balises <link> et <script>.

  • Sauf si les valeurs sont différentes de type="text/css" pour <link> et type="text/javascript" pour <script>.

✅ Vérifiez la validité de votre 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 ensemble et avec moi en cas de doutes, ou si des règles n'ont pas été clairement spécifiées.

Configurez vos IDE pour appliquer ces règles de mise en forme dans votre code source.

Prettier

Prettier est un outil de formatage de code source open source qui vise à rendre le code plus lisible en appliquant des conventions de formatage cohérentes et prédéfinies. Il est souvent décrit comme un "opinionated code formatter" (formateur de code avec des opinions) parce qu'il impose un style de formatage spécifique plutôt que de permettre aux développeurs de personnaliser le formatage à leur guise.

Automatisation du formatage : Prettier automatise le processus de formatage du code en le parcourant et en l'ajustant selon les règles de formatage prédéfinies. Cela signifie que les développeurs n'ont pas à se soucier du style de formatage, car Prettier le fait pour eux.

Conventions strictes : Contrairement à certains autres outils de formatage de code qui offrent de nombreuses options de personnalisation, Prettier est conçu pour imposer des conventions de formatage strictes. Cela garantit que le code a toujours le même aspect, quel que soit le développeur qui l'a écrit.

Prise en charge de nombreux langages : Prettier prend en charge un large éventail de langages de programmation, notamment JavaScript, TypeScript, HTML, CSS, JSON, YAML, Markdown, et bien d'autres. Il existe également des plugins pour étendre la prise en charge à d'autres langages.

Intégration facile : Prettier peut être intégré dans de nombreux éditeurs de code, IDE et systèmes de contrôle de version, ce qui facilite son utilisation dans le flux de travail de développement.

Convention over Configuration : L'approche de Prettier repose sur le principe "Convention over Configuration", ce qui signifie que les choix de formatage sont prédéfinis pour vous, réduisant ainsi les débats sur le style de code au sein de l'équipe.

➡️ Site web officiel

Note

La configuration des règles générales de base au niveau des conventions de code dans votre IDE, et l'utilisation de Prettier peuvent être complémentaires.

  • Tous les aspects ne sont pas forcément gérés par Prettier.

Prettier doit formater le code source après l'application des règles générales de base configurées dans votre IDE, afin de garantir que le formatage défini par Prettier n'est pas modifié par l'IDE.