Linting JavaScript avec JSHint

Peluches en programmation informatique est le processus de Analyse statique du code pour rechercher des problèmes tels que la syntaxe incorrecte et l'utilisation douteuse du code. L’outil utilisé pour le peluchage est connu sous le nom de peluche ou linter. JSHint est l'un des linters disponibles pour JavaScript aujourd'hui..

JSHint est disponible pour plusieurs plates-formes. L’outil Web en ligne que la plupart d’entre nous connaissent bien se trouve sur jshint.com. Il y a aussi les outil de ligne de commande via Node.js, une API JavaScript, plusieurs éditeurs de texte et plugins IDE pour JSHint. Vous pouvez voir la liste complète des outils JSHint disponibles pour différents environnements sur la page de téléchargement et d'installation du site Web JSHint..

Selon son site Web, les deux méthodes les plus courantes d’utilisation de l’outil JSHint sont les suivantes: outil de ligne de commande et le API. Jetons un coup d'œil à la façon dont vous pouvez télécharger, utilisez les deux options, ainsi que les autres options fournies par les outils..

Via l'outil de ligne de commande

(1) Si Node.js n'est pas installé sur votre ordinateur, vous devrez d'abord accéder à son site web, puis le télécharger et l'installer. Pour vérifier si Node.js a été installé avec succès, vous pouvez exécuter la commande npm -version dans l'interface de ligne de commande (CLI) et il vous montrera la version du fichier Node.js de votre ordinateur (ou vous pouvez simplement exécuter la commande npm et voir ce qui se passe).

(2) Pour installer l'outil JSHint, exécutez la commande npm installer jshint dans CLI. Si vous voulez vérifier si JSHint a été installé avec succès, exécutez la commande jshint -version pour voir sa version. Une fois cette étape terminée, l'installation est terminée.

(3) Pour exécuter cet outil, accédez au répertoire de la CLI où se trouve votre fichier JavaScript (par exemple, test.js) est et lance la commande jshint test.js. Le résultat de l'analyse de l'outil sur votre code JavaScript apparaîtra (quelque chose comme ceci):

Via l'API JavaScript

(1) Téléchargez le fichier compressé à partir de ce lien GitHub et décompressez-le. dans le dist dossier, vous trouverez le jshint Fichier JS (la bibliothèque de l'API).

(2) Pour utiliser l’API, ajoutez le jshint JS vers votre projet et le lier à votre page. L’API est accessible dans le code JavaScript à l’aide de la fonction / objet appelé JSHINT. Vous trouverez ci-dessous un exemple de code HTML dans lequel l’API JavaScript de JSHint est utilisée pour analyser le code JavaScript présent dans le répertoire. la source tableau et affiche les résultats d'analyse sur la page.

(3) Nous avons passé le la source tableau contenant le code source JavaScript à analyser et options objet contenant des options de linting (nous irons dans options prochainement) comme paramètres de la JSHINT une fonction. Le résultat de l'analyse (un objet JSON) est extrait de JSHINTLa propriété de fonction appelée Les données.

(4) JSON.stringify est utilisé ici uniquement pour afficher le résultat renvoyé par le Les données fonction au format chaîne sur la page. le embelli La chaîne JSON ressemble à ceci. Les parties surlignées sont les erreurs trouvées par JSHint dans des phrases simples.

Options de linting

Les options de linting nous permettent de configurer le processus de linting. Nous pouvons spécifier quel type d’erreurs doit être ajouté ou non. Dans l'exemple précédent, deux options de linting ont été utilisées, à savoir: undef et inutilisé.

undef option signale des variables non déclarées, et inutilisé marquera les variables qui ont été déclarées mais jamais utilisées. Comme celles-ci, il existe de nombreuses autres options dont vous pouvez voir la liste dans cette page. Si vous souhaitez rechercher une option, une barre de recherche est située dans le coin supérieur droit.

Si vous utilisez l’outil CLI via Node.js, vous pouvez écrire les options de linting dans un package.json déposer sous la propriété jshintConfig dans le même répertoire. Vous pouvez également ajouter les options sous forme de directives dans le code JavaScript..

 // - test.js - / * jshint undef: true, non utilisé: true * / foo (); a = 7;

Il existe d'autres moyens de configurer les options de refonte dans votre projet en fonction de l'outil que vous utilisez. Découvrez les différentes façons de configuration ici.