Linting-Tools spielen eine entscheidende Rolle in unserem Entwicklungsprozess beim Erstellen von Webanwendungen. Jeder Entwickler sollte wissen, was ein Linter ist, wie man ihn installiert und konfiguriert und wie man ihn effizient verwendet, um sicherzustellen, dass die besten Code-Standards für unser Projekt gelten.
Bei Imaginary Cloud, wir hatten mehrere geliefert Reagieren Apps für unsere Kunden, also haben wir eine Open-Source-App erstellt ESLint Konfiguration - @imaginary -cloud/eslint-config-react um intern verwendet und mit der Community geteilt zu werden. Ziel ist es, eine zentrale Konfiguration zu haben, die jeder verwenden kann. Sie ist einfach zu installieren und zu konfigurieren, wobei die besten JS-Code-Standards der Community verwendet werden und darauf zugegriffen werden kann jsx Code ohne den Aufwand, einen Linter zu konfigurieren.
Aber warum sollten Sie die Imaginary Cloud-Konfiguration anstelle der anderen verfügbaren verwenden? Weil wir die besten und am häufigsten verwendeten Open-Source-Konfigurationen in einem zentralen Paket gebündelt haben, sodass der Installations- und Konfigurationsprozess schnell und problemlos vonstatten geht. Der Hauptvorteil der Verwendung @imaginary -cloud/eslint-config-react über das Bekannte Airbnb Konfiguration ist die, die wir auch verwenden Airbnb config für ihre besten Code-Praktiken sowie den Codestil von Hübscher um einen angenehmeren und lesbareren Code zu haben.
Am Ende dieses Artikels sollten Sie wissen, was Linting-Tools sind und wie man sie installiert/konfiguriert ESLint und Hübscher zum Reagieren Anwendungen mit 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 GitHub Octoverse-Umfrage, JavaScript ist in den letzten fünf Jahren weiterhin die am häufigsten verwendete Sprache. Dies ermöglichte die JS-Ökosystem um zu wachsen und sich weiterzuentwickeln und dem Entwickler mehr und bessere Tools zur Verfügung zu stellen.
Um gute Praktiken und Standards zu gewährleisten, wurden mehrere JavaScript Static Analyzer Tools entwickelt, wie zum Beispiel:
Bei einer solchen Vielzahl von Tools ist es schwierig, den besten Linter für unser Projekt auszuwählen. Als Entwickler bin ich der Meinung, dass das wichtigste Merkmal jedes Tools darin besteht, wie konfigurierbar und einfach zu integrieren ist. Also würde ich für jedes JavaScript-Projekt wählen ESLint und integriere es mit Hübscher. Das sollte mir all die Vorteile eines Linting-Tools geben, das mit einem Code hochgradig konfigurierbar ist Formatierer.
Beim Erstellen von Apps ist es wichtig, über ein gutes Setup automatisierter und manueller Tools zu verfügen, das die besten Standards und die beste Codequalität gewährleistet. Jedes Projekt muss über ein Linting-Tool verfügen, um diese Anforderungen zu erfüllen. Beide Tools sind konfigurierbar und arbeiten gut zusammen, da jedes eine andere Verantwortung zwischen Programmier- und Stilfehlern hat, sodass Fehler leicht erkannt werden können.
ESLint ist eines der am häufigsten verwendeten Fusselwerkzeuge und dafür gibt es einen Grund. Es ist hochgradig konfigurierbar und hat eine große Akzeptanz in der Community. Es verfügt über Hunderte von Open-Source-Konfigurationen und -Plugins. Es ermöglicht die Konfiguration verschiedener Optionen wie Codierungsregeln, Umgebungen, Parseroptionen, Erweiterungskonfigurationen und die Verwendung von Plugins.
Auf der einen Seite ESLint ist für die Überprüfung gegen Programmierfehler zuständig, andererseits haben wir Hübscher ein eigenwilliger Kodex Formatierer in der Lage, stilistische Fehler zu finden. Es enthält einige Codestilstandards und ist auch einfach zu konfigurieren. Es ist einfach zu integrieren ESLint und hat Code-Editor-Erweiterungen, die den Code beim Speichern formatieren können!
Bei Imaginary Cloud Wir entwickeln React-Projekte für unsere Frontend-Anwendungen, daher wurde es wichtig, den Entwicklungsprozess mit den richtigen Tools so weit wie möglich zu automatisieren. Diese Notwendigkeit veranlasste uns, eine Open-Source-Version zu entwickeln ESLint Konfiguration aufgerufen @imaginary -cloud/eslint-config-react zur Verwendung in unseren Projekten. Die Hauptvorteile waren eine schnelle Installation/Konfiguration und die gleichen Code-Standards und der gleiche Stil in einem anderen Projekt.
Die Konfiguration eines Fusselwerkzeugs ist besonders beim ersten Mal zeitaufwändig. Es können mehrere verschiedene Open-Source-Konfigurationen und Plugins verwendet werden, und die Auswahl der benötigten Konfigurationen kann überwältigend sein. Außerdem kann die manuelle Konfiguration eines Linters fehleranfällig sein.
Wir haben diejenigen mit den besten Codepraktiken, Standards und Codestilen recherchiert und gebündelt. Das Ergebnis war also, zwei der am häufigsten verwendeten zu verwenden ESLint Konfigurationen:
Hübscher Tool und fügt Regeln für das Codestilformat hinzu, dies gilt auch für jsx Code aus React-Anwendungen
Und da wir viel mit React-Anwendungen arbeiten, haben wir einige Präferenzen bei den Codestilen, also haben wir diese Regeln auch zu dieser Konfiguration hinzugefügt, was es einfach macht, von Projekt zu Projekt zu wechseln und Code liefern zu können - alle Standards sind die gleichen, da wir dieselbe Konfiguration haben, ja!
Wie jedes andere JavaScript-Paket können diese installiert werden von npm oder Garn. Die Installation ist ziemlich einfach. Beide Pakete, ESLint und Hübscher, müssen als Entwicklungsabhängigkeiten in der Liste aufgeführt werden Paket.json Datei. Eine Möglichkeit, sie schnell zum Projekt hinzuzufügen, besteht darin, den Befehl auf dem Terminal auszuführen
Das wird installiert und hinzugefügt ESLint und Hübscher als Projektabhängigkeiten und alles ist gesetzt. Für ein besseres Entwicklungserlebnis ist es möglich, eines zu installieren ESLint Erweiterung Ihres Code-Editors, die es ermöglicht, Codefehler im Editor während der Entwicklung hervorzuheben.
Es gibt mehrere Möglichkeiten zur Konfiguration ESLint wie im offiziellen Dokumentation. Am gebräuchlichsten ist es, eine zu erstellen .eslintrc (YAML- und JS-Dateien können auch verwendet werden!) mit allen für das Projekt gewünschten Konfigurationen. Um dies effizienter zu erreichen, können mehrere verschiedene Open-Source-Konfigurationen verwendet werden, wie oben erläutert.
Für React-Projekte müssen wir nur installieren @imaginary -cloud/eslint-config-react verpacken und erweitern Sie unsere ESLint Konfiguration. Da diese Konfiguration auch die erforderlichen Abhängigkeiten für die vollständige Konfiguration hinzufügt, haben wir den gleichen Ansatz verwendet wie Airbnb Konfiguration.
Um die Konfiguration zu installieren, führen Sie einfach den Befehl im Terminal aus
npx ist ein Befehl gebündelt mit npm auf den neuesten Versionen, die es ermöglichen npm Pakete, die ausgeführt werden sollen, ohne sie im Projekt installiert zu haben. Das install-peerdeps Das Paket wird ausgeführt und sucht nach den Peer-Abhängigkeiten von @imaginary -cloud/eslint-config-react und installieren Sie sie als Entwicklungsabhängigkeiten zusammen mit der Konfiguration. Dieser Schritt wird im Projekt gespeichert Paket.json archivieren Sie alle benötigten Abhängigkeiten automatisch.
Mit älteren Versionen von npm (< v5.2) npx ist nicht verfügbar, aber es ist möglich, die Konfiguration zu installieren, indem Sie das folgende Skript im Terminal ausführen
Nach der Installation @imaginary -cloud/eslint-config-react Konfiguration, füge die nächsten beiden Zeilen zur Paket.json Ordner
Alles ist eingerichtet und einsatzbereit. Dies zeigt, wie einfach die Installation und Konfiguration ist ESLint und Hübscher für ein React-Projekt in nur zwei Schritten mit @imaginary -cloud/eslint-config-react Konfigurationspaket.
Für eine erweiterte Konfiguration ist es einfacher, eine zu erstellen .eslintrc archivieren und erweitern @imaginary -cloud/eslint-config-react Konfiguration. Entfernen Sie die ESLINT-Konfiguration aus dem Paket.json Datei und Prüfung ESLint Dokumentation für mehr Optionen.
.eslintrc Beispieldatei
Das Paket.json Datei muss die folgende Zeile haben
Um dasselbe zu verwenden Hübscher Konfiguration von @imaginary -cloud/eslint-config-react als eigenständiges Hübscher config installiere die @imaginary -cloud/prettier-config Paket
Um die Konfiguration abzuschließen, stellen Sie sicher, dass Paket.json Datei hat „hübscher“: "@imaginary -cloud/prettier-config“ um das richtige zu benutzen Hübscher Aufbau
Am einfachsten ist es, unter dem Skript-Objekt in der Paket.json archiviere die nächsten beiden Skripte:
Das Drehbuch npm run lint führt Linter im Projekt aus und lässt die Dateien von . gitignore Datei. Wenn unser Code bewährte Methoden, Standards oder Codestile nicht erfüllt, wird der eigentliche Fehler oder die Warnung angezeigt. Es ist äußerst wichtig, dies in jedem Projekt zu verwenden, das eine CI/CD einrichten. Das Drehbuch npm run lint:fix ist nützlich, um jeden gefundenen Fehler automatisch zu beheben, wenn der Linter weiß, wie er behoben werden kann. Wenn Sie einem bestehenden Projekt eine Linter-Konfiguration hinzufügen, kann dieses Skript helfen, viele Fehler zu beheben und die allgemeine Codequalität ohne Aufwand zu verbessern.
Wir werden den gleichen Ansatz wie oben verfolgen und ein Skript hinzufügen, um unsere auszuführen Hübscher
Das Script ausführen npm-Ausführungsformat formatiert den Codestil aller JavaScript-Dateien. Wie ESLint, es hat tolle Code-Editor-Erweiterungen, die das ermöglichen Hübscher um Dateien beim Speichern auszuführen und sie im Handumdrehen zu formatieren, ohne das Skript manuell ausführen zu müssen!
Immer mehr Frameworks und Bibliotheken entwickeln sich, um komplexere und dynamischere Anwendungen bereitzustellen. Daher ist es äußerst wichtig, über die richtigen statischen Codeanalysatoren zu verfügen. Dies garantiert, dass die besten Codepraktiken, Standards und gute Codestile bereitgestellt werden. Dies verbessert die Lesbarkeit und Wartbarkeit und erleichtert die Entwicklung neuer Funktionen in kurzer Zeit. Die Einhaltung von Standards ist auch wichtig, da Entwickler ohne großen Aufwand mit einer unbekannten Codebasis arbeiten können.
In einer schnelllebigen Umgebung ist Zeit alles. Daher ist es wichtig, über ein gutes Setup von Tools zu verfügen, damit die Entwickler effizienter arbeiten und mehr Zeit mit der Entwicklung neuer Funktionen verbringen können, als nach Fehlern im Code zu suchen.
Verwenden und Ausführen unserer Linting-Tools in unserem CI/CD Pipelines sind neben automatisierten Tests und Code-Reviews in jedem neuen Codeabschnitt wichtig. Dies sind die grundlegenden Tools, über die jedes Projekt verfügen sollte, um sicherzustellen, dass immer die beste Lösung geliefert wird. Alles in allem sind dies die kleinen und cleveren Tools, die unsere tägliche Entwicklung vorantreiben!
Fanden Sie diesen Artikel hilfreich? Diese könnten dir auch 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:
.webp)
.webp)
%20(2).webp)
