‫-: Damit sind dieser Abschnitt und das Node-Form-Projekt
‫nun im Grunde
‫abgeschlossen, aber in diesem Video
‫wollte ich ganz schnell mein VS-Code-Setup
‫durchgehen und auch zusammen mit Ihnen die Prettier-Erweiterung einrichten.
‫Dies sind also die Erweiterungen, die ich in meinem VS-Code
‫installiert habe, und nicht alle werden für diesen Kurs
‫relevant sein, aber
‫wann immer es eine relevante Erweiterung
‫gibt, werde ich sie erwähnen, wenn sie nützlich ist.
‫Zum Beispiel dies. env-Erweiterung hier ist nützlich,
‫um Umgebungsvariablen in einer . n-Datei.
‫Gehen wir also schnell einige davon durch.
‫ESLint ist zum Beispiel nützlich, um Fehler in unserem Code zu
‫finden, und wir werden ESLint mit Node etwas später
‫in einem anderen Abschnitt einrichten.
‫Wir haben eine Bildvorschau, eine sehr
‫nette kleine Erweiterung zur Vorschau von Bildern.
‫Und vielleicht ist Ihnen aufgefallen, dass Sie, als wir dies taten, zum
‫Beispiel das
‫Beispiel hier sehen, dass hier auf der linken Seite
‫alle Bilder angezeigt werden, die wir in eine Website einbinden.
‫In diesem Beispiel ist es also dieser.
‫Alles klar, also nur etwas Kleines, das ich sehr nützlich fand.
‫Was haben wir hier noch?
‫Wir haben Prettier und das ist es,
‫was ich in diesem Video mit Ihnen konfigurieren möchte,
‫aber jetzt gehen wir hier auf einige
‫andere ein.
‫Pug ist also eine Sprache, die wir später zum
‫Erstellen von Vorlagen
‫verwenden werden, und daher ist es nützlich, diese
‫Erweiterung auch für diese zu haben.
‫Dann habe ich auch TabNine, das manchmal ein paar
‫nette magische Autovervollständiger macht.
‫Dann habe ich auch noch TODO
‫Highlight, was sehr nützlich ist, um
‫diese Art von Magie
‫hier zu machen.
‫Wenn ich zum
‫Beispiel TODO habe, wird es in dieser grünen
‫Farbe hervorgehoben oder wenn ich BUG
‫so schreibe, wird es rot
‫oder FIXME und ich
‫habe alle möglichen dieser Schlüsselwörter hier, die ich in
‫den verschiedenen Farben finden muss,
‫um sie sichtbar zu machen in meinem Code.
‫Und es wird sogar hier in
‫dieser Bildlaufleiste angezeigt.
‫Wenn ich diese in
‫verschiedenen Linien hätte, dann würden Sie die drei
‫Farben jetzt hier auf dieser Seite
‫sehen und das ist unglaublich nützlich.
‫Gut.
‫Und dann natürlich mein
‫VS-Code-Thema, das
‫Oceanic Next ist, also
‫bekomme ich diese Frage die ganze
‫Zeit und anstatt sie gut
‫zu stellen, ist hier die Antwort darauf.
‫Gut.
‫Aber
‫jetzt wo ist es?
‫Prettier ist also eine
‫sehr schöne Erweiterung, die automatisch
‫Code formatieren kann, egal
‫ob JavaScript oder
‫CSS oder sogar
‫HTML.
‫Mit dieser Erweiterung müssen wir uns nicht mehr
‫um die Formatierung kümmern.
‫Und es ist tatsächlich
‫sehr eigensinnig, also folgt es einem
‫sehr strengen Regelwerk mit nur einer kleinen Konfiguration.
‫Aber in diesem Fall der Codeformatierung ist
‫es eigentlich sehr schön, wenn jemand anderes
‫diese Entscheidungen für Sie übernimmt.
‫Das ist also eine Sache weniger, worüber wir uns Sorgen machen müssen.
‫Okay, unser Code wird automatisch
‫formatiert, ohne dass wir etwas tun oder
‫uns um einen bestimmten Stil kümmern müssen.
‫Okay?
‫Wenn Sie es
‫also ausprobieren möchten, installieren Sie es jetzt hier.
‫Wahrscheinlich hast du einen Install-Button.
‫Ich habe es natürlich schon installiert.
‫Um die volle Leistung dieser Erweiterung zu nutzen, müssen
‫Sie als
‫Nächstes zu Ihren Einstellungen gehen
‫und dann beim Speichern Formatieren aktivieren.
‫Suchen Sie
‫also einfach nach Format und dann Format beim Speichern.
‫Wenn wir also jetzt eine Datei
‫speichern, verwendet sie automatisch Prettier, um unseren Code zu formatieren.
‫Also haben wir Prettier installiert.
‫Wir haben Format beim Speichern aktiviert.
‫Und jetzt können wir Prettier ein wenig konfigurieren.
‫Wieder ist
‫es, wie gesagt, sehr eigensinnig.
‫Es gibt also nicht viele Dinge, die wir
‫ändern können, aber einige Dinge können wir tatsächlich ändern.
‫Jetzt könnten wir das
‫hier direkt im
‫VS-Code
‫tun, aber stattdessen können wir auch eine Konfigurationsdatei definieren.
‫Okay?
‫Und das finde ich eigentlich besser.
‫Anstatt also VS-Code zum Definieren der Einstellungen zu verwenden,
‫können wir eine Prettier-Konfiguration verwenden, die
‫als
‫Prettier RC bezeichnet wird.
‫In Ordnung, es hat also einen schöneren
‫Punkt als rc.
‫Dann öffnen wir die geschweiften
‫Klammern und dann können wir hier einige Einstellungen vornehmen.
‫Und ich finde es besser, es so zu
‫machen, weil ich dann Konfigurationen
‫von einem Projekt zum anderen ändern kann.
‫Und noch
‫wichtiger ist, dass es für mehrere
‫Entwickler im selben Team einfacher ist, dieselbe Konfiguration zu verwenden.
‫Okay, das kann für Teams sehr, sehr nützlich sein.
‫Noch nützlicher, als wenn Sie nur alleine arbeiten.
‫Die einzige Einstellung, die ich hier wirklich ändern möchte,
‫heißt einfaches Anführungszeichen.
‫Eigentlich hat Prettier diese automatische Vervollständigung
‫bereits integriert und weiß, dass Single ein einfaches
‫Anführungszeichen bedeutet.
‫Und der Standardwert ist false, aber ich möchte ihn auf true setzen.
‫Das wird also dazu führen, dass alle meine
‫Anführungszeichen von doppelten Anführungszeichen in einfache Anführungszeichen geändert werden, okay?
‫Also habe ich gespart und hier
‫ist unser Index. js.
‫Und jetzt wollen wir sehen, ob es hier irgendwelche doppelten Anführungszeichen gibt, und ich
‫denke, sie sind
‫es nicht, weil ich die einfachen Anführungszeichen sowieso ziemlich konsequent verwendet habe.
‫Aber lassen Sie uns hier einfach ein paar doppelte Anführungszeichen setzen, und
‫jetzt werde ich es
‫speichern und mir ansehen, was passiert.
‫Whoa.
‫Sie haben also zuerst gesehen, dass sich hier eine Menge
‫Dinge geändert haben und unser Code hier
‫irgendwie herumgesprungen ist, aber hier hatte ich die einfachen Anführungszeichen.
‫Sie sehen also, dass sie wieder die doppelten Anführungszeichen sind.
‫Nun, all dieses herumspringende Code lag
‫wahrscheinlich daran, dass ich irgendwann mehrere Zeilen hatte.
‫Und das lässt Prettier nicht zu.
‫Wenn ich also so etwas habe und
‫es speichere, lässt Prettier nur eine Leerzeile zu.
‫Und eigentlich war dies für mich die schwierigste
‫Änderung aller Formatierungen, die Prettier vornimmt.
‫Und es ist nicht
‫konfigurierbar, daher können wir das leider nicht ändern.
‫Weil ich manchmal gerne mehrere Leitungen habe, aber mit
‫Prettier ist das einfach nicht möglich.
‫Ich kann so etwas machen und dann
‫wird es funktionieren, aber es ist nur eine Umgehung.
‫Aber immer noch mit diesem Problem verwende ich wirklich lieber Prettier.
‫Auch weil es den Gedanken an die Formatierung
‫wegnimmt.
‫Etwas anderes, das ich hier gemacht habe, war zum Beispiel dies.
‫Wenn also eine bestimmte Anzahl von Zeichen in
‫einer Zeile
‫überschritten wird, findet es eine gute Möglichkeit, den Code
‫in mehrere Zeilen aufzuteilen.
‫Und so wurde es hier gemacht.
‫Mal sehen, was wir hier noch haben.
‫Nun, ich
‫denke, denn abgesehen von dieser Veränderung haben wir vielleicht einfach
‫alles gelehrt, dass alles beim Alten geblieben ist.
‫Okay, und von nun an werde ich in allen
‫anderen
‫Codes in diesem Kurs immer diese PrettierRC-Konfigurationsdatei mit automatischer
‫Speicherung auf true verwenden.
‫Okay.
‫Eine andere Sache,
‫die ich nicht erwähnt habe, ist, dass die Semikolons automatisch
‫eingefügt werden, wenn ich also fortfahre und
‫dieses und dieses und dieses lösche.
‫Sparen Sie.
‫Sie sehen, dass sie wieder da sind.
‫Gut?
‫Wenn Sie sich jetzt einen
‫Überblick über all die Dinge verschaffen möchten, die Sie mit
‫Prettier konfigurieren können, ist das sehr einfach, wenn wir Prettier in Google schreiben.
‫Sie positionieren sich also als eigenwilliger Code-Formatierer.
‫Und wie ich
‫Ihnen bereits sagte, haben wir hier unten die Optionen, die
‫wir tatsächlich konfigurieren können.
‫Also Druckbreite.
‫Die Tab-Breite.
‫Also, wenn Sie einer dieser Leute sind, die vier Breiten
‫verwenden, was ich bis vor kurzem tatsächlich war, wie
‫vor einem Jahr.
‫Nun, dann können Sie das über die Tabulatorbreite konfigurieren, dann haben
‫Sie zum Beispiel die Anführungszeichen, die wir gerade geändert haben.
‫Also einfaches Zitat, wir setzen es wahr und Sie
‫haben alle möglichen Dinge.
‫Sie können es hier auf der rechten Seite sehen, okay?
‫Aber auch hier ist es nicht viel Konfiguration.
‫Also die meisten Sachen kann man wirklich nicht ändern.
‫Eine andere Sache, mit der wir experimentieren können, ist die Tabulatorbreite.
‫Sehen wir uns das an, ich denke, der Standardwert ist 80.
‫Stellen wir ihn auf etwa 120.
‫Und ich
‫dachte, dies würde diesen Code hier ändern, also zurück zu
‫dem, was wir vorher hatten, alles
‫in einer Zeile.
‫Nur um es dir zu zeigen.
‫Aber vielleicht ist unsere Schlange sogar noch länger.
‫Also lasst uns hier etwas wirklich Lächerliches schreiben wie 200
‫und whoa!
‫Was passiert hier?
‫Ah ho! Sie sehen also, dass sich das
‫jetzt tatsächlich in etwas noch Seltsameres geändert hat.
‫Okay, ich habe nie einfach nur experimentiert.
‫Setzen Sie es zurück auf 120 und
‫was ist hier los?
‫Lassen Sie mich das nur schnell beheben.
‫Und es tut es wieder, in Ordnung.
‫Setzen Sie es auf 80 zurück, wie
‫wir es hatten, und jetzt sieht es so aus.
‫Oh
‫ja!
‫Oh es tut mir leid.
‫Das war nicht das, was ich tun wollte.
‫Natürlich wollte ich die Tabulatorbreite nicht ändern,
‫wenn mein Standardwert zwei ist.
‫Ich wollte die Druckbreite ändern.
‫Also im Grunde wie breit eine Linie sein kann.
‫Oh das war echt blöd.
‫Jetzt ist es wieder normal, da der Standardwert zwei ist.
‫Also ja, jetzt können Sie sehen, dass es hier tatsächlich
‫wieder in eine Zeile geraten ist, denn an diesem Punkt sind wir hier bei
‫Spalte 96.
‫Wie Sie hier unten sehen, beträgt die Grenze 120.
‫Und so musste diese Codezeile nicht in die
‫zweite eingeschlossen werden.
‫Okay?
‫Aber ich mag dieses 80er Limit eigentlich und
‫deshalb werde ich es hier
‫zurückstellen und dieses in Zukunft verwenden.
‫Also habe ich die Standardeinstellung angepasst, damit ich sie einfach loswerden kann.
‫Sparen Sie.
‫Und damit sind wir wieder da, wie es vorher war.
‫Wenn Sie also denken,
‫dass Ihnen dies gefällt, dann verwenden Sie es bitte genauso wie ich.
‫Aber wenn nicht, dann ignoriere einfach alles, was
‫ich in diesem
‫Video gesagt habe, und mach einfach weiter.
‫Also auch kein Problem.