Lint JavaScript met JSHint

pluizende in computerprogrammering is het proces statische analyse van code om problemen zoals verkeerde syntaxis en twijfelachtig gebruik van code te vinden. Het gereedschap dat wordt gebruikt voor het pluizen, staat bekend als a pluis of linter. Een van de linters die momenteel beschikbaar is voor JavaScript is JSHint.

JSHint is beschikbaar voor meerdere platforms. De online webtool die de meesten van ons kennen is op jshint.com. Er zijn ook de opdrachtregelprogramma via Node.js, een JavaScript-API, meerdere teksteditors en IDE-plug-ins voor JSHint. U kunt de volledige lijst met beschikbare JSHint-hulpmiddelen voor verschillende omgevingen bekijken op de download- en installatiepagina van de JSHint-website.

Volgens zijn website zijn de twee meest voorkomende manieren waarop de JSHint-tool wordt gebruikt, de opdrachtregelprogramma en de API. Laten we eens kijken hoe u beide kunt gebruiken, samen met andere pluisoplossingen die de hulpprogramma's bieden.

Via Command Line Tool

(1) Als u Node.js niet op uw computer hebt geïnstalleerd, moet u eerst de website bezoeken en deze eerst downloaden en installeren. Om te controleren of Node.js succesvol is geïnstalleerd, kunt u de opdracht uitvoeren npm -versie in de opdrachtregelinterface (CLI) en het toont u de versie van Node.js op uw computer (of u kunt gewoon de opdracht uitvoeren NPM en kijk wat er gebeurt).

(2) Om de JSHint-tool te installeren, voert u de opdracht uit npm jshint installeren in CLI. Als u wilt controleren of JSHint met succes is geïnstalleerd, voert u de opdracht uit jshint -version om de versie te zien. Zodra deze stap voorbij is, is de installatie voltooid.

(3) Als u het hulpprogramma wilt uitvoeren, gaat u naar de directory in de CLI waar uw JavaScript-bestand staat (bijvoorbeeld test.js) is en voer de opdracht uit jshint test.js. Het resultaat van de analyse van het hulpprogramma op uw JavaScript-code zal verschijnen (iets als dit):

Via de JavaScript-API

(1) Download het gecomprimeerde bestand van deze GitHub-link en pak het uit. In de dist map vind je de jshint JS-bestand (de API-bibliotheek).

(2) Om de API te gebruiken, voegt u de jshint JS-bestand naar uw project en koppel het aan uw pagina. De API kan worden geopend in de JavaScript-code met behulp van de functie / het object genaamd JSHINT. Hieronder vindt u een voorbeeld van een HTML-code waarin de JavaScript-API van JSHint wordt gebruikt om de JavaScript-code te analyseren die aanwezig is in de bron matrix en toon de analyseresultaten op de pagina.

(3) We passeerden de bron array met de JavaScript-broncode die moet worden geanalyseerd en opties object met pluisopties (we gaan in op opties binnenkort) als parameters voor de JSHINT functie. Het analyseresultaat (een JSON-object) wordt opgehaald JSHINT's functie-eigenschap genaamd gegevens.

(4) JSON.stringify wordt hier alleen voor weergave gebruikt om het resultaat weer te geven dat is geretourneerd door de gegevens functie in tekenreeksindeling op de pagina. De verfraaid JSON-string ziet er zo uit. De gemarkeerde delen zijn de fouten gevonden door JSHint verwoord in eenvoudige zinnen.

Linting-opties

Lint-opties laten ons het lintproces configureren. We kunnen aangeven welk type fouten of wanring moet worden verward en welke niet. In het vorige voorbeeld werden namelijk twee pluisopties gebruikt undef en ongebruikt.

undef optie markeert niet-verklaarde variabelen, en ongebruikt markeert variabelen die zijn gedeclareerd maar nooit zijn gebruikt. Net als deze zijn er veel meer opties waarvan u een lijst kunt zien op deze pagina, als u een optie wilt zoeken, is er een zoekbalk in de rechterbovenhoek.

Als u de CLI-tool gebruikt via Node.js, kunt u de pluisopties binnen een a opgeven package.json bestand onder het eigendom jshintConfig in dezelfde map. U kunt de opties ook toevoegen als richtlijnen in de JavaScript-code.

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

Er zijn meer manieren om verwelkingsopties in uw project te configureren op basis van de tool die u gebruikt. Bekijk de verschillende manieren voor configuratie hier.