Linting JavaScript mit JSHint

Fusseln In der Computerprogrammierung ist der Prozess von statischer Code zur Analyse von Problemen wie falsche Syntax und iffy-Verwendung von Code. Das zum Fusseln verwendete Werkzeug wird als a bezeichnet Fussel oder linter. Eines der heute für JavaScript verfügbaren Linters ist JSHint.

JSHint ist für mehrere Plattformen verfügbar. Das Online-Webtool, mit dem die meisten von uns vertraut sind, befindet sich auf jshint.com. Es gibt auch die Befehlszeilenprogramm über Node.js, ein JavaScript-API, mehrere Texteditoren und IDE-Plugins für JSHint. Die vollständige Liste der verfügbaren JSHint-Tools für verschiedene Umgebungen finden Sie auf der Download- und Installationsseite der JSHint-Website.

Laut der Website des JSHint werden die beiden häufigsten Verwendungsmöglichkeiten als JSHint-Tool verwendet Befehlszeilentool und das API. Lassen Sie uns einen Blick darauf werfen, wie Sie beide herunterladen können, zusammen mit anderen Linting-Optionen, die die Tools bieten.

Über das Befehlszeilentool

(1) Wenn Sie Node.js nicht auf Ihrem Computer installiert haben, müssen Sie die Website herunterladen und zuerst herunterladen und installieren. Um zu überprüfen, ob Node.js erfolgreich installiert wurde, können Sie den Befehl ausführen npm -version In der Befehlszeilenschnittstelle (CLI) wird die Version der Node.js auf Ihrem Computer angezeigt (oder Sie können den Befehl einfach ausführen npm und sehen was passiert).

(2) Führen Sie den Befehl aus, um das JSHint-Tool zu installieren npm install jshint in der CLI. Wenn Sie prüfen möchten, ob JSHint erfolgreich installiert wurde, führen Sie den Befehl aus jshint -version um seine Version zu sehen. Sobald dieser Schritt abgeschlossen ist, ist die Installation abgeschlossen.

(3) Um das Tool auszuführen, wechseln Sie in das Verzeichnis in der CLI, in dem sich Ihre JavaScript-Datei befindet (z. B. test.js) ist und führe den Befehl aus jshint test.js. Das Ergebnis der Analyse des Tools in Ihrem JavaScript-Code wird angezeigt (in etwa wie folgt):

Über die JavaScript-API

(1) Laden Sie die komprimierte Datei von diesem GitHub-Link herunter und entpacken Sie sie. In dem dist Ordner finden Sie die Jshint JS-Datei (die API-Bibliothek).

(2) Um die API zu verwenden, fügen Sie das hinzu Jshint JS-Datei zu Ihrem Projekt und verknüpfen Sie es mit Ihrer Seite. Auf die API kann im JavaScript-Code mit der aufgerufenen Funktion / Objekt zugegriffen werden JSHINT. Nachfolgend finden Sie einen Beispiel-HTML-Code, in dem der JavaScript-Code von JSHint verwendet wird, um den in der vorhandenen JavaScript-Code zu analysieren Quelle Array und zeigen die Analyseergebnisse auf der Seite an.

(3) Wir haben das bestanden Quelle Array mit dem zu analysierenden JavaScript-Quellcode und Optionen Objekt, das Linting-Optionen enthält (wir gehen in ein Optionen kurz) als Parameter zum JSHINT Funktion. Das Analyseergebnis (ein JSON-Objekt) wird von abgerufen JSHINTFunktionseigenschaft aufgerufen Daten.

(4) JSON.stringify wird hier nur zur Anzeige verwendet, um das Ergebnis anzuzeigen, das vom zurückgegeben wurde Daten Funktion im String-Format auf der Seite. Das verschönert JSON-String sieht so aus. Die hervorgehobenen Teile sind die Fehler, die von JSHint in einfachen Sätzen gefunden wurden.

Linting-Optionen

Mit den Linting-Optionen können wir den Linting-Prozess konfigurieren. Wir können angeben, welche Art von Fehlern oder Schwächen geflottet werden müssen und welche nicht. Im vorigen Beispiel wurden nämlich zwei Fusseloptionen verwendet undef und ungebraucht.

undef Option kennzeichnet nicht deklarierte Variablen und ungebraucht kennzeichnet Variablen, die deklariert wurden, aber nie verwendet wurden. Wie diese gibt es viele weitere Optionen, für die Sie eine Liste auf dieser Seite sehen können. Wenn Sie eine Option suchen möchten, wird oben rechts eine Suchleiste angezeigt.

Wenn Sie das CLI-Tool über Node.js verwenden, können Sie die Linting-Optionen in eine schreiben package.json Datei unter der Eigenschaft jshintConfig im selben Verzeichnis. Sie können die Optionen auch als Anweisungen im JavaScript-Code hinzufügen.

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

Es gibt mehrere Möglichkeiten, Flusenoptionen in Ihrem Projekt basierend auf dem von Ihnen verwendeten Werkzeug zu konfigurieren. Überprüfen Sie die verschiedenen Möglichkeiten für Aufbau Hier.