Préface
Jshint est utilisé pour analyser et vérifier que le code JavaScript est conforme à vos règles de codage. Cet outil puissant peut aider à repérer les erreurs et les problèmes dans votre code, et il oblige votre équipe à maintenir certaines conventions et styles de codage, ce qui rend le code fiable et plus facile à lire.
Dans cet article, je vais vous montrer comment installer, configurer et utiliser Jshint. Un exemple est également inclus répertoriant certains de mes éditeurs préférés qui peuvent utiliser Jshint.
Installer Jshint
L'installation de Jshint est très facile, vous pouvez utiliser le Node Package Manager (NPM). Si vous n'avez pas encore installé NPM, vous pouvez télécharger la dernière version du site Web de Nodejs pour installer Node.js et NPM.
Une fois le NPM installé, vous pouvez utiliser la commande suivante pour installer Jshint:
NPM Installer Jshint -g
Le paramètre -g indique npm que nous voulons installer globalement afin que nous puissions appeler cette commande dans n'importe quel répertoire.
Vérifiez le code via la ligne de commande
Maintenant que Jshint est installé, utilisons jshint dans la ligne de commande pour analyser un fichier de code JavaScript.
Voici un fichier avec le nom de fichier Demo1.json:
Nous utilisons la commande suivante pour analyser le code:
Jshint Demo1.js
Jshint nous dit qu'il y a une erreur sur la ligne 8 du fichier Demo1.js, la raison: un point-virgule est manquant.
Si nous remplissons le point-virgule manquant et exécutons à nouveau cette commande, il n'y aura pas de sortie de message d'erreur.
Configurer Jshint
Jshint a une configuration par défaut pour analyser votre code, mais ses paramètres de configuration sont conçus pour être très flexibles. Il existe quatre façons de fournir des fichiers de traitement de configuration pour Jshint.
Une façon consiste à utiliser le paramètre --config pour spécifier le fichier de configuration:
Jshint Demo1.js - Config config.json
Une autre façon consiste à mettre la configuration dans un fichier appelé .jshintrc, car Jshint recherchera ce fichier de configuration dans le même répertoire de niveau pour l'analyse de code. S'il n'est pas trouvé, il continuera de rechercher le répertoire supérieur avant le répertoire racine, qui nous permet de définir différents fichiers de configuration pour un projet.
La troisième façon consiste à mettre des informations de configuration dans la propriété jshintconfig du fichier package.json.
Dans l'une de ces trois méthodes, les informations de configuration sont le format JSON pour spécifier chaque paramètre pour indiquer à l'option Jshint d'être activé ou désactivé. Par exemple: "inutilisé" et "Undef" dans le fichier de configuration suivant est d'activer des alarmes pour les variables inutilisées et non définies. "Curly" vous oblige à toujours mettre des accolades sur des boucles et des blocs conditionnels. "eqeqeq" signifie que == et! = sont interdits, mais doivent être utilisés === et! ==. "Globals" est utilisé pour spécifier une liste blanche de variables globales qui ne sont pas définies dans le code.
La quatrième méthode consiste à rédiger des informations de configuration dans le fichier de code en annotation.
Vous pouvez afficher différentes options de configuration pour contrôler le comportement de Jshint.
Un petit exemple
Ensuite, fonctionnons sur les options du fichier de configuration config.json mentionné ci-dessus. Supposons que nous ayons un fichier JavaScript ci-dessous, qui n'est qu'un petit morceau de code uniquement.
Si nous exécutons la commande jshint demo2.js --config config.json , nous obtiendrons le résultat suivant:
Il y a 4 erreurs dans notre code. Sur la ligne 9, Jshint invite que le bloc de code "IF" doit être enveloppé dans des accolades. La variable subscription_id est définie mais non utilisée. Dans les lignes 9 et 11, "confirmer" et "console" ne sont pas définis.
Nous pouvons éviter les deux premières erreurs avec juste une petite modification:
Maintenant, ajoutons une option de développement dans le fichier config.json et définissons-la sur true afin que Jshint puisse reconnaître "Confirmer" et "Console".
À ce stade, si nous exécutons à nouveau la commande jshint, il n'y aura pas d'erreurs.
Résumer
Jshint est un très bon outil pour réduire les erreurs de code. De nombreux éditeurs fournissent un support Jshint. Les amis qui sont juste intéressés peuvent étudier davantage Jshint. Ce qui précède consiste à utiliser Jshint pour réduire les erreurs JavaScript. J'espère que cela sera utile à tous ceux qui utilisent JavaScript.