Diese Woche habe ich mein Wissen über die Bedeutung der Codeformatierung in der Softwareentwicklung erweitert. So wie wir auf Textverarbeitungssoftware mit Rechtschreibprüfungsfunktionen angewiesen sind, um Rechtschreibfehler zu erkennen und zu korrigieren, sollten Entwickler Code-Editoren nutzen, die Formatierungs- und Linting-Funktionen bieten, um die Codequalität aufrechtzuerhalten.
Warum statische Analysetools verwenden?
Um die Qualität unseres Codes zu verbessern und die Entwicklungszeit zu verkürzen, ist es für Programmierer unerlässlich, statische Analysetools zu verwenden. Bei der Zusammenarbeit an Projekten mit mehreren Mitwirkenden ist die Einhaltung von Codierungsstandards von entscheidender Bedeutung, da sie es anderen ermöglicht, den Code leichter zu lesen und zu verstehen. Diese Notwendigkeit hat zur Entstehung verschiedener Tools geführt, die auf verschiedene Programmiersprachen zugeschnitten sind. Für mein Projekt diese Woche habe ich mich für die Implementierung von Prettier für meine JavaScript-Codebasis entschieden. Neben Formatierungswerkzeugen ist auch ein Linter unerlässlich. Ein Linter hilft Entwicklern dabei, übersehene Fehler zu identifizieren, die sich möglicherweise nicht auf die Ausführung des Programms auswirken, aber zu erheblichen Problemen im Code führen können, wenn sie nicht überprüft werden. Zu diesem Zweck habe ich ESLint.
ausgewählt
Hübscher
Um Prettier zu verwenden, habe ich es lokal in meinem Projekt mit dem folgenden Befehl installiert:
npm install --save-dev --save-exact prettier
Als nächstes habe ich zwei Konfigurationsdateien erstellt: .prettierrc und .prettierignore:
-
.prettierrc: Diese Konfigurationsdatei enthält die Regeln zur Formatierung.
Ich habe es als leeres Objekt belassen, weil ich das Standard-Setup von Prettier verwenden möchte, ohne irgendwelche Regeln zu überschreiben.
-
.prettierignore: Diese Datei listet die Dateien oder Verzeichnisse auf, die Prettier nicht formatieren sollte.
Ich habe alle Dateien und Ordner eingefügt, die Prettier nicht erreichen soll. Bei den meisten davon handelt es sich um Konfigurationsdateien und selbst generierte Dateien.
Notizen:
- Beide Dateien müssen im Stammverzeichnis des Projekts abgelegt werden.
- Nach der Installation kann ich die Funktionalität von Prettier testen, indem ich Folgendes ausführe:
npx hübscher. --write
- Um die Ausführung dieses Befehls zu vereinfachen, habe ich ein Skript erstellt, das in der Befehlszeile ausgeführt wird. In der Datei „package.json“ habe ich ein neues Skript mit dem Namen „format“ hinzugefügt.
Um dies zu verwenden, geben Sie einfach diesen Befehl ein:
npm-Ausführungsformat
Neben dem lokalen Setup und der Befehlszeilennutzung kann Prettier auch über eine Erweiterung in den Code-Editor (z. B. VSCode) integriert werden. Nach der Installation formatiert es den Code beim Speichern einer Datei automatisch.
Linter
ESLint ist ein Tool zur Identifizierung und Meldung von Mustern im ECMAScript-/JavaScript-Code mit dem Ziel, die Codekonsistenz zu verbessern und Fehler zu minimieren. Sie können ESLint installieren und konfigurieren mit:
npm init @eslint/config@latest
Beim Ausführen dieses Befehls werden Sie durch eine Reihe von Fragen durch die Einrichtung im Terminal geführt und eine neue Konfigurationsdatei mit dem Namen .eslint.config.mjs wird erstellt. Da ich ESLint Version 9.x verwende, werden alle Konfigurationen in dieser Datei angegeben. Ich habe auch unnötige Dateien und Ordner aufgelistet, die ESLint mithilfe der Ignore-Eigenschaft ignorieren soll.
Um den Linting-Prozess zu optimieren, habe ich zur einfacheren Ausführung ein Skript in package.json hinzugefügt.
Um das Skript auszuführen, geben Sie einfach diesen Befehl ein:
npm run lint
Editor-Integration
Während das oben genannte Setup für einzelne Projekte ausreicht, ist in kollaborativen Umgebungen die Gewährleistung einer einheitlichen Entwicklungsumgebung für alle Mitwirkenden von entscheidender Bedeutung. Daher habe ich im Stammverzeichnis einen .vscode-Ordner erstellt, der zwei Dateien enthält:
extensions.json: Diese Datei listet die notwendigen Erweiterungen auf, die Entwickler beim Öffnen des Projekts installieren sollten, und bietet Eingabeaufforderungen beim Projektstart.
-
settings.json: Diese Konfiguration stellt sicher, dass:
- Der Editor formatiert den Code beim Speichern mit Prettier.
- ESLint behebt beim Speichern automatisch Flusenprobleme.
- ESLint validiert JavaScript-Dateien.
- Prettier benötigt eine Konfigurationsdatei, um den Code zu formatieren.
Durch die Einrichtung des .vscode-Ordners mit Settings.json und Extensions.json stelle ich sicher, dass alle Mitwirkenden eine einheitliche Entwicklungsumgebung nutzen, wobei Prettier und ESLint nahtlos in Visual Studio Code integriert sind. Dieses Setup erleichtert die automatische Codeformatierung und Linting entsprechend der Projektkonfiguration und vereinfacht so die Aufrechterhaltung der Codequalität und -konsistenz.
Beheben von Formatierungsproblemen
Nachdem ich Prettier ausgeführt hatte, habe ich einige Dateien identifiziert, die manuelle Anpassungen erforderten, vor allem das Hinzufügen von Kommas zu den letzten Elementen von Objekten.
Nach dem ESLint-Lauf entdeckte ich 13 Probleme, von denen die meisten auf die Verwendung des globalen Objektprozesses zurückzuführen waren, der keine Initialisierung erfordert. Um dieses Problem zu beheben, habe ich oben in den betroffenen Dateien den folgenden Kommentar hinzugefügt:
/* eslint-disable no-undef */
Außerdem gab es einige importierte Werte, die nicht verwendet wurden; In diesen Fällen habe ich sie einfach entfernt.
Abschluss
Durch meine Auseinandersetzung mit statischen Analysetools habe ich ein tieferes Verständnis für deren Bedeutung gewonnen, insbesondere in Gemeinschaftsprojekten. Das Hauptziel dieser Tools besteht darin, die Teamarbeit zu erleichtern und eine hohe Codequalität aufrechtzuerhalten, und ich weiß jetzt zu schätzen, wie man ein Projekt effektiv aufsetzt, um diese wesentlichen Tools von Anfang an zu integrieren.
Das obige ist der detaillierte Inhalt vonÜber die Rechtschreibprüfung hinaus: Wie statische Analysetools die Zusammenarbeit beim Codieren verbessern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
