nach oben
indoqa. IT-Experten, die Dinge zu nachhaltigen Lösungen entwickeln.

Linting von React-Applikationen

In diesem Artikel geben wir einen Überblick über das Linting von React-Applikationen.

Was ist Linting?

Unter Linting versteht man die statische Analyse von Quelltext, dieser wird unter anderem auf syntaktische oder logische Programmierfehler, eine einheitliche Formatierung oder auf die Umsetzung von Best Practices hin überprüft.
Um Applikationen, die mittels React umgesetzt werden, einer solchen Überprüfung zu unterziehen verwenden wir ESLint, da dieser Linter es ermöglicht Regeln hinzuzufügen bzw. diese zu konfigurieren.

Wie konfiguriert man ESLint?

Im Auslieferungszustand von ESLint sind keine Regeln aktiviert, daher muss man in seinem Projekt die Regeln in der Konfiguration .eslintrc erst einzeln aufzählen. Damit diese Liste nicht in jedem Projekt gepflegt werden muss können einmal gelistete Regeln auch in einer Konfiguration zusammengefasst und referenziert werden.

Unsere Konfiguration (eslint-config-indoqa) leitet sich von der Airbnb-Konfiguration eslint-config-airbnb ab und erweitert diese um unsere Formatierungsregeln.

Um eine vorgefertigte Konfiguration für das Linting in den Build-Zyklus der eigenen React-Applikation zu integrieren müssen folgende Schritte getätigt werden:

  • das NPM-Modul eslint-config-indoqa als Abhängigkeit in das package.json eintragen
  • die notwendigen Abhängigkeiten babel-eslint, eslint-plugin-react, eslint  eintragen
  • die eigene Linter Konfiguration (.eslintrc) von der indoqa Konfiguration ableiten lassen:
{
  "extends" : ["indoqa"]
}

Wir haben uns dazu entschieden vom Regelset von Airbnb abzuleiten, da diese Konfiguration aus unserer Sicht eine sinnvolle Auswahl an Regeln bereits definiert hat, die ausführliche Liste ist unter https://github.com/airbnb/javascript abrufbar.

Auszug aus den verwendeten Regeln für das Linting

  • Referenzen sollen nur innerhalb des Blocks existieren, in welchem sie definiert wurden. (let und const verwenden)
  • String-Templating statt Konkatenation von Zeichenketten verwenden, damit wird die Lesbarkeit deutlich erhöht.
  • Parameterzuweisungen sollten vermieden werden, da dies zu ungewünschten Seiteneffekten beim Aufrufenden führen kann.
  • Arrow-Functions erhöhen die Lesbarkeit und können dazu verwendet werden anonyme Funktionen im Kontext des Aufrufers auszuführen (Scope von this).
  • Verwenden von Modulen, diese können vom Transpiler in das bevorzugte Modulsystem übersetzt werden.

Deaktivieren des Linters

Es gibt folgende Möglichkeiten das Linting innerhalb einer Datei zu deaktivieren.

Linting für die ganze Datei oder längere Blöck deaktivieren:

/* eslint-disable */

console.log('Linting is disabled');

/* eslint-enable */

Linting für eine spezielle Codezeile deaktivieren:

console.log('Linting is disabled'); // eslint-disable-line

// eslint-disable-next-line
console.log('Linting is disabled');

Um gezielt einzelne Regeln zu deaktivieren reicht es diese im Kommentar aufzuführen:

// eslint-disable-line no-console

linting-von-react-applikationen_1

Like it? Share it!