Qu’est-ce que JSLint ?

JSLint est un analyseur de code Javascript. Son but est de parser votre code Javascript pour vérifier que vous respecter les règles de coding Javascript.

Le produit est développé par Douglas Corckford en javascript. Nous allons ici l’utiliser en mode ligne de commande grâce à NodeJS.

Installation

Installer NodeJS

L’installation de NodeJS peut se faire de deux manières. Soit avec votre gestionnaire de paquet favori, soit via les sources de NodeJS.

Installation par gestionnaire de paquet

Sous gentoo

# emerge nodejs

Sous Debian/Ubuntu

# aptitude install nodejs

Installation via les sources

Nous allons tout d’abord récupérer les sources de NodeJS sur github

$ cd ~/Logiciel
$ git clone https://github.com/joyent/node.git nodejs

Configurons ensuite la compilation de NodeJS. Nous souhaitons que l’utilitaire node soit disponible dans notre PATH pour l’utiliser simplement. Nous allons donc installer node dans /usr/bin/ ( mais aussi les dossier /usr/include/node etc …)

$ cd nodejs
$ ./configure --prefix=/usr

La compilation ne pause pas plus de problème

$ make
# make install

Nous avons maintenant accès aux commandes node comme node et npm.

Installer JSLint

Pour installer JSLint nous allons utiliser le gestionnaire de packet de NodeJS : npm (pour Node Package Manager).

Par défaut npm installe les packets dans le dossier courant. Ceci n’est pas forcément ce que nous souhaitons. Nous allons donc installer JSLint dans /usr/lib/node_modules.

# cd /usr/lib/node_modules
# npm jslint

Nous allons maintenant rendre disponible la commande jslint dans notre PATH. Comme nous ne voulons pas modifier notre variable d’environnement nous allons créer un lien symbolique dans /usr/bin/.

# ln -s /usr/lib/node_modules/jslint/bin/jslint.js /usr/bin/jslint

Nous pouvons maintenant utiliser la commande jslint.

Utilisation

JSLint est, à l’origine, développé pour être utilisé via une page web. Aussi sa configuration est réalisée en Javascript. La commande jslint ne fait que exécuter le script javascript jslint.js avec NodeJS (par exemple).

Utilisation basique

Chaque option de jslint va influer sur la validation effectuée. Nous pourrions par exemple spécifier si nous autorisons ou non l’utilisation de la méthode eval avec l’option evil ou le nombre d’espace utilisés pour l’indentation (qui par défaut est 4).

La liste des options disponibles sont documentées sur le site de jslint : [http://www.jslint.com/lint.html#options]

Seulement toutes les options ne peuvent être passées via la ligne de commande. Pour obtenir la liste des options disponibles nous pouvons exécuter jslint seul.

$ jslint

No files specified.

Usage: /usr/bin/jslint \[--indent\] \[--maxerr\] \[--maxlen\] \[--predef\] \[--anon\] \[--bitwise\] \[--browser\] \[--cap\] \[--continue\] \[--css\] \[--debug\] \[--devel\] \[--eqeq\] \[--es5\] \[--evil\] \[--forin\] \[--fragment\] \[--newcap\] \[--node\] \[--nomen\] \[--on\] \[--passfail\] \[--plusplus\] \[--properties\] \[--regexp\] \[--rhino\] \[--undef\] \[--unparam\] \[--sloppy\] \[--sub\] \[--vars\] \[--white\] \[--widget\] \[--windows\] \[--json\] \[--color\] [--] <scriptfile>...

Nous pouvons donc par exemple tester avec un script Javascript simple

function foo() {
  var a = 2;
  if (a == 2) {
    console.warn("Equal !");
  }
}

Si nous le validons avec jslint nous obtenons une erreur concernant l’opérateur de comparaison.

$ jslint test.js
test.js

#1 Missing 'use strict' statement.
var a = 2; // Line 2, Pos 5

#2 Expected '===' and instead saw '=='.
if (a == 2) { // Line 3, Pos 11

Si nous ajoutons l’option –eqeq ceci inversera le résultat par défault.

$ jslint --eqeq test.js

test.js

#1 Missing 'use strict' statement.

var a = 2; // Line 2, Pos 5

Nous n’avons plus maintenant les erreurs relatives à l’opérateur de comparaison.

Utilisation avec jQuery

Un problème se pose rapidement quand nous voulons utiliser jslint avec jQuery.

$ jslint custom.js

custom.js

#1 '$' was used before it was defined.
if (!$(".bloc\_contenu table>tbody>tr").hasClass("ligne\_erreur")) { // Line 8, Pos 10

#2 '$' was used before it was defined.
$("#recherche input").attr("value", "Rechercher"); // Line 19, Pos 5

#3 Expected '$' at column 9, not column 7.
$("#recherche input").attr("value", ""); // Line 21, Pos 7
  
#4 '$' was used before it was defined.
$(document).ready(function () { // Line 32, Pos 1

jslint nous informe que l’objet jQuery (abrégé $) n’est pas défini. En effet jslint ne peut valider que la méthode $(document), par exemple, existe bien et est valide, car il ne connait pas jQuery. Nous allons donc ajouter les objets jQuery et $ comme objet globalement valide.

Pour cela nous devons modifier notre fichier JavaScript pour y ajouter des commentaires. Ceux-ci configureront jslint. Le mot clef pour enregistrer des objets globalement est … global. Ajoutons donc la ligne suivante au début de notre fichier javascript.

/\*global jQuery, $ \*/

Si vous re-exécuter jsunit sur votre script vous n’obtiendrez plus les erreurs concernant jQuery.

Conclusion

La qualité globale des scripts JavaScript n'étant pas toujours très bien assimilée nous avons ici avec jslint un outil de qualité pour la validation.

Il est à noter qu’un plugin intéressant pour vim nommé, très originalement, jslint.vim, vous permet d’intégrer jslint à vim. Voir [https://github.com/hallettj/jslint.vim]