Convention de codage pour JavaScript (Épisode 1)

5 min, 986 mots

Tags: eslint

En tant que développeur, tu dois comme moi passer beaucoup de temps à lire du code. Que ce soit des projets sur lesquels tu travailles ou contribues, des projets open source dont tu t’inspires ou encore du code présent dans des articles techniques.

Et comme moi, tu as sûrement tiré le constat que chacun a sa façon d’organiser son code. Et cela complique parfois la lecture. A chaque code étudié, il faut comprendre les règles d’écriture que c’est fixé le développeur.

Tu as toi-même tes propres règles d‘écriture, sans peut-être les avoir formalisées ni même en avoir conscience.

Et si on partageait tous ensemble une convention de codage ! Ça amènerait plein d’avantages :

  • On lirait plus vite le code car on sauterait l’étape de compréhension des règles d’écriture
  • On pourrait plus facilement contribuer à des projets open source. Plusieurs contributeurs mais un code uniforme.
  • On ne perdrait plus de temps à changer constamment nos normes d’écriture ne sachant pas laquelle est la bonne.
  • … (tu as sûrement toi-même d’autres idées d’avantages. N’hésite pas à les partager en commentaire).

Si tu es nouveau dans le code, sache que ce genre de convention existe déjà. Il y a par exemple Google qui propose une convention de codage pour plusieurs langages dont le JavaScript. Un autre convention de codage JavaScript très connue est celle de Airbnb. C’est d’ailleurs celle que j’ai moi-même adopté.

Et si tu adoptais toi-aussi une convention de codage ? Le monde du code serait meilleur 🙂

Comment on s’y prend ?

Si tu devais apprendre par cœur une convention de codage et vérifier à la fin de chaque journée que ton code respecte cette convention, tu n’en finirais plus.

Heureusement, ESLint existe.

C’est un analyseur de code qui te relève toutes les incohérences de ton code en fonction de la convention de codage que tu as adopté. C’est notamment très pratique pour des projets open source. Tu définis ta convention de codage dans un fichier .eslintrc.json. à la racine de ton projet. Ainsi, tout le monde pourra utiliser cette convention de codage directement sans passer des jours à l’apprendre par cœur avant.

Installation

ESLint est bien entendu présent dans le gestionnaire de paquets officiel de Node.js : npm. Pour l’installer dans ton projet (toujours mieux qu’en global), il suffit de lancer à la racine de ton projet :

$ npm install eslint --save-dev

L’option save-dev permet de définir le paquet comme une dépendance de développement.

Définition de sa convention de codage

Avant de pouvoir l’utiliser, il te faut définir ta convention de codage. Celle-ci s’écrit dans le fichier .eslintrc.json.

Pour te s’implifier la vie, ESLint te propose un script pour t’accompagner dans la création de ta convention de codage. Il te suffit de lancer la commande :

$ ./node_modules/.bin/eslint --init

Tu vas avoir alors plusieurs questions qui permettront à ESLint de te proposer de créer ton fichier définissant ta convention de codage.

ESLint te propose 3 processus différents pour établir ta convention de codage.

  • Répondre à des questions qui lui permettront de savoir tes habitudes de codage…
  • Choisir parmi des conventions de codage populaires. Notamment celle de Google, Airbnb.
  • Le laisser analyser un de tes fichiers pour qu’il en déduise ta convention de codage.

Personnellement, je te recommande de choisir la convention de codage de Airbnb qui est vraiment top. Tu pourras l’adapter ensuite à ta guise en complétant le fichier de configuration.

Pour ajouter tes propres règles, tu n’as qu’à ouvrir le fichier .eslintrc.json et les ajouter de cette manière :

{
  "rules": {
    "semi": ["error", "always"],
    "quotes": ["error", "double"]
  }
}

Dans rules, nous avons ajouté deux règles. Une règle sur les points-virgules (semi) et une règle sur les apostrophes (quotes). La liste de toutes les règles possibles se trouve sur le site d’ESLint.

Chaque règle prend deux valeurs. La première est le niveau d’erreurs à lever. Il y a trois niveaux différents :

  • "off" ou 0 – aucune erreur.
  • "warn" ou 1 – soulève une alerte.
  • "error" ou 2 – soulève une erreur.

La deuxième valeur est une option en fonction du critère choisi. Tu pourras trouver ces options sur la documentation de chaque critère.

ESLint est très puissant. Tu trouveras toutes sortes de paramètres en plus des règles sur leur site.

Utilisation

Maintenant que ta configuration est fini, il te suffit de lancer en ligne de commande le script suivi du fichier à analyser (dans mon cas index.js) :

$ ./node_modules/.bin/eslint ./index.js

ESLint va alors sortir toutes les erreurs trouvées dans ton code en accord avec ta convention de codage présente dans le fichier .eslintrc.json.

Pour vérifier tous les fichiers d’un projet, tu peux lancer cette commande à la racine de ton projet :

$ ./node_modules/.bin/eslint ./

Alors je suis d’accord avec toi qu’il n’est pas très pratique de lancer cette commande à chaque fois. Pour ma part, ESLint est intégré à mon éditeur favoris vim. ESLint va alors me remonter mes erreurs de codage en direct lors de l’édition de mon code. Ce principe existe pour toutes sortes d’éditeurs et d’IDE. Tu trouveras facilement sur internet comment l’intégrer à ton éditeur. Si ce n’est pas le cas, dis-le moi et je pourrai peut-être t’aider.

Les règles de codage

Comme je l’ai dis, partir sur la base d’une convention existante (Google ou Airbnb) est vraiment une bonne idée. Toutefois, pour se définir sa propre convention de codage, il est nécessaire de connaître chaque critère proposé par ESLint et de faire un choix.

Ce que je te propose c’est de voir ensemble chaque règle une par une. Mais comme il y en a vraiment beaucoup (et on peut même en créer soi-même), je vais consacrer un article par règle.


Série : Convention de codage JavaScript

Épisodes :