Mit ESlint Nibble werden viele ESlint-Fehler schrittweise und sauber behoben

Da unser Team wächst, benötigen wir mehr funktionale und ästhetische Regeln, um unsere Codebasis weniger fehleranfällig und konsistenter. Glücklicherweise verwenden sowohl unser Backend als auch unser Frontend JavaScript (mit derselben Version von TypeScript), sodass diese Änderungen große Auswirkungen auf unsere tägliche Arbeit für das gesamte Team haben.

Normalerweise führen wir diese Art von Verbesserungen an sogenannten „Tech-Tagen“ durch (am Montag alle zwei Wochen), an denen wir an Aufgaben arbeiten können, die wir selbst auswählen. Wir versuchen, sie

schrittweise durchzuführen, um langlebige Zweige zu vermeiden, die schwer zu pflegen und zu überprüfen sind.

Vor kurzem haben wir uns entschieden, das Unicorn-Plugin hinzuzufügen, das Dutzende ESlint-Regeln enthält. Es kann sich zunächst überwältigend anfühlen, weil es Hunderte von Fehlern auslöst. Glücklicherweise haben wir eslint-nibble entdeckt: ein Befehlszeilentool, das über eine grafische Oberfläche beim Hinzufügen von Regeln nacheinander hilft.

Wie man es benutzt

Der erste Schritt besteht darin, das neue Plugin zu installieren, das wir anwenden möchten. Anstatt die Regeln einzeln zu aktivieren, können wir sie jetzt alle in .eslintrc.js aktivieren. Anstatt schließlich alles auf einmal mit eslint zu fusseln, können wir einfach eslint-nibble wie folgt verwenden:

npx eslint-nibble --fixable-only --no-warnings --cache "./src/**/*.{ts,js,vue}"

es beschleunigt zunächst unseren Prozess mit --fixable-only-Regeln
Da wir CI nicht bei Warnungen zum Scheitern bringen, verwenden wir --no-warnings, um die Dinge zu klären
Die Option --cache ähnelt der Option ESlint und beschleunigt den wiederholten Vorgang erheblich

Wir werden dann von einer schönen Grafik begrüßt, die jede fehlerhafte Regel mit der Anzahl der Fehler für jede einzelne zeigt:

Wenn Sie eine Regel über ihre Benutzeroberfläche auswählen, wird empfohlen, diese automatisch zu korrigieren (falls möglich). Dann überprüfen wir es normalerweise manuell, bevor wir es festschreiben, für den Fall, dass etwas Merkwürdiges auftaucht.

Ein weiterer wichtiger Punkt ist, dass es jeweils nur eine Regel reparieren kann, selbst wenn eine Codezeile mehrere Regelfehler enthält. Dadurch werden die Commits atomar, sodass sie beispielsweise einfacher zu debuggen und zu überprüfen sind.

Wenn Sie vor dem Festschreiben weitere Änderungen vornehmen – zum Beispiel müssen wir manchmal Prettier auf die geänderte Zeile anwenden – stellen Sie sicher, dass Sie

die Datei nicht speichern und lintieren, da dadurch alle anderen Fehler behoben würden im Zusammenhang mit anderen Regeln in der Datei. Der richtige Weg besteht darin, das erforderliche Problem manuell zu beheben, indem Sie nur die Zeile fokussieren und Quick Fix ausführen und dann den Befehl „Fix without formating of VS Code“ verwenden.

Vorteile

Der Hauptvorteil besteht darin, dass Sie ganz einfach sehen können, welche Regeln am einfachsten als Nächstes hinzuzufügen sind. Jeden Tag können wir uns nun dafür entscheiden, eine Regel mit vielen Fehlern oder viele Regeln, die nur wenige Vorkommen aufweisen, zu korrigieren. Zuvor haben wir Regeln einzeln einzeln aktiviert, ohne ihre Auswirkungen im Voraus zu kennen.

Es ist auch eine Gelegenheit, die Regel selbst zu verstehen, indem man ihre Dokumentation liest und erklärt, warum es besser (oder nicht) ist, es so zu machen, damit wir neue Dinge lernen.

Manchmal entscheiden wir uns, eine Regel anzupassen oder vollständig zu deaktivieren, weil sie nicht unseren Anforderungen oder unserem Codestil entspricht. Beispielsweise haben wir beschlossen, eine Regel zu deaktivieren, die in einigen Fällen die Verwendung von Set erzwingt: Da Vue 2 keine Reaktivität auf Map und Set unterstützt, dachten wir, dass dies zu Fehlern führen oder Entwickler dazu ermutigen könnte, es auf unerwartete Weise zu verwenden.

Schließlich ist es für Prüfer einfacher, Commits zu jeweils einer Regel zu lesen. Dieses Tool macht die progressive Verbesserung zum Kinderspiel, indem es uns dabei hilft, von Zeit zu Zeit ein paar ESlint-Regeln hinzuzufügen.

Das obige ist der detaillierte Inhalt vonMit ESlint Nibble werden viele ESlint-Fehler schrittweise und sauber behoben. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!