‫-: Bevor wir zum
‫nächsten Abschnitt und mongoDB übergehen, möchte ich Ihnen
‫zeigen, wie Sie eslint zusammen mit prettier in vs
‫code einrichten, um unsere Codequalität zu verbessern.
‫Wenn Sie jetzt keinen vs-Code
‫verwenden oder bereits eine Art Linter in Ihrem
‫Workflow haben, markieren Sie diese Vorlesung bitte als abgeschlossen und fahren
‫Sie direkt mit dem nächsten Abschnitt fort.
‫Aber wenn Sie neu bei
‫es Lint sind und Ihre Codequalität verbessern
‫möchten, dann beginnen wir mit diesem Video.
‫Es Lint ist also im Grunde ein
‫Programm, das unseren Code ständig
‫scannt und potenzielle Codierungsfehler
‫oder einfach schlechte Codierungspraktiken findet, die es für falsch hält.
‫Es ist sehr, sehr konfigurierbar, sodass
‫wir es wirklich auf unsere Bedürfnisse
‫und Programmiergewohnheiten abstimmen können.
‫Jetzt können wir es Lint auch für die Codeformatierung verwenden,
‫aber wir werden weiterhin hübscheres
‫verwenden, das wir bereits zuvor dafür eingerichtet haben.
‫Also werden wir die ganze
‫Sache so einrichten, dass hübscher immer noch der Hauptcodeformatierer ist,
‫aber basierend auf einigen es Lint-Regeln, die
‫wir definieren werden.
‫Alles, was es Lint für uns tun
‫wird, ist, die Fehler hervorzuheben.
‫Aber ich weiß, dass
‫das alles wahrscheinlich verwirrender klingt als alles andere.
‫Also lassen Sie uns das jetzt tatsächlich einrichten.
‫Das erste, was ich
‫möchte, ist, die es Lint-Erweiterung für vs Code zu installieren.
‫Also komm her und suche nach es Lint.
‫Okay?
‫Und ich habe es bereits
‫installiert, aber es sieht so aus.
‫Alles, was Sie tun müssen,
‫ist, es zu installieren und dann wahrscheinlich dieses Fenster neu zu laden.
‫Und wenn Sie Prettier noch nicht eingerichtet
‫haben, machen Sie das auch.
‫Also mit dieser Erweiterung hier,
‫aber diese haben wir eigentlich schon
‫im ersten Abschnitt gemacht, wenn du das mit mir verfolgt hast.
‫Als nächstes müssen wir eine Reihe von Dev-Abhängigkeiten installieren, also
‫lassen Sie uns das hier tatsächlich viel größer machen
‫und zu unserem anderen Terminal hier gehen.
‫Nehmen wir also an, npm install und wir müssen es
‫Lint auch in hübscher als npm-Pakete installieren.
‫Okay?
‫So ist es Lint und
‫hübscher, und wahrscheinlich ist dies jetzt
‫das erste Mal,
‫dass wir tatsächlich mehrere Pakete gleichzeitig installieren.
‫Und das ist ganz einfach, wir schreiben all diese
‫Pakete einfach alle in den gleichen Befehl.
‫Okay?
‫Aber mit diesen beiden sind wir eigentlich noch lange nicht fertig.
‫Die nächste ist es Lint config prettier und diese
‫wird die Formatierung für es Lint deaktivieren, denn
‫denken Sie daran, wir möchten, dass unser Code hübscher formatiert wird.
‫Als nächstes haben wir es Lint
‫Plugin prettier und
‫dieses ermöglicht es Lint, Formatierungsfehler anzuzeigen, während
‫wir wieder mit prettier tippen.
‫Okay?
‫Und das alles ist natürlich sehr verwirrend
‫und ich brauchte viel Zeit, um das herauszufinden.
‫Und das ist wirklich nur ein Rezept, das
‫Sie hier befolgen müssen.
‫Okay?
‫Es geht also nicht
‫darum zu verstehen, was ich
‫hier tue, Sie müssen nur diesem Rezept
‫folgen, und es wird dann für dieses Projekt funktionieren,
‫und in zukünftigen Projekten müssen Sie
‫nur zu Ihrer Paket-Dot-Json-Datei gehen und kopieren Sie diese Konfiguration
‫und installieren Sie sie in Ihrem nächsten Projekt.
‫Denn eigentlich müssen alle
‫diese Pakete lokal installiert werden.
‫Es würde nicht funktionieren, wenn wir versuchen
‫würden, dies global zu tun.
‫In Ordung?
‫Wie auch immer, wir brauchen jetzt einen guten Styleguide für einige Jobs,
‫dem wir folgen können.
‫Und es gibt viele
‫Styleguides, aber
‫der beliebteste ist wahrscheinlich der Airbnb-Styleguide.
‫Und tatsächlich gibt es eine
‫es Lint-Konfiguration, die wir dafür verwenden können,
‫die sich auf npm befindet, und sie heißt eslint config airbnb.
‫Okay, als nächstes haben wir eslint-Plugin-Knoten, und dies fügt
‫ein paar spezifische eslint-Regeln nur für
‫nodejs hinzu, okay?
‫Also im Grunde um einige Fehler
‫zu finden, die wir beim Schreiben von nodejs-Code machen könnten.
‫Und jetzt endlich brauchen wir noch drei weitere
‫eslint-Plugins, die nur notwendig sind, damit der
‫Airbnb-Styleguide tatsächlich funktioniert.
‫Dieser Styleguide hängt also irgendwie davon ab.
‫Also eslint plugin, import, eslint,
‫plugin, jsx,
‫a11y,
‫und
‫ich
‫sehe, dass ich
‫hier einen Fehler habe.
‫Und schließlich eslint,
‫plugin, reagiere.
‫Auch wenn wir hier keinen React-Code
‫schreiben, brauchen wir diesen
‫dennoch, da der Airbnb-Styleguide davon abhängt.
‫Das sind also alle Pakete, ich hoffe,
‫dass ich sie richtig geschrieben habe.
‫Und jetzt müssen wir diese als Dev-Abhängigkeiten speichern,
‫also speichern Sie Dev und drücken Sie
‫jetzt die Eingabetaste und drücken Sie die Daumen, dass hier alles funktioniert.
‫Es scheint also so zu sein.
‫Werfen wir einen Blick auf unser
‫Paket dot json und tatsächlich haben wir hier alle diese Pakete.
‫Groß.
‫Jetzt ist der nächste Schritt,
‫dass wir Konfigurationsdateien für sowohl prettier als auch es lint benötigen, oder?
‫Und das für hübschere haben wir bereits erstellt und
‫es ist bereits in unserem Projekt hier.
‫Das ist auch dieses hier, und alles, was
‫ich hier getan habe, war zu sagen, dass ich immer das einzelne Zitat haben möchte.
‫Okay?
‫Und die andere ist die Konfigurationsdatei für es lint,
‫und wieder ist sie bereits in den
‫Startup-Dateien, weil wir wirklich keine Zeit
‫verschwenden müssen, nur um
‫diese schreckliche Konfigurationsdatei zu schreiben, oder?
‫Die Datei ist also
‫schon geschrieben, gehen wir sie einfach ganz schnell durch.
‫Hier haben
‫wir also erklärt, dass
‫wir den Airbnb-Styleguide verwenden
‫möchten, und auch hübscher, und auch das Node-Plugin, okay?
‫Jetzt dreht sich bei esl int alles um Codierungsregeln
‫und es gibt viele viele Regeln, die
‫es lint versucht, uns aufzuzwingen.
‫Aber wir können tatsächlich diejenigen
‫ändern, die wir verwenden möchten, einen nach dem anderen.
‫Und wir können sie entweder vollständig
‫deaktivieren oder nur eine Warnung anzeigen, anstatt einen Fehler anzuzeigen.
‫Eine Regel lautet beispielsweise, dass eslint
‫nicht möchte, dass wir Konsolen-Dot-Logs in unserem Code
‫verwenden, und gibt uns daher jedes Mal standardmäßig
‫einen Fehler aus, wenn
‫wir Console-Dot-Log verwenden.
‫Aber anstatt mir einen Fehler
‫anzuzeigen, konfiguriere ich es so, dass es mir nur eine
‫Warnung anzeigt, deshalb haben wir warnen.
‫Ich könnte es auch komplett
‫ausschalten, indem ich abschreibe, wie ich
‫es bei vielen dieser anderen Regeln getan habe.
‫Also zum Beispiel hier in diesem nächsten,
‫das sagt, dass jede einzelne
‫Funktion immer etwas zurückgeben sollte, okay?
‫Und manchmal haben wir einfach eine Funktion, die
‫das nicht tut, und deshalb musste ich diese Regel komplett deaktivieren.
‫Oder schließlich haben wir hier
‫zum Beispiel auch diese Regel, die besagt, dass es
‫niemals eine Variable geben sollte, die wir deklarieren, aber nicht verwenden.
‫Dies fängt tatsächlich viele Fehler auf, und
‫deshalb belasse ich es hier als Fehler, aber ich
‫habe auch einige Ausnahmen erstellt.
‫Also, diese vier Ausnahmen hier, die die typischen
‫Variablen sind, die wir
‫in express haben,
‫also in unseren Handlern in express, die wir aber nicht immer verwenden.
‫Rechts?
‫Und deshalb möchte ich nicht, dass diese jedes Mal
‫als Fehler markiert werden, wenn ich
‫beispielsweise eine req-Variable in einer Funktion habe, aber ich verwende sie nicht.
‫Okay?
‫Sie können sich also diese anderen Regeln hier
‫ansehen und entscheiden, welche
‫Ihnen gefallen und welche nicht.
‫Das sind also die Regeln, die für mich sinnvoll sind,
‫aber bei Ihnen kann es natürlich anders sein.
‫Lassen Sie uns einfach schnell auf die eslint-Website gehen, um
‫einen Blick auf all die Dinge zu
‫werfen, die Sie konfigurieren können.
‫Also es lint, dann haben Sie hier eine Dokumentation und einige Anweisungen, wie
‫Sie es konfigurieren können, aber alles, was ich
‫Ihnen wirklich zeigen
‫möchte, sind all diese verschiedenen Regeln.
‫Sie haben also
‫alle hier drin, und Sie sehen, es gibt
‫wirklich eine Menge davon, die Sie konfigurieren können, okay?
‫Sehen Sie sich das an,
‫aber eigentlich ist es einfacher, dieses eslint einfach zu konfigurieren, wenn Sie
‫einen neuen Fehler in Ihrem Code erhalten.
‫Okay?
‫Lassen Sie mich Ihnen das
‫zeigen, damit wir es jetzt in der Praxis sehen können.
‫Gehen wir also hier zu unserer Serverdatei und erstellen
‫Sie hier einfach Code,
‫der gegen einige es-Regeln verstößt.
‫Also zum Beispiel hier eine Variable definieren und ihr
‫dann etwas anderes zuweisen.
‫In Ordnung, und wir wissen also, dass x eine Konstante ist
‫und daher nicht neu zugewiesen werden sollte.
‫Wenn wir dies also jetzt
‫zugewiesen geben, sollten wir eigentlich einen Fehler sehen.
‫Und das haben wir nicht getan, also werde ich
‫das Fenster schließen und dann wieder öffnen.
‫Mach das auch so
‫und hoffentlich klappt es bis dahin.
‫Okay, und eigentlich sehen wir unsere Fehler hier
‫jetzt rot markiert.
‫Damit kommen wir nun zu dieser Registerkarte Probleme.
‫Lassen Sie mich es ein wenig nach
‫oben verschieben, und hier sehen wir alle Fehler, die wir haben.
‫Beginnen Sie also mit
‫dem ersten, erwartet Sie eine leere Zeile nach
‫der erforderlichen Anweisung, nicht gefolgt von einer weiteren Anforderung.
‫Im Grunde sagt
‫es mir also, dass es diese hier
‫oben erfordert und dann eine leere Zeile und dann so.
‫Und damit verschwindet der Fehler.
‫Okay?
‫Und so erzwingt diese Art einen schöneren Codierungsstandard.
‫Als nächstes haben wir x zugewiesen und einen Wert nie verwendet.
‫Und das sind keine
‫unbenutzten Variablen, die ich zuvor erwähnt habe.
‫Also dieser hier.
‫Okay?
‫Dies ist also ein Fehler, aber ich könnte es auch deaktivieren, nur um Ihnen
‫zu zeigen, wie sich das dann ändern würde.
‫Also habe ich es gespeichert und nun ist der Fehler weg.
‫Sie sehen also, dass es nicht mehr rot markiert ist.
‫Aber eigentlich möchte ich, dass dies ein
‫Fehler ist, also schreibe ich einen Fehler, speichere ihn und unser Fehler ist zurück.
‫Sie sehen, es wird deklariert, aber nie verwendet.
‫Und dann ist x hier konstant.
‫Wir haben hier also wirklich einen
‫Fehler gemacht, nämlich eine
‫Konstante neu zuzuweisen, und das ist nicht erlaubt, also lass
‫uns das loswerden und dann verschwindet der Fehler.
‫Wir haben diesen noch, da der Wert noch
‫nie verwendet wurde.
‫Schreiben wir schnell x plus zwei und jetzt ist es weg.
‫Aber wir haben den nächsten Fehler, im
‫Grunde einfach weil wir diesen
‫Code hier herumsitzen haben und nichts zugeordnet haben.
‫Sagen wir einfach, const y ist gleich diesem, aber dann
‫wird y natürlich zugewiesen, aber nie verwendet, und so treten wir
‫hier in diese Schleife ein.
‫Aber wie auch immer, dies war nur, um es Ihnen zu demonstrieren.
‫Sehen wir uns nun die letzte Warnung an.
‫Und das ist also keine Konsole, oder?
‫Denken Sie also daran, dass ich schon einmal darüber gesprochen habe und
‫es grün ist, weil es eine Warnung ist.
‫Also könnte ich es wieder ausschalten, und dann würde
‫mein Problem verschwinden, sodass der Code jetzt normal
‫aussehen würde.
‫Aber eigentlich möchte ich, dass eslint mich davor warnt,
‫weil es keine gute Praxis ist,
‫später in der Produktion allzu viele Konsolenprotokolle zu haben.
‫Alles klar, also ist es jetzt wieder da.
‫Und tatsächlich warnt mich vs code auch, dass es
‫hier in dieser Datei eine grüne
‫Warnung gibt.
‫Vielleicht haben Sie das schon einmal
‫bemerkt, aber wenn wir hier
‫einen Fehler eingeben, wird er tatsächlich rot.
‫Okay?
‫Jetzt ist es also rot, und wir haben da drin zwei Probleme.
‫Und das ist wirklich hilfreich, um Probleme
‫in all diesen Dateien zu identifizieren.
‫In Ordnung, lass es uns loswerden.
‫Und das ist es eigentlich.
‫Ich hoffe also, dass es auch für
‫Sie funktioniert hat, wenn Sie einen Fehler haben, versuchen
‫Sie einfach, die gleichen Pakete wie ich zu installieren.
‫Also all dies hier, und denken Sie daran, dass
‫Sie es so machen.
‫Wenn Sie also zum Beispiel
‫eslint five wollen, sagen Sie einfach npm I eslint at five.
‫Zum Beispiel können Sie sogar fünf Punkt 16 Punkt 0 wählen,
‫nur um wirklich sicherzustellen, dass alles gleich ist.
‫Und dann sollte bei mir alles
‫so funktionieren wie hier.
‫Großartig, also war dies ein weiterer
‫wichtiger Schritt auf Ihrem Weg zum Entwickler.
‫Denn glauben Sie mir, es ist
‫wirklich wichtig, Code-Linting zu haben, wie Sie es jetzt haben.
‫Also, für Ihr nächstes
‫Projekt kopieren Sie einfach diese Abhängigkeiten in
‫Ihre Packet-Dot-Json-Datei und installieren Sie sie
‫alle gleichzeitig.
‫Und das wird Ihr Leben dann viel einfacher machen.
‫So mache ich
‫es immer, und das gleiche natürlich mit
‫dem hübscheren rc und dieser eslint-Konfigurationsdatei.
‫Wie auch immer, genug geredet für dieses Video.
‫Wir sind nun endlich bereit, zum
‫sehr wichtigen Mongodb-Abschnitt überzugehen.