Wenn mal als Team gemeinsam an einer JavaScript-Software arbeitet, kann das schon einmal zur Herausforderung werden. Standards für schönen, lesbaren Code hat beinahe jede Firma, aber jeden auftretenden Fall zu dokumentieren ist quasi unmöglich. Dazu kommt, die Standards bei neuem oder bearbeitetem Code zu kontrollieren. Da kommen schnell Fragen wie „Wer soll das denn machen?“ oder „Wer hat denn Zeit für sowas?“. Und was ist mit Fehlern im Code, zum Beispiel schlichte Tippfehler bei Variablen, die erst als schwere Fehler im Betrieb beim Kunden auffallen.
Hier kommen das mächtige Tool ESLint ins Spiel.
ESLint hat sich mit über 15.000.000 wöchentlichen npm-Downloads zu einem der beliebtesten Code-Analyse Tools für JavaScript entwickelt. Ein großer Vorteil ist die hohe Anpassungsfähigkeit und die vielen Einstellungen von ESLint.
Jedes Unternehmen kann definieren, welche Code-Standards gelten sollen. Nicht alle, aber viele potentielle Fehlerquellen können so schon identifiziert werden, bevor der Fehler beim Kunden erscheint.
Aber nicht nur das Vermeiden von Fehler ist interessant. Neben Einrückungen, Zeilenlänge und vielen Einstellungen mehr hilft ESLint, einheitliches Code-Aussehen für ein ganzes Team zu etablieren.
Code-Reviews, Fehlersuche und Einarbeitungen für neue Entwickler sind wesentlich einfacher, wenn Code in einer Software stets das gleiche Erscheinungsbild aufweist.
Aber wie sieht ESLint nun in der Praxis aus?
Gehen wir von folgendem kleinen Programm aus:
Beim Aufruf mit zwei Parametern wird die Funktion addition den Fehler number3 is not defined ausgeben, da hier versehentlich number3 statt number2 als Rückgabewert definiert wurde.
Gleiches gilt für die Funktion substract_if_more_than_null. Hier sind nicht nur die Parameter das Problem. Wenn dieser Fehler behoben ist und der erste Parameter größer als 0 ist, gibt die Funktion den Fehler TypeError: Assignment to constant variable aus, da num1 als konstante Variable deklariert ist.
Hier kommt nun ESLint zum Einsatz. Mit yarn add eslint -D wird ESLint als Dev-Dependency installiert. Mit yarn run eslint --init wird das Projekt initialisiert, hier kann gerne ein Styleguide verwendet werden (wir verwenden den populären Guide von Airbnb).
Nach der Installation zeigt sich der Editor folgendermaßen:
ESLint markiert uns die Stellen im Code, die für Probleme sorgen oder nicht dem Airbnb Standard genügen. Beheben wir nun die Fehler, die uns angezeigt werden:
Die Fehler sind nun behoben, im Rückgabewert der ersten Funktion parsen wir die Parameter noch als Zahl, damit die Addition funktioniert.
Eine Sache kann hier noch optimiert werden. Die beiden Funktionen sind unterschiedlich geschrieben, einmal als Arrow-Function und einmal als normale JavaScript Funktion. Da in diesem Fall kein eigenes this benötigt wird empfiehlt es sich, beide Funktionen als Arrow-Funktion zu deklarieren. Natürlich ist diese Implementierung völlig korrekt, jedoch ist es in einem Software-Team sinnvoller, die gleiche Syntax zu verwenden. Um das ganze mit ESLint zu erzwingen, installieren wir ein Plugin mit yarn add eslint-plugin-prefer-arrow -D. Dazu ist noch eine Anpassung in der ESLint Config-Datei notwendig:
Nun wird ein Fehler ausgegeben:
Wir beheben den Fehler und haben hier nun den fertigen Code:
Fazit
Mit einem geringen Konfigurationsaufwand kann ESLint in bestehende JavaScript-Projekte problemlos integriert werden. Viele Zusatzplugins und zahlreiche Einstellungsmöglichkeiten ermöglichen es, für das eigene Team den perfekten Code-Stil zu finden und zu etablieren.
