Linting-Tools spielen bei der Entwicklung von Webanwendungen eine entscheidende Rolle. Jeder Entwickler sollte wissen, was ein Linter ist, wie man ihn installiert und konfiguriert und wie man ihn effizient einsetzt, um sicherzustellen, dass in unserem Projekt die besten Codestandards eingehalten werden.
Bei Imaginary Cloudhaben wir bereits zahlreiche React -Apps für unsere Kunden entwickelt. Deshalb haben wir eine Open-Source- ESLint -Konfiguration erstellt – @imaginary-cloud/eslint-config-react –, die sowohl intern genutzt als auch mit der Community geteilt wird. Das Ziel ist eine zentralisierte Konfiguration, die jeder einfach installieren und einrichten kann. Sie nutzt die besten JS-Codestandards der Community und ermöglicht das Linting von jsx -Code, ohne dass man sich mit der mühsamen Konfiguration eines Linters herumschlagen muss.
Warum sollte man die Konfiguration von Imaginary Cloud anstelle anderer verfügbarer Optionen verwenden? Weil wir die besten und am häufigsten genutzten Open-Source-Konfigurationen in einem zentralen Paket gebündelt haben, was die Installation und Einrichtung schnell und unkompliziert macht. Der Hauptvorteil von @imaginary-cloud/eslint-config-react gegenüber der bekannten Airbnb -Konfiguration besteht darin, dass wir neben den bewährten Codepraktiken von Airbnb auch den Codestil von Prettier für einen angenehmeren und lesbareren Code.
Nach diesem Artikel wissen Sie, was Linting-Tools sind und wie man sie installiert und konfiguriert, ESLint und Prettier für React -Anwendungen in nur wenigen Schritten.
Linting ist der Prozess, bei dem der Quellcode im Hintergrund evaluiert und debuggt wird, indem er anhand einer Reihe von Regeln auf programmatische und stilistische Fehler analysiert wird. Auf diese Weise kann der Entwickler Fehler finden, bevor er den Code ausführt. Regeln setzen auch die besten Code-Standards und -Praktiken durch, sorgen für eine bessere Codequalität, eine bessere Lesbarkeit und eine einfachere Wartung.
Laut der GitHub Octoverse-Umfrageist JavaScript auch in den letzten fünf Jahren die meistgenutzte Sprache geblieben. Dies hat es dem JS-Ökosystem ermöglicht, zu wachsen und sich weiterzuentwickeln, wodurch Entwicklern immer mehr und bessere Tools zur Verfügung stehen.
Um bewährte Verfahren und Standards sicherzustellen, sind verschiedene statische JavaScript-Analysetools entstanden, wie zum Beispiel:
Bei der großen Auswahl an Tools ist es schwierig, den besten Linter für das eigene Projekt zu finden. Als Entwickler finde ich, dass die Konfigurierbarkeit und die einfache Integration die wichtigsten Eigenschaften eines Tools sind. Für jedes JavaScript-Projekt würde ich daher ESLint wählen und es mit Prettierkombinieren. So erhalte ich alle Vorteile eines hochgradig konfigurierbaren Linting-Tools in Verbindung mit einem Code- Formatter.
Bei der Entwicklung von Anwendungen ist eine solide Basis aus automatisierten und manuellen Tools entscheidend, um höchste Standards und Codequalität zu gewährleisten. Jedes Projekt benötigt ein Linting-Tool, um diese Anforderungen zu erfüllen. Beide Tools sind konfigurierbar und ergänzen sich hervorragend, da sie unterschiedliche Aufgaben bei der Erkennung von Programmier- und Stilfehlern übernehmen, was das Aufspüren von Fehlern erheblich erleichtert.
ESLint ist eines der am häufigsten verwendeten Linting-Tools, und das aus gutem Grund. Es ist hochgradig konfigurierbar, erfreut sich in der Community großer Beliebtheit und bietet Hunderte von Open-Source-Konfigurationen und Plugins. Es ermöglicht die Anpassung zahlreicher Optionen wie Codierungsregeln, Umgebungen, Parser-Optionen, erweiterte Konfigurationen und die Nutzung von Plugins.
Während ESLint für die Überprüfung auf Programmierfehler zuständig ist, haben wir mit Prettier einen meinungsstarken Formatierer , der stilistische Fehler erkennt. Er bringt bereits vordefinierte Code-Stil-Standards mit und lässt sich ebenfalls einfach konfigurieren. Die Integration mit ESLint ist unkompliziert, und es gibt Code-Editor-Erweiterungen, die den Code beim Speichern automatisch formatieren!
Bei Imaginary Cloud entwickeln wir React-Projekte für unsere komplexen Frontend-Anwendungen. Daher war es uns wichtig, den Entwicklungsprozess durch den Einsatz geeigneter Tools so weit wie möglich zu automatisieren. Dieser Bedarf führte dazu, dass wir eine Open-Source-Konfiguration für ESLint namens @imaginary-cloud/eslint-config-react für unsere Projekte erstellt haben. Die Hauptvorteile liegen in der schnellen Installation und Konfiguration sowie in einheitlichen Code-Standards und -Stilen über verschiedene Projekte hinweg.
Die Konfiguration eines Linting-Tools ist zeitaufwendig, besonders beim ersten Mal. Es gibt zahlreiche Open-Source-Konfigurationen und Plugins, und die Auswahl der richtigen kann überfordernd sein. Zudem ist die manuelle Einrichtung eines Linters fehleranfällig.
Wir haben die besten Praktiken, Standards und Codestile recherchiert und gebündelt. Das Ergebnis ist die Verwendung von zwei der am häufigsten genutzten ESLint -Konfigurationen:
Prettier -Tool und fügt Regeln zur Formatierung des Codestils hinzu; dies gilt auch für jsx -Code aus React-Anwendungen.Da wir intensiv mit React-Anwendungen arbeiten, haben wir bestimmte Vorlieben beim Codestil. Diese Regeln haben wir ebenfalls in diese Konfiguration aufgenommen. So ist es einfach, zwischen Projekten zu wechseln und Code zu liefern – alle Standards sind identisch, da wir dieselbe Konfiguration nutzen, großartig!
Wie jedes andere JavaScript-Paket können diese über npm oder yarninstalliert werden. Die Installation ist sehr einfach. Beide Pakete, ESLint und Prettier, müssen als Entwicklungsabhängigkeiten in der package.json -Datei aufgeführt werden. Eine schnelle Möglichkeit, sie dem Projekt hinzuzufügen, ist die Ausführung des folgenden Befehls im Terminal:
npm install --save-dev eslint prettier
Dadurch werden ESLint und Prettier als Projektabhängigkeiten installiert und hinzugefügt, und schon ist alles bereit. Für ein besseres Entwicklungserlebnis können Sie eine ESLint -Erweiterung für Ihren Code-Editor installieren, um Codefehler direkt während der Entwicklung im Editor hervorzuheben.
Es gibt verschiedene Möglichkeiten, ESLint zu konfigurieren, wie in der offiziellen Dokumentationbeschrieben. Am gebräuchlichsten ist das Erstellen einer .eslintrc (auch YAML- und JS-Dateien sind möglich!) mit allen gewünschten Konfigurationen für das Projekt. Um dies effizienter zu gestalten, können verschiedene Open-Source-Konfigurationen verwendet werden, wie oben erläutert.
Für React-Projekte müssen wir lediglich das Paket @imaginary-cloud/eslint-config-react installieren und unsere ESLint -Konfiguration erweitern. Da diese Konfiguration auch die erforderlichen Abhängigkeiten für das vollständige Setup hinzufügt, haben wir denselben Ansatz wie bei der Airbnb -Konfiguration gewählt.
Um die Konfiguration zu installieren, führen Sie einfach den folgenden Befehl im Terminal aus:
npx install-peerdeps --dev @imaginary-cloud/eslint-config-react
npx ist ein Befehl, der mit npm in den neuesten Versionen, die es ermöglichen, npm Pakete auszuführen, ohne sie im Projekt installieren zu müssen. Das install-peerdeps Paket wird ausgeführt und sucht nach den Peer-Dependencies von @imaginary-cloud/eslint-config-react und installiert diese zusammen mit der Konfiguration als Entwicklungsabhängigkeiten. Dieser Schritt speichert automatisch alle benötigten Abhängigkeiten in der package.json Datei des Projekts.
Bei älteren Versionen von npm (< v5.2) npx ist nicht verfügbar, aber es ist möglich, die Konfiguration durch Ausführen des folgenden Skripts im Terminal zu installieren:
(
export PKG=@imaginary-cloud/eslint-config-react;
npm info "$PKG@latest" peerDependencies --json | command sed 's/[\{\},]//g ; s/: /@/g' | xargs npm install --save-dev "$PKG@latest"
)
Nach der Installation @imaginary-cloud/eslint-config-react Konfiguration fügen Sie die folgenden zwei Zeilen zu Ihrer package.json Datei hinzu
"eslintConfig": {
"extends": "@imaginary-cloud/react"
},
"prettier": "@imaginary-cloud/prettier-config"
Alles ist eingerichtet und einsatzbereit. Dies zeigt, wie einfach es ist, ESLint und Prettier für ein React-Projekt in nur zwei Schritten mit dem @imaginary-cloud/eslint-config-react Konfigurationspaket zu installieren und zu konfigurieren.
Für eine fortgeschrittenere Konfiguration ist es einfacher, eine .eslintrc Datei zu erstellen und die @imaginary-cloud/eslint-config-react Konfiguration zu erweitern. Entfernen Sie die eslintConfig aus der package.json Datei und prüfen Sie die ESLint Dokumentation für weitere Optionen.
.eslintrc Beispieldatei
{
"extends": ["@imaginary-cloud/react"]
// weitere Konfigurationsoptionen hier!
}
Die package.json -Datei muss die folgende Zeile enthalten
"prettier": "@imaginary-cloud/prettier-config"
Um dieselbe Prettier -Konfiguration von @imaginary-cloud/eslint-config-react als eigenständige Prettier -Konfiguration zu verwenden, installieren Sie das @imaginary-cloud/prettier-config -Paket
npm install --save-dev @imaginary-cloud/prettier-config
Um die Konfiguration abzuschließen, stellen Sie sicher, dass die package.json -Datei "prettier": "@imaginary-cloud/prettier-config" enthält, um die korrekte Prettier Konfiguration
Am einfachsten fügen Sie unter dem scripts-Objekt in der package.json -Datei die folgenden zwei Skripte hinzu:
"lint": "eslint ./ --ignore-path .gitignore",
"lint:fix": "npm run lint -- --fix"
Das Skript npm run lint führt den Linter im Projekt aus und lässt dabei die Dateien aus der .gitignore -Datei aus. Wenn Best Practices, Standards oder Code-Stile in unserem Code nicht eingehalten werden, wird der entsprechende Fehler oder die Warnung angezeigt. Dies ist extrem wichtig für jedes Projekt mit einem CI/CD -Setup. Das Skript npm run lint:fix ist nützlich, um gefundene Fehler automatisch zu beheben, sofern der Linter weiß, wie dies zu tun ist. Wenn Sie einem bestehenden Projekt eine Linter-Konfiguration hinzufügen, kann dieses Skript helfen, viele Fehler zu beheben und die allgemeine Codequalität mühelos zu verbessern.
Wir verfolgen denselben Ansatz wie oben und fügen ein Skript hinzu, um unser Prettier
"format": "prettier --write \"{,!(node_modules)/**/}*.js\""Ausführen des Skripts npm run format formatiert den Code-Stil aller JavaScript-Dateien. Genau wie ESLintbietet es hervorragende Code-Editor-Erweiterungen, mit denen Prettier beim Speichern automatisch auf Dateien angewendet wird und diese direkt formatiert, ohne dass das Skript manuell ausgeführt werden muss!
Immer mehr Frameworks und Bibliotheken kommen auf den Markt, um komplexere und dynamischere Anwendungen zu ermöglichen. Daher ist der Einsatz geeigneter statischer Code-Analysetools von entscheidender Bedeutung. Dies stellt sicher, dass bewährte Methoden, Standards und einheitliche Codestile eingehalten werden. Dadurch werden die Lesbarkeit und Wartbarkeit verbessert, was die Entwicklung neuer Funktionen in kürzerer Zeit erleichtert. Die Einhaltung von Standards ist zudem wichtig, damit Entwickler sich ohne großen Aufwand in eine ihnen unbekannte Codebasis einarbeiten können.
In einem schnelllebigen Umfeld ist Zeit ein entscheidender Faktor. Daher ist eine gute Tool-Ausstattung wichtig, die es Entwicklern ermöglicht, effizienter zu arbeiten und mehr Zeit in die Entwicklung neuer Funktionen zu investieren, anstatt nach Fehlern im Code zu suchen.
Die Nutzung und Ausführung unserer Linting-Tools in unseren CI/CD Pipelines – zusammen mit automatisierten Tests und Code-Reviews für jeden neuen Codeabschnitt – ist unerlässlich. Dies sind die grundlegenden Werkzeuge, über die jedes Projekt verfügen sollte, um sicherzustellen, dass stets die bestmögliche Lösung geliefert wird. Alles in allem sind dies die kleinen, cleveren Helfer, die unseren Entwicklungsalltag maßgeblich erleichtern!
Fanden Sie diesen Artikel hilfreich? Dann könnten Ihnen auch diese gefallen!
Full-Stack-Entwickler und JavaScript-Liebhaber. Erstklassiges Frontend ist mein Ding, wo ich gerne neue Sachen experimentiere. Kajakfischer, Brauer und Biertrinker!
People who read this post, also found these interesting:
