Sie können fast immer darauf wetten, dass ein gutes Stück Schrift von einer guten Bearbeitung profitiert hat. In dieser Hinsicht ist Code nicht anders als Prosa. Einer der Vorteile, die wir als Entwickler und Programmierer genießen, sind Editoren oder Code-Linters, die in unsere Arbeitsabläufe integriert werden können.

Linting ist der Vorgang oder Prozess der Überprüfung Ihres Codes auf Fehler jeglicher Art. Es gibt viele Überlegungen, wie man die Effektivität eines bestimmten Codestücks optimieren kann. Aber die Überprüfung, ob er fehlerfrei ist und einem bestimmten Styleguide entspricht, ist die Grundvoraussetzung. Manchmal geht es dabei um Konsistenz und Lesbarkeit, manchmal darum, den Code überhaupt zum Laufen zu bringen.

Wenn es um JavaScript-Linting geht, gibt es eine Handvoll Tools, die sich von anderen abheben. Schauen wir uns vier Linter an, die Ihnen helfen können, Ihren Linting-Prozess zu beginnen oder zu verfeinern: JSLint, standardJS, JSHint und ESLint.

JSLint

JSLint wurde 2002 von Douglas Crockford entwickelt, der auch eines der wohl besten Bücher über JavaScript geschrieben hat. JSLint zeichnet sich durch Einfachheit und Geschwindigkeit aus. Aber es ist auch sehr eigenwillig, was ein Segen oder ein Fluch sein kann.

JSLint besteht aus einer einzigen Seite, die von einem Textfeld dominiert wird, in das Sie Ihren Code einfügen können. Klicken Sie auf die Schaltfläche „JSLint“ und alle stilistischen, syntaktischen oder sonstigen Fehler werden unter dem Textfeld angezeigt. Unter dem Textfeld befindet sich eine kleine Liste von Optionen, die über Kontrollkästchen konfiguriert werden können. Zu den Optionen gehören die Tolerierung zusätzlicher Leerzeichen, die Verwendung des Schlüsselworts „this“ (wovon Crockford in seinen Vorträgen abrät) und die Einbeziehung von Node.js.

Wenn Sie keinem bestimmten Styleguide verpflichtet sind und eine zuverlässige Quelle suchen, die Ihren Code für Sie prüft, ist JSLint eine hervorragende Option. Es ist besonders effektiv für das Testen von Codeschnipseln oder wenn Sie nach einer Möglichkeit suchen, kleine Projekte schnell zu überprüfen – vielleicht eine einzelne statische Seite, die nur eine JavaScript-Datei enthält.

standardJS

Basierend auf den GitHub-Sternen ist standardJS die beliebteste Option mit fast 19.000 Sternen. Es ist komplett meinungsabhängig, d.h. es ist überhaupt nicht anpassbar. Wenn Sie jedoch nicht an einen bestimmten Styleguide gebunden sind, kann dies ein Segen sein. Es wird in Form einer Node-CLI geliefert und kann global oder als Entwicklungsabhängigkeit über das Terminal oder die Kommandozeile Ihrer Wahl installiert werden:

$ npm install standard --global// or$ npm install standard --save-dev

Da standardJS Node und npm als Voraussetzungen hat und von der Kommandozeile oder per npm-Skript ausgeführt wird, wird die Messlatte etwas höher gelegt als bei JSLint. Da es aber nicht konfigurierbar ist, müssen Sie sich um nichts weiter kümmern. Sie können es von der Kommandozeile aus als Ein-Wort-Befehl ausführen und es wird jede Datei mit einer .js-Erweiterung in Ihrem aktuellen Arbeitsverzeichnis überprüfen.

Alle Fehler, die es findet, werden auf Ihrem Terminal oder in der Kommandozeile ausgegeben. Sie können eine Ausgabe ähnlich diesem Beispiel aus der Standard-JS-Dokumentation erwarten:

$ standardError: Use JavaScript Standard Stylelib/torrent.js:950:11: Expected '===' and instead saw '=='.

Wenn Sie eine Datei oder ein Verzeichnis angeben müssen, können Sie den Pfad als Argument einschließen und Platzhalter verwenden. Es werden auch Platzhalter akzeptiert. In diesem Beispiel sucht standardJS nach JavaScript-Dateien im Verzeichnis src und seinen Unterverzeichnissen und färbt sie ein:

$ standard "src/**/*.js" --fix

Das Kennzeichen --fix hinter dem Dateipfad ist die Option, Fehler automatisch zu beheben, sobald sie gefunden werden. Dies kann eine große Zeitersparnis sein, aber es kann auch eine großartige Lernübung sein, die Fehler selbst zu beheben.

Wenn Sie die Konventionen und Regeln, die StandardJS verwendet, erforschen wollen, bevor Sie sich entscheiden, ob Sie es verwenden wollen, finden Sie hier eine vollständige Liste. StandardJS ist eine gute Option für diejenigen, die einen schnellen und zuverlässigen Weg suchen, um mit einem JavaScript-Linter zu beginnen.

JSHint

JSHint begann als eine Abspaltung von JSLint. Das Ziel war es, einen besser konfigurierbaren Linter zu entwickeln. Wenn Sie bisher StandardJS oder einen anderen Linter mit eigener Meinung verwendet haben und nach einer Möglichkeit suchen, Ihre eigenen Linting-Regeln anzupassen, könnte JSHint das Richtige für Sie sein. Es bietet die meisten Vorteile der oben genannten Linters und noch einige mehr.

Wie JSLint verfügt die JSHint-Homepage über ein Textfeld, in das Sie Code einfügen können. Das MetricsFeld rechts neben dem Textfeld wird in Echtzeit aktualisiert, während Sie tippen, und zeigt eine laufende Liste von Statistiken über Ihren Code an, z. B. wie viele Funktionen er enthält. Natürlich werden auch alle gefundenen Linting-Fehler angezeigt.

Wenn Ihnen die Copy/Paste-Methode nicht gefällt und Sie es in Ihr Projekt einbauen möchten, kann JSHint global oder als Projektabhängigkeit mit npm installiert werden:

$ npm install jshint --global// or$ npm install jshint --save-dev

Nach der Installation verwenden Sie die CLI, um Ihren Code zu linting. Hier sind zwei Beispielbefehle, die eine einzelne Datei bzw. ein Verzeichnis überprüfen:

$ jshint index.js// or$ jshint src/

Im ersten Beispiel lintet JSHint die Datei index.js und im zweiten Beispiel durchsucht es rekursiv das Verzeichnis „src/“ und lintet alle gefundenen JavaScript-Dateien. JSHint gibt alle gefundenen Fehler in Ihrem Terminal aus.

Wenn Sie sich nicht um Anpassungen kümmern, kann JSHint wie in den obigen Beispielen beschrieben verwendet werden und es wird gut funktionieren. Aber ab hier kann die Komplexität erheblich zunehmen, da JSHint vollständig konfigurierbar ist und auch eine API zur Verfügung stellt, was bedeutet, dass es als JavaScript-Modul in Ihren eigenen JavaScript-Dateien verwendet werden kann.

Eine benutzerdefinierte Konfiguration, die in einer Datei mit dem Namen .jshintrc gespeichert werden sollte, könnte folgendermaßen aussehen:

{"esversion": 5,"eqeqeq": true,"strict": true}

In diesem Beispiel wird von oben nach unten die ECMAScript-Version auf 5 gesetzt, die Verwendung von drei Gleichheitszeichen (=== oder !==) anstelle von zwei (== oder !=) beim Vergleich von Werten verlangt und der Strict-Modus erzwungen. Sie können Ihre benutzerdefinierten Konfigurationen einbinden, indem Sie den Pfad zu Ihrer .jshintrc-Datei hinter einem -- config-Flag in der Befehlszeile angeben oder sie als das Attribut ‚jshintConfig‘ in Ihrer package.json-Projektdatei deklarieren. JSHint verwendet seine Standardoptionen für alle Regeln, die Sie nicht anpassen.

Die Kommandozeilenoption könnte so aussehen:

// looks for '.jshintrc' in the current directory$ jshint --config './.jshintrc'

Während die package.json-Option so aussehen könnte:

{ "jshintConfig": { "esversion": 5, "eqeqeq": true, "strict": true }}

Sie können diese Grundlagen verwenden, um den Weg der Anpassung Ihrer eigenen Linting-Regeln mit JSHint zu beginnen. Wenn Sie mehr wissen wollen, finden Sie in der offiziellen Dokumentation eine ausführliche Beschreibung der JSHint-API und aller Möglichkeiten, wie sie an Ihre Bedürfnisse angepasst werden kann.

ESLint

Abgesehen von den GitHub-Sternen ist ESLint, wenn es um JavaScript-Linting geht, wahrscheinlich der Linter, den man am häufigsten in freier Wildbahn sieht und der für viele Leute die erste Wahl sein wird. In seiner eigenen Dokumentation vergleicht es sich mit JSLint und JSHint in Bezug auf die Methoden, die es zum Parsen von JavaScript verwendet. Ähnlich wie bei JSHint können Sie mit Standardeinstellungen beginnen und Anpassungen hinzufügen, wenn sich Ihre Vorlieben oder Bedürfnisse ändern.

Um mit ESLint zu beginnen, installieren Sie es global oder als Entwicklungsabhängigkeit:

$ npm install eslint --save-dev// or$ npm install eslint --global

Wenn Sie ESLint global installieren, gelten seine Konfigurationen für alle Projektdateien, gegen die Sie es einsetzen. Wenn Sie jedoch unterschiedliche Konfigurationen für verschiedene Projekte wünschen, können Sie es als Entwicklungsabhängigkeit installieren und für jedes Projekt eine eigene Konfigurationsdatei erstellen. Wenn ESLint nicht global, sondern als Projektabhängigkeit installiert wird, müssen Sie die ausführbare Datei in Ihrem node_modules-Ordner wie folgt ausführen:

$ ./node_modules/.bin/eslint --init

Wenn Sie den obigen Befehl ausführen, werden Sie durch eine Reihe von Fragen durch die Konfiguration von ESLint geführt. (Hinweis: Unabhängig davon, wie sehr Sie Ihre Linting-Regeln anpassen wollen, müssen Sie mit diesem Schritt beginnen, da ESLint die .eslintrc-Datei benötigt, die durch diesen Prozess erzeugt wird, bevor es Ihren Code lintet.)

Die erste Frage, die Ihnen gestellt wird, ist, wie Sie ESLint konfigurieren. Sie haben drei Möglichkeiten: Sie können einen gängigen Styleguide verwenden, Fragen zu Ihrem Stil beantworten oder ESLint für sich selbst konfigurieren lassen, indem Sie Ihre Dateien untersuchen, um zu entscheiden, wie die Regeln eingerichtet werden sollen. Wenn Ihnen die Aussicht, es selbst zu konfigurieren, auf Anhieb einschüchternd erscheint, können Sie auf einen populären Styleguide zurückgreifen, der von einer der wenigen bekannten Organisationen entwickelt wurde.

Ungeachtet dessen, welchen Weg Sie einschlagen, wird ESLint Ihre Antworten verwenden, um eine Datei namens .eslintrc im aktuellen Arbeitsverzeichnis zu erzeugen. Dies ist die Datei, die Sie modifizieren werden, wenn Sie später Änderungen an den Linting-Regeln vornehmen wollen.

Hier ein Beispiel für eine .eslintrc-Datei im JSON-Format, die die Standardregeln des Airbnb-JavaScript-Styleguides verwendet und zwei benutzerdefinierte Regeln enthält, um den Strict-Modus auszuschalten und console.log()-Anweisungen zuzulassen:

{ "extends": "airbnb-base", "rules": { "strict": "off", "no-console": "off" }}

Wenn Sie sich entscheiden, Fragen zu Ihrem Stil zu beantworten, werden Sie u. a. gefragt, welche ECMAScript-Version Sie verwenden, ob Sie Tabulatoren oder Leerzeichen bevorzugen, ob Sie Semikolons verwenden oder nicht und ob Sie JSX und/oder React nutzen. Die sofortige Unterstützung von ESLint für React und zusätzliche Plugins machen es wahrscheinlich zur besten Wahl für React-Entwickler. Zumindest für diejenigen, die gerade erst mit dem Linting beginnen.

Nachdem ESLint installiert und eine .eslintrc Datei erzeugt wurde, können Sie die CLI verwenden, um mit dem Linting Ihres Codes zu beginnen. ESLint sucht standardmäßig nach Ihrer .eslintrc-Datei, so dass Sie keine Konfigurationen in der Befehlszeile angeben müssen. Sie können jedoch verschiedene Flags verwenden, um das Verhalten von ESLint zu beeinflussen. Im folgenden Beispiel weist das Flag -- quiet ESLint an, nur Fehler anzuzeigen und nicht sowohl Warnungen als auch Fehler. Das --fix-Flag weist ESLint an, alle gefundenen Fehler automatisch zu beheben.

// run eslint against file1.js$ ./node_modules/.bin/eslint file1.js// run eslint against file1.js and file2.js with flags to modify behavior$ ./node_modules/.bin/eslint file1.js file2.js --quiet --fix

Wie bei den anderen CLIs, die wir besprochen haben, können Sie Wildcards und Dateipfade anstelle von spezifischen Dateinamen verwenden, falls erforderlich. Obwohl ESLint in hohem Maße konfigurierbar ist, wird die Lernkurve durch die Verwendung einer leicht verständlichen Anleitung für die Standardkonfiguration vereinfacht. Wenn Sie wirklich in die Anpassungen einsteigen wollen, enthält die offizielle Dokumentation großartige Erklärungen zu allem, was Sie mit ESLint tun können.