Boilerplatecode

Boilerplate-Code

CODE-QUALITÄTSEINSTELLUNG

Die Aufrechterhaltung eines sauberen und konsistenten Codes ist der wichtigste Teil der Entwicklung. Die Entwicklung in Teams kann sogar noch schwieriger sein. Neben der Einhaltung von Konventionen ist es wichtig, die Codebasis relevant und aktuell zu halten. Glücklicherweise bietet das JavaScript-Ökosystem Instrumente, die den Entwicklungsprozess einfacher, berechenbarer und zuverlässiger machen.

 

Hier sind Eslint und Prettier eine gute Wahl, um sie in Ihr Projekt zu integrieren.

 

Einrichten von Eslint und Prettier für ein neues Projekt

ESLint ermöglicht es Ihnen, Richtlinien über den Codierungsstandard zu setzen und hilft, Fehler zu minimieren.

 

Prettier ist fast ein Standardwerkzeug für die Formatierung von Code in Frontend-Projekten.

Ein neues Projekt einrichten

Für dieses kleine Tutorial werden wir die Kombination React + Typescript mit Create React App (CRA) starter verwenden.

Öffnen Sie im Terminal den Ordner, in dem Sie Ihr Projekt ablegen möchten, und führen Sie:

 

npx create-react-app test-app –template typescript

 

Nachdem das Projekt initialisiert wurde, öffnen Sie es in Ihrer bevorzugten IDE oder Ihrem Code-Editor. In diesem Tutorial werden wir VSCode verwenden.

 

Es ist wichtig zu beachten, dass ein mit CRA erstelltes Projekt mit einigen grundlegenden Eslint-Einstellungen geliefert wird, die für die Erstellung kleiner Projekte mit einem einzelnen Entwickler hilfreich sein können. Für große Projekte, an denen ein Team arbeitet, können diese Regeln jedoch unzureichend sein.

 

Es gibt zwei Möglichkeiten, benutzerdefinierte eslint-Einstellungen für CRA-Projekte vorzunehmen:

  • Eslint CLI verwenden
  • Manuelles Installieren aller Abhängigkeiten

Wir werden uns für den ersten Ansatz entscheiden. Allerdings kann es bei diesem Ansatz zu einem Konflikt zwischen den Eslint-Versionen kommen: Eslint-Version des react-script-Pakets (Teil von CRA) und Eslint-Version, die von Eslint CLI installiert wird. Wir werden an dieser Stelle nicht weiter darauf eingehen.

 

Als Erstes müssen Sie die Datei package.json öffnen und die Einstellungen von eslintConfig entfernen.

"eslintConfig": {
   "extends": [ "react-app", "react-app/jest" ]
},

Gehen Sie dann im Terminal zum Stammverzeichnis des erstellten Projekts (oder öffnen Sie ein integriertes Terminal) und führen Sie den folgenden Eintrag aus:

 

npm install eslint –save-dev

npx eslint -init

 

Dann

  • How would you like to use Eslint? … Wählen „To check syntax and find problems“.
  • What type of modules doues your project use? Wählen “Javascript modules”
  • Which framework does your project use? Wählen “React”
  • Does your project use Typescript? Wählen “Yes”
  • Where does your code run? Wählen „Browser“
  • What format do you want your config file to be in? Wählen „Javascript“

Als Nächstes bietet Ihnen eslint CLI an, zusätzliche Abhängigkeiten zu installieren, die für das Linting für React und Typescript benötigt werden. Akzeptieren Sie das.

 

Hinweis: Erinnern Sie sich, dass wir über Konflikte zwischen Eslint-Versionen im Projekt gesprochen haben.

 

Wenn wir jetzt versuchen, das Projekt auszuführen, werden wir wahrscheinlich die Fehlermeldung sehen, dass die Version der Eslint-Installation über Eslint CLI höher ist als die Version von Eslint, die vom react-script-Paket verwendet wird.

 

(Sie können dies testen, indem Sie package.json öffnen und die Eslint-Version aus package.json mit der Eslint-Version in node_modules/react-script/package.json vergleichen).

 

Der einfachere Weg, diesen Konflikt zu lösen, besteht darin, die eslint-Version aus der package.json zu deinstallieren und genau die gleiche Version aus react-script/package.json zu installieren.

 

npm uninstall eslint

npm i -D eslint@^7.11.0

 

Damit dürfte der Konflikt gelöst sein.

 

Nachdem die Abhängigkeiten installiert sind, wird im Stammverzeichnis des Projekts die Datei .eslintjs erstellt.

Als nächstes gibt es ein weiteres nützliches Tool - die Eslint-Erweiterung für Ihre IDE. Dieses definitiv sehr nützliche Tool zeigt Ihnen nicht nur Kompilierungsfehler und Warnungen an, sondern bietet auch eine automatische Fehlerbehebung bei Anwendung.

 

Für VSCode gehen Sie zu Erweiterungen (Strg + Shift + X), geben Sie Eslint in das Suchfeld ein und installieren Sie die Eslint-Erweiterung für VSCode.

 

 

Wenn Sie nun die Datei .eslintrc.js öffnen, werden Sie als erstes sehen, dass Eslint eine Warnung anzeigt

 

Dies geschieht, weil wir angegeben haben, dass der Code im Browser ausgeführt werden soll. Das ist richtig.

 

Unsere Webanwendung wird im Browser ausgeführt, aber die Datei .eslinttc.js läuft in der Node-Umgebung.

 

Um dieses Problem zu beheben, müssen wir „node“ in die Liste der Optionen aufnehmen:

 

Jetzt ist der Fehler behoben und wir können fortfahren.

 

Installation von Eslint-Plugins

Eslin CLI lieferte uns die empfohlenen Regeln für den React + Typescript Stack.

  • eslint:recommended
  • plugin:react/recommended
  • plugin:@typescript-eslint/recommended

Es gibt jedoch weitere Plugins, die bei der Erstellung von React-Anwendungen helfen können. Zum Beispiel das React Hooks-Plugin.

 

Lassen Sie uns die App-Komponente erstellen, die React-Hooks verwendet.

 

 

In diesem Beispiel wollen wir den Text anzeigen, wenn eine Schaltfläche angeklickt wird. Der Ausgangszustand des Textes ist jedoch undefiniert. Daher möchten wir einen Text in den Status setzen, sobald die Schaltfläche angeklickt wird.

 

Hier kommt React useEffect zum Einsatz. Wir können eine Logik im Body des useEffect-Hooks bereitstellen, so dass immer, wenn das show-Prädikat wahr ist, der Textstatus mit dem Wert „Hello World!“ aktualisiert wird.

 

Wenn wir den Code jedoch so ausführen, wie es ist, wird es nicht funktionieren und „Hello World!“ wird nicht erscheinen, nachdem die Schaltfläche angeklickt wurde. So funktioniert useEffect.

 

Im zweiten Parameter des Hooks müssen wir Abhängigkeiten angeben, damit useEffect weiß, wann es die eingebettete Logik ausführen soll.

 

In unserem Fall ist das Array dependencies leer, so dass die Logik, die useEffect enthält, nur einmal ausgeführt wird.

 

Um herauszufinden, von welcher Abhängigkeit useEffect abhängt, werden wir das sehr praktische Eslint-Plugin für React-Hooks installieren.

 

Öffnen Sie den Terminal und führen

 

npm i –D eslint-plugin-react-hooks

 

Danach gehen Sie zu .eslintrc.js Datei und fügen Sie das installierte Plugin in die Liste der Plugins ein:

 

Nun müssen wir eine Regel für unseren Anwendungsfall festlegen. Fügen Sie in der Eigenschaft von rules eine Regel hinzu:

 

'react-hooks/exhaustive-deps': 'warn'

 

Wenn Sie nun zu unserer App-Komponente zurückkehren, werden Sie sehen, dass die Eslint-Erweiterung von VSCode nicht nur eine Warnung anzeigt, sondern auch vorschlägt, dieses Problem zu beheben.

 

Klicken Sie auf „Update the dependencies array to be: [show]“.

Jetzt hat der useEffect-Hook eine Abhängigkeit, die er braucht, um richtig zu funktionieren. Dies ist nur ein Beispiel dafür, wie Eslint die Entwicklung einfacher machen kann.

 

Integration mit Prettier

Um Prettier in unser Projekt zu integrieren, benötigen wir:

  • Prettier-Paket
  • Prettier-Erweiterung für VSCode

Dann öffnen die VSCode-Erweiterungen und suchen nach Prettier, um es zu installieren.

 

 

Öffnen das Terminal und führen:

 

npm install –save-dev –save-exact prettier

 

 

Lassen Sie uns nun eine neue Komponente TestPrettier.tsx erstellen.

 

Ihr Begrüßungstext ist also in die nächste Zeile gewandert. Wir können es manuell verschönern, aber besser Code-Editor tun es für uns.

 

Zuerst erstellen wir im Stammverzeichnis des Projekts den Ordner .vscode und darin die Datei settings.json.

 

Diese Datei wird benötigt, um den VSCode-Editor für die eigenen Bedürfnisse einzurichten. In unserem Fall werden wir einige Einstellungen für Prettier vornehmen.

 

Fügen den folgenden Ausschnitt in die erstellte Datei ein:

 

Hier geben wir den VSCode an, der standardmäßig von Prettier verwendet werden soll und die Formatierung, die beim Speichern ausgeführt werden soll, z.B. wenn wir eine Datei speichern.

 

Gehen Sie nun zurück zu TestPrettier.tsx und drücken STRG+S, um sie erneut zu speichern. Das Ergebnis sollte wie folgt aussehen:

 

Unsere Zeichenkette befindet sich jetzt an der richtigen Stelle. Und auch der Rückgabewert wurde gemäß den Prettier-Standardeinstellungen verschönert. Als Nächstes: Was ist, wenn wir wollen, dass unsere Zeichenkette in einfache Anführungszeichen eingeschlossen wird?

 

Um das Standardverhalten von Prettier anzupassen, erstellen wir die Datei .prettierrc.js im Stammverzeichnis des Projekts und erstellen eine entsprechende Regel.

 

 

Wenn Sie nun die Datei TestPrettier.tsx speichern, werden Sie sehen, dass Prettier doppelte Anführungszeichen in einfache umwandelt. So einfach ist das.

 

Eine Liste der Formatierungsregeln finden Sie auf der offiziellen Website.

 

Vermeiden von Konflikten zwischen Prettier und Eslint

 

Wie bereits erwähnt, hilft uns Eslint dabei, sauberen und zuverlässigen Code zu schreiben. Daneben kann Eslint aber auch Regeln für die Formatierung von Code bereitstellen. In solchen Situationen können die Eslint-Regeln mit den Prettier-Regeln in Konflikt geraten. Betrachten wir das folgende Beispiel.

 

Fügen wir in unserer Datei .eslinrc.js eine Einrückungsregel hinzu:

 

Diese Regel erzwingt eine Einrückung von 4 Leerzeichen. Wenn wir die Datei speichern, werden wir viele Fehler sehen.

 

In unserer Datei TestPrettier.tsx ist die Situation die gleiche.

 

Wenn wir nun Eslint-Fehler beheben, indem wir 4 Leerzeichen einrücken und versuchen, die Datei erneut zu speichern, formatiert Prettier den Code automatisch wieder auf 2 Einrückungen. Das ist der Konflikt.

 

Im vorliegenden Beispiel ist das keine große Sache. Wir wissen, dass wir eine widersprüchliche Regel hinzugefügt haben. Daher können wir sie einfach entfernen und mit dem Schreiben von Code fortfahren. Eine andere Sache ist, wenn wir in unserer Konfiguration eine der populärsten und gemeinsam nutzbaren Configs wie airbn (eslint-config-airbnb-typescript) verwenden. Die Liste solcher Konfigs finden Sie hier: https://github.com/dustinspecker/awesome-eslint#configs-by-well-known-companiesorganizations.

 

Um diese Art von Konflikten zu vermeiden, müssen wir einige zusätzliche Schritte in unseren Einstellungen vornehmen - wir müssen Eslint und Prettier dazu bringen, zusammenzuarbeiten. Das Paket eslint-config-prettier ( https://github.com/prettier/eslint-config-prettier) wird uns dabei helfen.

 

Entfernen Sie die hinzugefügte Einrückungsregel aus den Regeln.

 

Öffnen Sie dann Ihr Terminal und führen Sie aus.

 

npm install –save-dev eslint-config-prettier

 

 

Danach fügen Sie einfach „prettier“ zur Liste der Erweiterungen hinzu, die Sie mit Eslint um die Erweiterung der Prettier-Regeln bitten.

 

Beachten Sie, wie in der Paketdokumentation angegeben, dass Sie es an letzter Stelle einfügen, damit es die Möglichkeit hat, andere Konfigurationen außer Kraft zu setzen.

 

Linting und Formatierung zusammen ausführen

 

Es ist zwar möglich, CLI vom Terminal aus zum Linting und/oder Formatieren von Dateien zu verwenden, aber es ist besser, Skripte in der Datei package.json bereitzustellen, um diesen Prozess irgendwie zu automatisieren.

 

 

Der letzte Schritt wäre vielleicht, unseren Code-Editor so einzurichten, dass er Eslint-Fehler beim Speichern korrigiert, wie wir es bei Prettier getan haben. Es ist zu beachten, dass nicht alle Fehler und Warnungen auf diese Weise behoben werden können. Auf der Regelseite der TypeScript-Eslint-Bibliothek sind „fixable“ Regeln mit 

 

Speichern. Mit dem Speichern einer Datei wird der Code nicht nur formatiert, sondern auch von Eslint korrigiert, falls „fixable“.

Zum Kontaktformular

Zurück