Home JS JSHint et la remise en qualité du code Javascript

JSHint et la remise en qualité du code Javascript

  Zlatko P. Intégrateur graphique 5 min 31 octobre 2013

JSHint est un outil Open Source qui permet de détecter les erreurs et problèmes potentiels de vos fichiers Javascript, tout en obligeant les différents intervenants sur un projet à respecter une convention propre de codage. Il est très flexible et permet un ajustement selon l’environnement et les besoins d’un projet donné.

JSHint est un module qui s’installe à travers NodeJS. Une fois l’installation effectuée et le ou les répertoires à surveiller désignés, il faut paramétrer les règles qui lui serviront de référence pour mettre des alertes dans le code en soulignant les endroits où des problèmes sont détectés.

Ces règles peuvent être trouvées dans la documentation JSHint sous la forme de booléen true/false selon que vous voulez activer ou désactiver une option.

A noter qu’il est également possible d’activer/désactiver ces règles au cas par cas directement dans le code à l’aide de commentaires. Pour cela, il faut utiliser le mot réservé jshint suivi de l’option à désactiver et de sa valeur. Ne pas oublier de réactiver juste en-dessous si vous souhaitez que cela s’applique uniquement à cette ligne :

 

/* jshint camelcase:false */
var PrefixMap = document.JSON_fidelityPrefixMap;
/* jshint camelcase:true */

 

Nous allons passer quelques règles en revue, notamment les plus intéressantes :

 

  • global : permet en l’ajoutant manuellement sous forme de commentaire en haut de page de soustraire toutes les fonctions, propriétés ou variables qui suivront et qui sont hors de portée du scope du fichier.
  • camelcase : permet d’indiquer une erreur partout où le nommage de variables n’est pas fait sous la forme camelCase.
  • curly : permet d’indiquer une erreur partout où il manque des accolades dans les boucles et les conditions.
  • eqeqeq : permet d’indiquer une erreur partout où les comparaisons de valeurs ne sont pas faites strictement (comparaison du type) à l’aide du triple === ou !==.
  • indent : permet d’indiquer une erreur partout où le code est mal indenté afin d’améliorer sa lisibilité et donc sa maintenance.
  • forin : permet d’indiquer une erreur partout où une boucle for…in ne contient pas un bloc conditionnel filtrant les propriétés de l’objet sur lequel on itère pour ne pas récupérer les propriétés héritées à travers le prototype.
  • latedef : permet d’indiquer une erreur partout où une variable est utilisée sans avoir préalablement été déclarée.

 

Il existe également des options d’environnement :

 

  • browser : permet de renseigner JSHint sur les propriétés du navigateur comme par exemple document ou navigator.
  • jquery :  permet de renseigner JSHint sur l’utilisation du framework JQuery dans le contexte du projet et ainsi éviter des notifications d’erreurs de scope quand il y a manipulation du DOM avec.

 

Et bien d’autres options…

 

Cerise sur le gâteau : en reliant l’outil à l’intégration continue, le code poussé sur le logiciel de gestion de versions  sera testé pour valider sa conformité aux règles définies.

 

Attention, JSHint ne permet pas de détecter que le programme fait ce qu’il doit faire ou s’il le fait de façon performante. Son utilisation ne vous exonère pas de tests unitaires et de revues de code.

 

Il est bien sûr intéressant de l’utiliser sur un projet d’une certaine taille tout de même avec un certain nombre de fichiers javascript et des intervenants réguliers.

 

Lire les articles similaires

Laisser un commentaire

Social Share Buttons and Icons powered by Ultimatelysocial