Vom Chaos zur Klarheit: React-Code für eine saubere und lesbare Codebasis formatieren

Beim Starten eines neuen Projekts gibt es eine Erfahrung, die unter React-Entwicklern sehr häufig vorkommt. Sie fangen an, sich darüber zu freuen, wie sauber und lesbar Ihr Code ist, schreiben dann aber eine Handvoll Funktionen oder Komponenten und beobachten langsam, wie Ihre Codebasis im Chaos versinkt. Sie scrollen von oben nach unten, von links nach rechts, lesen Codezeilen immer wieder neu und bewegen sich von Datei zu Datei. Sobald Sie eine Funktionalität fertiggestellt haben, hoffen Sie, dass Sie diese Datei nie wieder öffnen müssen, weil Sie wissen, wie lange es dauern wird, nur eine einzige Funktion oder Variable zu finden – ganz zu schweigen davon, diese Funktionalität zu bearbeiten oder zu ändern.

In diesem Artikel untersuchen wir, welche Rolle die Formatierung dabei spielt, Ihre Codebasis sauber und lesbar zu machen. Wir werden auch Branchenstandards und Best Practices zur Erzielung einer konsistenten Formatierung untersuchen.

Warum Ihren Code formatieren?

Formatierung ist entscheidend für die Lesbarkeit und Wartbarkeit Ihres Codes. Aber wie?

Gut formatierter Code hilft dabei, verschiedene Teile Ihres Codes visuell zu trennen und erleichtert so das Verfolgen des logischen Ablaufs. Durch die richtige Einrückung wird die Beziehung zwischen übergeordneten und untergeordneten Komponenten, Elementen oder Selektoren hervorgehoben. Eine konsistente Formatierung verbessert Ihre Fähigkeit, Ihren Code schnell zu debuggen, zu reparieren und zu warten. Wenn Sie mit Teammitgliedern zusammenarbeiten, die dieselben Formatierungsregeln befolgen, wird es einfacher, den Code des anderen ohne Verwirrung zu verstehen.

Eine geringere mentale Belastung ist ein weiterer Vorteil einer guten Formatierung. Sauberer Code erfordert weniger geistige Anstrengung, um ihn zu verstehen, sodass Sie sich mehr auf die Lösung neuer Probleme konzentrieren können, anstatt schlecht formatierte Codeblöcke zu entschlüsseln.

Wenn ein Team einem einheitlichen Stil folgt, kann jeder einen Beitrag leisten, ohne Zeit damit zu verschwenden, Codeblöcke entsprechend persönlicher Vorlieben neu zu formatieren. Eine gute Formatierung bringt auch Disziplin und Professionalität in die Codebasis.

Schließlich ist die Werkzeugkompatibilität ein wesentlicher Vorteil. Entwickler verwenden Linters, Add-Ons und IDEs, die auf einer konsistenten Formatierung basieren. Um diese Tools vollständig nutzen und von Funktionen wie automatischer Vervollständigung und Fehlerhervorhebung profitieren zu können, muss Ihre Codebasis ordnungsgemäß formatiert sein. Aber wie erreicht man das?

Was ist bei der Formatierung einer Codebasis erforderlich?

Wenn wir von der Formatierung einer Codebasis sprechen, beziehen wir uns normalerweise auf mehrere Aspekte: Einrückung, Zeilenlänge, Namenskonventionen, Abstände, geschweifte Klammern und Klammern, konsequente Verwendung von Anführungszeichen, Verwendung von Semikolons, Datei- und Ordnerstruktur und die angemessene Verwendung von Kommentare. Kommen wir nun zu den Industriestandards, wie diese verwendet und implementiert werden.

1. Einrückung
   Einrückung ist die Verwendung von Leerzeichen, um Code visuell in einer Hierarchie zu organisieren. Der Industriestandard besteht hier darin, 2 oder 4 Leerzeichen zu verwenden und die Verwendung von Tabulatoren zu vermeiden. Laut Airbnb-Styleguide für Javascript und React sollten Sie 2 Leerzeichen verwenden. Dies liegt daran, dass dadurch konsistente Verschachtelungsebenen beibehalten werden und die Gesamtlesbarkeit Ihres Codes verbessert wird.

2. Linienlänge
   Die Zeilenlänge bezieht sich hier darauf, wie weit der Code, den Sie in eine einzelne Zeile schreiben, reichen soll. Der Industriestandard besteht hier darin, eine Zeile zwischen 80 und 100 Zeichen beizubehalten. Viele Anleitungen, insbesondere PEP 8 und Prettier, empfehlen 80 Zeichen. Dies liegt daran, dass horizontales Scrollen verhindert wird und es normalerweise auf verschiedenen Bildschirmgrößen gut funktioniert. Aber bedeutet das, dass Sie beim Codieren zählen müssen? Nein, zumindest nicht, wenn Sie Code-Editoren wie vscode verwenden. Das Bild unten zeigt Ihnen, wie Sie feststellen können, wie viele Zeichen sich in einer bestimmten Zeile befinden. Das Bild unten zeigt, dass Sie sich in Zeile 44 und beim 93. Zeichen befinden. Sie finden es unten rechts in Ihrem vsCode-Editor, wenn Sie die Standardeinstellungen nicht berührt haben.

1. Namenskonventionen
   
   Dies bezieht sich auf eine Reihe von Regeln für die konsistente Benennung von Dingen. Eine klare, aussagekräftige und präzise Benennung ist entscheidend für das Schreiben von Code, der leicht zu lesen, zu verstehen und zu warten ist. Die beliebteste Namenskonvention für Variablen und Funktionen ist die Verwendung camelCase (eine Möglichkeit, die Wörter in einer Phrase zu trennen, indem der erste Buchstabe jedes Wortes groß geschrieben wird und keine Leerzeichen verwendet werden). Für Reaktionskomponenten sollte PascalCase verwendet werden, insbesondere da der erste Buchstabe einer Komponente wie in den Reaktionsdokumenten angegeben in Großbuchstaben geschrieben werden sollte und für Konstanten die Groß-/Kleinschreibung empfohlen wird. Dieser Abschnitt wird der Benennung nicht gerecht. Wenn ich näher auf die Benennung eingehen würde Hier wird dieser Artikel zu lang. Wenn Sie mehr erfahren möchten, lesen Sie bitte diesen Artikel zur Namenskonvention.

2. Abstand
   Für den Abstand wird empfohlen, der Übersichtlichkeit halber Leerzeichen um die Operatoren einzufügen, insbesondere da bestimmte Operatoren bei kombinierter Verwendung eine andere Operation ausführen. Es wird außerdem empfohlen, Leerzeilen zu verwenden, um logische Codeabschnitte zu trennen. Versuchen Sie, Variablendeklarationen und -zuweisungen aus Funktionsdeklarationen und Logik zu gruppieren und Leerzeilen zu verwenden.

3. Klammern und Klammern
   Gemäß dem Airbnb-Styleguide sollten keine baumelnden Klammern vorhanden sein. Das bedeutet, dass alle schließenden Klammern oder Klammern ordnungsgemäß an den entsprechenden öffnenden Klammern oder Klammern ausgerichtet sein sollten.

4. Konsistente Zitate
   Bei der Verwendung von Anführungszeichen wird empfohlen, im gesamten Projekt entweder einfache Anführungszeichen „“ oder doppelte Anführungszeichen „“ zu verwenden und gleichzeitig zu versuchen, die unnötige Verwendung einer Kombination aus beiden zu vermeiden.

5. Semikolons
   Genau wie bei Anführungszeichen entscheiden Sie, ob Sie Ihre Ausdrücke, Zuweisungen und Codezeilen mit einem Semikolon beenden oder überhaupt kein Semikolon verwenden. Was auch immer Ihre Entscheidung ist, bleiben Sie bitte dabei und seien Sie konsistent. Ich persönlich würde die Verwendung von Semikolons empfehlen, um Probleme zu vermeiden, die mit dem automatischen Einfügen von Semikolons einhergehen.

6. Datei- und Ordnerstruktur
   Bei der Datei- und Ordnerstruktur bestimmen vor allem Faktoren wie die Größe des Projekts und der Tech-Stack die Struktur Ihrer Dateien und Ordner. Es sind jedoch zwei allgemeine Regeln zu beachten. 1 Gruppieren Sie zusammengehörige Dateien. 2 Verwenden Sie aussagekräftige Dateinamen.

7. Kommentare
   Eine Codebasis kann leicht mit Code geclustert werden. Machen Sie es also nicht noch schlimmer, indem Sie zu oft Kommentare verwenden. Wenn Sie über gute Namenskonventionen verfügen und sauberen Code ohne Anti-Pattern schreiben, sollten Sie im Allgemeinen auf die Verwendung von Kommentaren verzichten können. Genau wie Robert c. Martin sagt: „Kommentare sind nicht von Natur aus schlecht“, aber sie sind oft „ein Zeichen dafür, dass es im Code selbst nicht gelungen ist, Absichten zum Ausdruck zu bringen“. Kommentare haben einen Platz in Ihrem Code, sie zeigen, warum ein Code existiert, und nicht, wie ein Codeblock funktioniert Daher sollten Kommentare verwendet werden, wenn Ihr Code eine nicht offensichtliche Entscheidung oder eine Problemumgehung beinhaltet. Vermeiden Sie daher Anti-Muster, um das Wie Ihres Codes nicht mehr erklären zu müssen, und vermeiden Sie es, zu erklären, was der Code bereits ausdrückt.

Nachfolgend finden Sie Links zu einigen branchenspezifischen Styleguides

Airnbnb Javascript Style Guide.
StandardJs Style Guide
Schönere Standardeinstellungen
.

Zusammenfassend lässt sich sagen, dass die richtige Formatierung Ihres Codes nicht nur ästhetischen Zwecken dient. Es verbessert die Lesbarkeit, Wartbarkeit und Skalierbarkeit Ihrer Codebasis erheblich und durch die Übernahme gängiger Industriestandards können Sie sicherstellen, dass Ihr Code konsistent und sauber ist

Das obige ist der detaillierte Inhalt vonVom Chaos zur Klarheit: React-Code für eine saubere und lesbare Codebasis formatieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!