JavaScript hat sich in den letzten Jahren zu einem riesigen Ökosystem entwickelt, was das Erlernen dieser Sprache spannend und herausfordernd zugleich macht.
Die riesige Auswahl an verfügbaren Tools und Frameworks könnte für einige Nachwuchsentwickler ein Hindernis darstellen, die nicht wissen, wo sie anfangen und was sie verwenden sollen.
Als Faustregel gilt, dass man sich zunächst die Grundlagen der Sprache aneignen sollte und erst später zu den Feinheiten übergeht. Das ist sicherlich ein guter Ansatz.
Meiner Erfahrung nach sind jedoch einige Werkzeuge selbst für absolute Anfänger unverzichtbar, und wenn man weiß, wie man sie einrichtet und verwendet, kann die Lernkurve reibungsloser verlaufen.
In dieser Reihe von Beiträgen werde ich daher einige unverzichtbare Werkzeuge des modernen JS-Ökosystems vorstellen und Tipps geben, wie wir sie in unseren Projekten einsetzen und integrieren können.
Bevor wir beginnen, sollten wir unsere Umgebung einrichten. Für die in diesem Beitrag besprochenen Tools brauchen wir nicht viel – holen Sie sich einfach das neueste Node.js auf Ihren Rechner, falls Sie es nicht schon installiert haben.
Node ist mit allen drei Betriebssystemen kompatibel, es steht Ihnen also frei, das Betriebssystem Ihrer Wahl für den Entwicklungsrechner zu verwenden.
Coding style
Stellen Sie sich vor, Sie arbeiten mit ein paar anderen Entwicklern an einem Projekt. All diese Jungs und Mädels werden ihre bevorzugten Coding Style haben – von Einrückungspräferenzen über die Platzierung von Klammern und Zeilenumbrüchen bis hin zu Kommentierungsmethoden.
Der resultierende Code eines Teams ohne strenge Stilrichtlinien ist unübersichtlich und schwer zu durchschauen.
Aus diesem Grund müssen der Coding Style und die Standards zu Beginn des Projekts vereinbart und von allen Mitgliedern ohne Ausnahmen befolgt werden. Aber wir sind alle Menschen, und wir haben dieses wunderbare (aber manchmal auch lästige) Ding namens Muskelgedächtnis.
Das Muskelgedächtnis in unseren Fingern hilft uns, Routineaufgaben auszuführen, ohne darüber nachzudenken (z. B. einen Codeblock für eine IF-Anweisung zu erstellen), verhindert aber auch, dass wir schnell zwischen diesen Verhaltensweisen „umschalten“.
Aus diesem Grund ist es ziemlich schwierig, seine Codierungsgewohnheiten von Projekt zu Projekt zu ändern, und es ist unzuverlässig zu hoffen, dass die Codierungsstile von jedem Teammitglied die ganze Zeit befolgt werden.
Prettier löst dieses Problem, indem es die Formatierung des Codes automatisiert.
Legen wir ein neues Verzeichnis an und initialisieren NPM in diesem Verzeichnis. Öffnen Sie das Terminal, wechseln Sie in den Projektordner und führen Sie den Befehl npm init -y aus. Dadurch wird die folgende project.json–Datei für uns erstellt:
Jetzt können wir Prettier zu unserem Projekt hinzufügen. Verwenden Sie diesen Befehl, um es in unserem Projekt zu installieren:
npm install --save-dev prettierLassen Sie uns nun ein wenig Unordnung machen, damit das Prettier seine Arbeit tun kann. Erstellen Sie eine neue .js-Datei und geben Sie einen Code ein, der keinerlei Formatierungskonsistenz aufweist. Etwas wie dies:
Dieser Code weist mehrere Formatierungsprobleme auf: Zum einen sind die Strings mit beiden Arten von Anführungszeichen geschrieben – einfach und doppelt; der Funktionsblock ist mit 4 Leerzeichen eingerückt, während der if-Anweisungsblock 2 Leerzeichen für dieselbe Aufgabe verwendet; einige Zeilen sind zu lang usw.
Lassen Sie uns Prettier an die Arbeit gehen. Erstellen Sie ein neues Skript namens format, das Prettier für uns ausführt. Unsere package.json sollte wie folgt aussehen:
{
"name": "modern-js",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"format": "prettier --write"
},
"keywords": [],
"license": "ISC",
"devDependencies": {
"prettier": "^1.19.1"
}
}Mit den in package.json beschriebenen Skripten können wir komplexe Befehle aus dem Verzeichnis node_modules/.bin auf eine Art Shortcut ausführen. Werfen wir einen Blick in diesen Ordner:
Um den gleichen Befehl mit einem NPM-Skript auszuführen, können wir diesen Befehl einfach von unserem Projektstammverzeichnis aus ausführen (demselben Verzeichnis, in dem sich package.json befindet):
npm run format src/index.jsDer letzte Teil der beiden Befehle – src/index.js – teilt Prettier mit, welche Datei formatiert werden soll. Nach Beendigung des Befehls sieht unsere unordentliche Datei wie folgt aus:
Ich denke, wir können uns darauf einigen, dass dieser Code in der Tat hübscher ist. Vor allem aber ist er leichter zu lesen oder schnell zu überfliegen, um seine Struktur zu verstehen. Der Code ist konsistenter, die Zeileneinrückungen sind gleich, if-else-Blöcke sehen viel besser aus und verkettete Methoden sind in Zeilen unterteilt.
Aber dieser Stil entspricht vielleicht nicht dem, auf den sich Ihr Team geeinigt hat. Zum Beispiel könnte das Team eine Einrückung von 2 Leerzeichen als Standard ansehen oder einfache Anführungszeichen für Strings anstelle von doppelten Anführungszeichen verwenden.
Aus diesem Grund sind die Prettier-Regeln konfigurierbar und Sie können die Standardeinstellungen mit der Datei .prettierrc ändern. Legen wir sie im Stammverzeichnis unseres Projekts an und fügen wir dieses Stück JSON darin ein:
{
"tabWidth": 4,
"semi": true,
"singleQuote": true
}Damit teilen wir Prettier mit, dass wir 4 Leerzeichen für die Einrückung bevorzugen (tabWidth), dass Semikolons obligatorisch sind (semi) und dass wir einfache Anführungszeichen für String-Literale anstelle von doppelten erzwingen wollen (singleQuote).
Nachdem wir das Formatierungsskript erneut ausgeführt haben, wird die Datei src/index.js mit den von uns konfigurierten Regeln formatiert:
Die Konfigurationsoptionen, die wir verwendet haben, sind nur ein kleiner Teil der zahlreichen schöneren Konfigurationsoptionen, die Sie verwenden können, um das Verhalten des Befehls an Ihre Projektstilrichtlinien anzupassen.
Bevor wir zum Schluss kommen, wollen wir unseren Formatierungsbefehl noch ein wenig erweitern und flexibler gestalten.
Höchstwahrscheinlich werden wir die Formatierungsrichtlinien für alle Dateien in unserem Projekt benötigen, nicht nur für eine einzige.
Anstatt das Skript für alle Dateien einzeln auszuführen, können wir ein Dateinamensmuster für Prettier angeben, das alle .js-Dateien in unserem src/-Verzeichnis und dessen Unterverzeichnissen erfasst.
Öffnen Sie die Datei package.json und fügen Sie das folgende Skript in das Objekt scripts ein:
"format:all": "prettier --write \"src/**/*.js\""Um das neue Skript in Aktion zu sehen, erstellen Sie einige weitere .js-Dateien im src/-Verzeichnis; oder erstellen Sie einige Verzeichnisse in src/ und legen Sie die .js-Dateien in diese.
Wenn Sie nun npm run format:all ausführen, werden alle Ihre .js-Dateien im Verzeichnis src/ (rekursiv) von Prettier abgeholt und nach den in der Konfigurationsdatei .prettierrc festgelegten Regeln neu formatiert.
In dieser kleinen Einführung in Prettier haben Sie gelernt, wie Sie Prettier im Terminal und mit NPM-Skripten verwenden können. Es ist sehr einfach, dieses Tool in Ihren Projekt-Workflow zu integrieren, es zu konfigurieren und die Formatierung des Codes ganz zu vergessen.
Sie müssen sich keine Gedanken mehr über die Formatierungsrichtlinien eines bestimmten Projekts machen, sondern können sich ganz auf Ihren Code konzentrieren und Prettier erledigt den Rest.
Prettier kann auch in Ihren bevorzugten Code-Editor integriert werden (siehe z. B. Erweiterungen für VS Code, Atom oder Sublime-Editoren).
Mit einer solchen Integration wird die Code-Formatierung jedes Mal durchgeführt, wenn Sie die Datei speichern, was die Verwendung dieses Tools noch komfortabler und nahtloser macht.