Le linting, une bonne pratique !

Nathanaël Cherrier -

Le linting ("linter" son code) est une pratique qui vise à améliorer la qualité de votre code et de ce fait la reprise et la maintenabilité de celui-ci.

Vous avez sûrement déjà entendu parlé de JSHint ou JSLint sans forcément savoir ce que c'est. Ce sont des linteurs qui aident des développeurs JavaScript à produire du code propre — des linteurs existent dans quasiment tous les langages. Comment ?

Le principe du Linting

Pour beaucoup d'entre vous, sans vous en rendre compte, vous savez déjà de quoi il s'agit. Si vous avez déjà développé dans un langage compilé/pseudo-compilé comme le C, le Java et autres vous avez sûrement l'habitude à ce que votre IDE vous indique les erreurs dans le code.

Au départ lint était un logiciel qui faisait une analyse statique de code C pour en détecter les erreurs récurrentes, les erreurs d'indentation et les syntaxes spécifiques à un OS rendant le code non-portable. Il a ensuite été intégré dans les compilateurs C.

Le concept a depuis été repris et amélioré au fil des années et des langages.

Dans un IDE vous avez donc un linteur auquel on ajoute un débugeur, un profileur et tout un tas d'autres outils pour aider le développeur dans sa quête du code parfait.

Linting vs Debugging

Les erreurs dans les IDEs c'est le débugueur ou le linteur ?

Les deux. Le linteur va analyser le code de façon statique et le debugueur — comme beaucoup d'autres outils — le fait de façon dynamique. Cela veut dire que le debugueur va analyser le code lors de son exécution alors que le linteur va s'attarder sur les fichiers sources du projet le reste du temps. C'est à dire, lorsque le code n'est pas exécuté.

Par exemple, le linteur détectera :

  • les variables qui n'existent pas
  • les variables inutilisées
  • les doubles déclarations de variables, de fonctions, etc...
  • la mauvaise organisation du code
  • le non respect des bonnes pratiques d'écriture de code
  • les erreurs de syntaxe

Le debugueur détectera quand à lui :

  • les mauvais accès aux adresses mémoires
  • le nom respect des types de variable objet
  • le mauvais état d'une variable à un instant donné
  • les fuites de mémoire
  • les dépassements de pile

Le linting pour le web

Le linting pour les langages du web (PHP, JS, etc..) existe depuis de nombreuses années mais reste très peu connu et utilisé.

Dans le monde du développement web, les développeurs sont habitués à avoir plutôt un éditeur de texte qu'un IDE complet. Généralement, l'éditeur ne détectera aucune erreur pendant l'écriture du code s'il ne possède pas de fonctionnalité de linting.

Prenons par exemple Sublime Text, Atom et bien d'autres qui sont d'excellents outils de développement mais qui ne possèdent pas de fonctionnalité permettant la vérification du code.

Pourquoi est-ce une bonne pratique ?

Personnellement je ne compte plus le nombre de fois où j'ai récupéré des projets JavaScript ou PHP qui fonctionnaient très bien — là n'est pas la question — mais qui étaient quasi impossible à maintenir ou à faire évoluer.

Un développeur peut créer une application qui fonctionne en la codant comme un gros porc.

Des fois il revient moins cher à une entreprise de faire réécrire complètement une telle application plutôt que de la faire évoluer ; et ça c'est fort dommage...

Voilà tout l'intérêt du linteur, il va tenter de forcer le développeur à corriger le maximum d'erreurs potentielles avant la compilation et/ou l'exécution ainsi que l'inciter à écrire du meilleur code, du beau code.

A l'air du travail collaboratif et du très haut débit on ne veut plus réécrire sans cesse les mêmes applications. On veut qu'un code produit fonctionne, certes, mais il faut qu'il soit propre, lisible, maintenable, reprenable, et améliorable. On veut pouvoir capitaliser sur le savoir du développeur et sur le code produit.

Et des fois il ne suffit pas de grand chose :

  • en JS écrire des instructions sans les terminer par des point-virgules peut fonctionner mais une pratique communément adoptée par les équipes de développement est d'en mettre pour éviter les erreurs d'exécution sur différents moteurs
  • en HTML rien ne nous empêche d'utiliser un paragraphe <p></p> pour créer un menu en ligne mais la bonne pratique est d'utiliser les listes ; ce qui améliore l'accessibilité du site

Ce sont des choses qui peuvent être vérifié par un linteur et on peut aller très loin comme ça. Certains linteurs vérifient que vous déclariez vos fonctions de cette façon :

function nomDeLaFonction(param) {

plutôt que de cette façon :

function nomDeLaFonction (param){

D'ailleurs la coloration syntaxique de mon site — au moment où j'écris cet article — n'a pas l'air de comprendre que l'on puisse utiliser une autre manière de coder que celle du linteur...

Maintenant que vous êtes convaincu — vous n'avez pas le choix — voyons comment utiliser un linteur.

Comment linter son code ?

Un linteur se présente sous la forme d'un petit programme indépendant auquel on peut demander de lire et de vérifier les sources de notre projet.

# Pour linter du JS

npm install -g jshint  # installation
jshint votreFichier.js # utilisation

Lorsque votre projet consiste en un fichier ça peut suffire. Et encore, il faut penser à linter son code soi-même à chaque modification.

Pour nous faciliter la vie, de gentilles personnes ont codé des plugins permettant d'utiliser les linteurs avec la plupart des éditeurs de texte.

Pour pouvoir profiter des joies du linting dans notre éditeur de texte préféré, on va donc commencer par installer le linteur ensuite on recherche/installe le plugin qui va nous permettre d'intégré le linteur à notre environnement de développement (avec Sublime Text on peut installer un package qui s'appelle SublimeLinter et SublumeLinter-jshint).

Vous devriez pouvoir retrouver la liste des plugins pour éditeur de texte dans la doc des linteurs qui vous intéressent.