Halten Sie Ihren Code mit Prettier sauber

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, sich ü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 einer Sache einig: Die Code-Formatierung sollte projektübergreifend konsistent sein.

Hübscher 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 es sich ansehen Der Spielplatz. Ü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, aber es kann 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 sehen zunächst einen Beispielcode, können diesen jedoch einfach entfernen und in Ihren eigenen Code einfügen.

Versuchen Sie beispielsweise, das folgende JavaScript einzugeben:

(Funktion ()
{
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 Registerkartenbreite anzupassen, indem Sie die Option umschalten --Einzitat Flagge unter Verbreitetoder umschalten --no-semi Flagge unter JavaScript.

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. (Versuchen Sie es mit einer Alternative mit viel feinerer Kontrolle über jedes letzte Formatierungsdetail Eslint.)

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

Die beste Art zu verwalten Schönere Optionen ist es, 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.

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

$ Garn global hinzufügen schöner

Und für npm:

$ npm install - global schöner

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

$ hübscher

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:

$ hübscher - schreiben.

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 die Option, damit Prettier über die Sauberkeit Ihres Codes berichtet, ohne tatsächlich Änderungen vorzunehmen --prüfen Flag mit entweder einem oder mehreren Dateinamen:

$ hübscher --check.

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

Formatierung überprüfen ...
[warn] .prettierrc
[warn] .prettierrc.json
[warn] Probleme mit dem Codestil, die in den obigen Dateien gefunden wurden. Vergessen, hübscher zu laufen?

Befehlszeilenoptionen

Die Standardoptionen von Prettier sind bei Bedarf als Befehlszeilenoptionen verfügbar. Hier ist ein Beispiel dafür, wie die --Einzitat Flag wirkt sich auf die Ausgabe aus:

$ prettier tmp.js
Funktionsbeispiel () {
console.log ("Hallo Welt");
}
$ prettier --single-quote tmp.js
Funktionsbeispiel () {
console.log ('Hallo, Welt');
}

Hilfe bekommen

Das Befehlszeilentool bietet informative Hilfe zu jeder Option über das --Hilfe Flagge:

$ prettier --help Nachkomma
--trailing-comma 
Drucken Sie nach Möglichkeit nachfolgende Kommas, wenn dies mehrzeilig ist.
Gültige Optionen:
es5 Nachgestellte Kommas, sofern in ES5 gültig (Objekte, Arrays usw.)
keine Keine nachgestellten Kommas.
alle nachgestellten Kommas, wo immer möglich (einschließlich Funktionsargumente).
Standard: 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. Hübscher 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:

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

Sobald JsPrettier installiert ist, können Sie mit der rechten Maustaste auf eine geöffnete Datei klicken, um sie zu formatieren. Sie können auch den Wert von einstellen auto_format_on_save zu wahr in den Einstellungen von JsPrettier, was dazu führt, 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 zur Installation einfach den integrierten Paketmanager des Editors hübscheres 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-Klon https://github.com/prettier/vim-prettier \
~ / .vim / pack / plugins / start / vim-hübscher

Git ist wahrscheinlich der einfachste Weg, um die notwendigen Dateien herunterzuladen, aber Alle Möglichkeiten, um vim-prettier in dieses Startverzeichnis zu bringen sollte den Job machen.

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

Was zu einer bereinigten Datei führen sollte:

Integrieren Sie Prettier in Ihr Projekt

Die Verwendung eines Code-Formatierers wie Prettier kann dazu beitragen, eine Codebasis zu erhalten, die einfacher 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.

Nano vs. Vim: Die besten Terminal-Texteditoren im Vergleich

Suchen Sie einen Terminal-Texteditor für Linux? Die Hauptwahl ist zwischen Vim und Nano! Hier ist, wie sie vergleichen.

Über den Autor