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 undefined Apps für unsere Kunden, also haben wir eine Open-Source-App erstellt undefined 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 undefined 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 undefined Konfiguration ist die, die wir auch verwenden undefined config für ihre besten Code-Praktiken sowie den Codestil von undefined 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 undefined und undefined zum undefined 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 undefined und integriere es mit undefined. 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.
undefined 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 undefined ist für die Überprüfung gegen Programmierfehler zuständig, andererseits haben wir undefined 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 undefined 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 undefined 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 undefined Konfigurationen:
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 undefined oder undefined. Die Installation ist ziemlich einfach. Beide Pakete, undefined und undefined, müssen als Entwicklungsabhängigkeiten in der Liste aufgeführt werden undefined 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 undefined und undefined als Projektabhängigkeiten und alles ist gesetzt. Für ein besseres Entwicklungserlebnis ist es möglich, eines zu installieren undefined Erweiterung Ihres Code-Editors, die es ermöglicht, Codefehler im Editor während der Entwicklung hervorzuheben.
Es gibt mehrere Möglichkeiten zur Konfiguration undefined wie im offiziellen Dokumentation. Am gebräuchlichsten ist es, eine zu erstellen undefined (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 undefined Konfiguration. Da diese Konfiguration auch die erforderlichen Abhängigkeiten für die vollständige Konfiguration hinzufügt, haben wir den gleichen Ansatz verwendet wie undefined Konfiguration.
Um die Konfiguration zu installieren, führen Sie einfach den Befehl im Terminal aus
undefined ist ein Befehl gebündelt mit undefined auf den neuesten Versionen, die es ermöglichen undefined Pakete, die ausgeführt werden sollen, ohne sie im Projekt installiert zu haben. Das undefined Das Paket wird ausgeführt und sucht nach den Peer-Abhängigkeiten von undefined und installieren Sie sie als Entwicklungsabhängigkeiten zusammen mit der Konfiguration. Dieser Schritt wird im Projekt gespeichert undefined archivieren Sie alle benötigten Abhängigkeiten automatisch.
Mit älteren Versionen von undefined (< v5.2) undefined ist nicht verfügbar, aber es ist möglich, die Konfiguration zu installieren, indem Sie das folgende Skript im Terminal ausführen
undefined
undefined
Nach der Installation undefined Konfiguration, füge die nächsten beiden Zeilen zur undefined Ordner
undefined
Alles ist eingerichtet und einsatzbereit. Dies zeigt, wie einfach die Installation und Konfiguration ist undefined und undefined 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 undefined archivieren und erweitern undefined Konfiguration. Entfernen Sie die undefined aus dem undefined Datei und Prüfung undefined Dokumentation für mehr Optionen.
undefined Beispieldatei
undefined
Das undefined Datei muss die folgende Zeile haben
Um dasselbe zu verwenden undefined Konfiguration von @imaginary -cloud/eslint-config-react als eigenständiges undefined config installiere die @imaginary -cloud/prettier-config Paket
Um die Konfiguration abzuschließen, stellen Sie sicher, dass undefined Datei hat undefined um das richtige zu benutzen undefined Aufbau
Am einfachsten ist es, unter dem Skript-Objekt in der undefined archiviere die nächsten beiden Skripte:
Das Drehbuch undefined führt Linter im Projekt aus und lässt die Dateien von undefined 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 undefined einrichten. Das Drehbuch undefined 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 undefined
Das Script ausführen undefined formatiert den Codestil aller JavaScript-Dateien. Wie undefined, es hat tolle Code-Editor-Erweiterungen, die das ermöglichen undefined 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 undefined 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)
