Halten Sie Ihren Code mit Prettier sauber

Eskere Guru

Die Formatierung von Code scheint ein triviales Thema zu sein, kann jedoch die Qualität und Korrektheit Ihres Codes, die Versionskontrolle und die Zusammenarbeit mit anderen beeinflussen. Wenn Sie sich jedoch nicht in Details darüber festsetzen möchten, wohin die letzte Klammer führt, versuchen Sie, das Problem an das Open-Source-Tool Prettier auszulagern.

Formatierungsangelegenheiten

Softwareentwicklungsteams haben im Laufe der Geschichte unzählige Stunden damit verschwendet, über die maximale Leitungslänge oder die Leitung einer Klammer zu streiten. Unabhängig von den persönlichen Vorlieben sind sich die meisten Menschen in mindestens einem Punkt einig: Die Code-Formatierung sollte projektübergreifend konsistent sein.

Prettier ist ein Werkzeug, um dies zu erreichen. Geben Sie ihm einen Code und er gibt denselben Code zurück, der auf konsistente Weise formatiert ist. Prettier verfügt über eine Texteditor-Integration, ein Befehlszeilentool und eine Online-Demo.

Die richtige Sprache sprechen

Zunächst möchten Sie wissen, ob Prettier mit der Sprache oder den Sprachen kompatibel ist, mit denen Sie normalerweise arbeiten. Prettier konzentriert sich derzeit auf eine Reihe von Kernsprachen, die hauptsächlich der Front-End-Webentwicklung gewidmet sind, darunter:

  • JavaScript
  • HTML
  • CSS
  • Sass
  • Abschlag
  • YAML

Es gibt auch eine offene Unterstützung für zusätzliche Sprachen über Plugins.

Probieren Sie es auf dem Online-Spielplatz schöner aus

Bevor Sie versuchen, Prettier zu installieren, sollten Sie sich den Spielplatz ansehen . Über eine Weboberfläche können Sie Beispielcode einfügen und beobachten, wie Prettier ihn transformiert. Dies ist eine großartige Möglichkeit, um einen Eindruck davon zu bekommen, was das Tool tatsächlich tut. Es kann jedoch auch als primäre Methode für die Verwendung von Prettier dienen, wenn Ihre Anforderungen etwas geringer sind.

Standardmäßig sollte der Spielplatz wie zwei grundlegende Texteditorfelder aussehen, eines links für Ihre Eingabe und eines rechts für die Ausgabe von Prettier. Sie werden zunächst einen Beispielcode sehen, aber Sie können all dies einfach entfernen und in Ihren eigenen einfügen.

Versuchen Sie beispielsweise, das folgende JavaScript einzugeben:

 (function ()
 {
 window.alert('ok')
 }())

Schöner sollte es machen in:

 (function () {
 window.alert("ok");
 })();

Beachten Sie, dass Prettier standardmäßig folgende Änderungen vornimmt:

  • Konvertieren von Zeichenfolgen in einfache Anführungszeichen in Zeichenfolgen in doppelten Anführungszeichen
  • Semikolons hinzufügen
  • Einrückungen in zwei Leerzeichen konvertieren

Unten links befindet sich eine Schaltfläche, mit der Sie Optionen anzeigen können. Versuchen Sie im vorherigen Beispiel, die Tabulatorbreite anzupassen, das Flag –single-quote unter Common oder das Flag –no-semi unter JavaScript umzuschalten.

Optionen konfigurieren

Hübscher wird selbst als „eigensinnig“ beschrieben, eine bewusste Designentscheidung, bei der die Kontrolle der Besonderheiten für Einfachheit und Konsistenz geopfert wird. Es ist so konzipiert, dass Sie es einrichten und dann vergessen können, anstatt sich mit den letzten Formatierungsdetails Ihres Codes zu beschäftigen. (Für eine Alternative mit viel feinerer Kontrolle über jedes letzte Formatierungsdetail versuchen Sie eslint .)

Die Autoren erkennen jedoch auch an, dass einige Entscheidungen funktionale Auswirkungen haben, die über das Aussehen des Codes hinausgehen. Einige Optionen – auch einige für ältere Zwecke – bleiben erhalten, sodass Sie zumindest verstehen sollten, was sie tun, selbst wenn Sie Prettier im Standardzustand verwenden.

Die beste Möglichkeit, hübschere Optionen zu verwalten, besteht darin, sie in einer Konfigurationsdatei zu speichern. Es gibt viele Möglichkeiten, dies zu organisieren. Erstellen Sie jedoch zunächst eine Datei mit dem Namen .prettierrc.json in Ihrem lokalen Projektverzeichnis. Es kann jede der unterstützten Optionen in einem Standard-JSON-Objekt enthalten, z

 {
 "tabWidth": 8
 }

Dieselbe Konfigurationsdatei wird von Prettier gelesen, unabhängig davon, ob Sie sie über die Befehlszeile oder einen unterstützten Texteditor ausführen.

Grundinstallation und das Kommandozeilen-Tool

Mit Garn oder npm sollte die Installation unkompliziert sein. Für Garn:

 $ yarn global add prettier

Und für npm:

 $ npm install --global prettier

Sobald Sie Prettier global installiert haben, sollten Sie Folgendes eingeben können:

 $ prettier

Standardmäßig wird ein Hilfetext angezeigt, der bestätigt, dass das Tool installiert ist und ordnungsgemäß funktioniert.

Bereinigen einer Datei

Verwenden Sie zum Neuformatieren einer Datei einen Befehl ähnlich dem folgenden:

 $ prettier --write filename.js

Dadurch wird die Originaldatei überschrieben, was häufig der bequemste Ansatz ist. Alternativ möchten Sie vielleicht nur, dass hübscher auf jede Datei in einem Projekt reagiert:

 $ prettier --write .

Prettier wird für alle Dateien im aktuellen Verzeichnis ausgeführt und formatiert alle erkannten Dateien.

Sie können das Ergebnis auch in der Standardausgabe drucken, anstatt die Originaldatei zu ändern. Auf diese Weise können Sie die Ausgabe in einer anderen Datei speichern oder an eine andere Stelle umleiten:

 $ prettier test.js > test2.js

Überprüfen einer Datei

Verwenden Sie das Flag –check mit einem oder mehreren Dateinamen, damit Prettier über die Sauberkeit Ihres Codes berichtet, ohne tatsächlich Änderungen vorzunehmen.

 $ prettier --check .

Sie erhalten eine Ausgabezeile für jede Datei, die nicht dem erwarteten Format entspricht, entsprechend der Konfiguration von Prettier:

 Checking formatting...
 [warn] .prettierrc
 [warn] .prettierrc.json
 [warn] Code style issues found in the above file(s). Forgot to run Prettier?

Befehlszeilenoptionen

Die Standardoptionen von Prettier sind bei Bedarf als Befehlszeilenoptionen verfügbar. Hier ist ein Beispiel dafür, wie sich das Flag –single-quote auf die Ausgabe auswirkt:

 $ prettier tmp.js
 function example() {
 console.log("hello, world");
 }
 $ prettier --single-quote tmp.js
 function example() {
 console.log('hello, world');
 }

Hilfe bekommen

Das Befehlszeilentool bietet über das Flag –help informative Hilfe zu allen Optionen:

 $ prettier --help trailing-comma
 --trailing-comma <es5|none|all>
 Print trailing commas wherever possible when multi-line.
 Valid options:
 es5 Trailing commas where valid in ES5 (objects, arrays, etc.)
 none No trailing commas.
 all Trailing commas wherever possible (including function arguments).
 Default: es5

Verwenden eines Texteditors

Sobald Sie Prettier installiert haben, können Sie es in verschiedenen Szenarien verwenden, je nachdem, welches Toolset Sie bereits verwenden. Möglicherweise verwenden Sie einen Texteditor. Prettier hat Bindungen für die meisten der beliebtesten. So können Sie drei davon einrichten:

Erhabener Text

JsPrettier ist ein Sublime Text-Plugin, das Prettier im Editor verfügbar macht. Obwohl es verschiedene Möglichkeiten gibt, JsPrettier zu installieren, empfehlen wir die Verwendung der Paketsteuerungsmethode. Sie müssen Prettier bereits installiert haben, dann die Befehlspalette von Sublime Text öffnen und "Paketsteuerung: Paket installieren" auswählen:

Halten Sie Ihren Code mit Prettier sauber - prettier install subl 1

Suchen Sie dann nach "jsprettier" und klicken Sie, um es zu installieren:

Halten Sie Ihren Code mit Prettier sauber - prettier install subl 2

Sobald JsPrettier installiert ist, können Sie mit der rechten Maustaste auf eine geöffnete Datei klicken, um sie zu formatieren. Sie können den Wert von auto_format_on_save auch in den Einstellungen von JsPrettier auf true setzen. Dies führt dazu, dass JsPrettier alle kompatiblen Dateien automatisch bereinigt, wenn Sie sie in Sublime Text speichern.

Atom

Die Installation für Atom ist Sublime Text sehr ähnlich: Verwenden Sie einfach den integrierten Paketmanager des Editors, um prettier-atom zu installieren:

Halten Sie Ihren Code mit Prettier sauber - prettier install atom

Nach der Installation ist die Verwendung bekannt: Mit einer Verknüpfung oder einem Menüelement können Sie eine Datei bei Bedarf formatieren. Mit einer Atom-Einstellung können Sie Prettier automatisch ausführen, wenn eine Datei gespeichert wird.

Vim

Vim ist ein sehr leistungsfähiger, befehlszeilenbasierter Editor, der nicht für Anfänger geeignet ist. Es ist angemessen kompliziert, Prettier für die Arbeit mit vim zu gewinnen, aber es sind nur ein paar Schritte:

 mkdir -p ~/.vim/pack/plugins/start
 git clone https://github.com/prettier/vim-prettier 
 ~/.vim/pack/plugins/start/vim-prettier

Git ist wahrscheinlich der einfachste Weg, um die erforderlichen Dateien herunterzuladen, aber jedes Mittel, um vim-prettier in dieses Startverzeichnis zu bringen, sollte den Job erledigen.

Nach der Installation wird Prettier automatisch ausgeführt, wenn eine Datei in vi gespeichert wird. Es kann auch jederzeit manuell über den Befehl Prettier ausgeführt werden:

Halten Sie Ihren Code mit Prettier sauber - vim prettier before 2 2

Was zu einer bereinigten Datei führen sollte:

Halten Sie Ihren Code mit Prettier sauber - vim prettier after 2

Integrieren Sie Prettier in Ihr Projekt

Die Verwendung eines Code-Formatierers wie Prettier kann dazu beitragen, eine Codebasis zu erhalten, die leichter zu lesen ist. Es kann auch hilfreich sein, Debatten darüber zu umgehen, welcher bestimmte Stil beim Codieren verwendet werden soll – lagern Sie diese Entscheidungen einfach an Prettier aus!

Schließlich kann ein Git-Hook eingerichtet werden, um sicherzustellen, dass Code immer bereinigt wird, wenn er in das Repository Ihres Projekts übernommen wird. Einzelne Entwickler können ihren Code frei formatieren, wie sie möchten, aber die zentrale Kopie ist immer sauber und konsistent.