born83.com frontend development

Sauberer JavaScript Code, dank Prettier

Es ist Donnerstag Nachmittag, kurz vor dem Feierabend: hektisch werden die letzten Zeilen Code für eine wichtige Änderung geschrieben. Immerhin ist für heute Nacht das Deployment geplant und dazu muss die Änderung fertiggestellt sein.

Hier ist eine Bedingung noch falsch… schnell korrigiert - fertig. Ach und beim Aufruf der neuen Funktion fehlt ja noch ein Parameter… hinzufügen - das war es jetzt aber wirklich.

Alle Tests sind erfolgreich - das sieht sehr gut aus! Jetzt aber schnell nach Hause in den Feierabend, das Grillen geht ja gleich schon los…

Zwei Wochen später: Wie sieht denn bitte der Quellcode aus? Keine ordentlichen Einrückungen oder Leerzeichen - und Hochkommata oder Anführungszeichen wurden anscheinend eingesetzt wie sie gerade weg mussten.

Das muss ich beim nächsten mal aber besser machen!

Wenn Du Dich in dieser Anekdote überhaupt nicht wieder findest, dann kannst Du Dir jetzt 5 Minuten auf die Schulter klopfen, den Browser zu machen und einen Kaffee trinken gehen - Chapeau, Du programmierst von Natur aus sauberen Code!

Für alle anderen da draußen: mit Prettier kommt endlich die Lösung für diese Probleme!

Was ist Prettier?

Prettier nimmt euren Quellcode und gestaltet ihn so um, dass er konsistent und gut lesbar formatiert ist. Die Regeln, nach denen Prettier den Code formatiert, lassen sich dabei individuell vorgeben. So ist sicher gestellt, dass euer Code immer gleich formatiert ist. Abgesehen von Situationen wie am Anfang des Artikels - in denen die Formatierung also unter Zeitdruck leidet - ist dies besonders interessant für größere Teams. Jeder Programmierer hat seine Eigenarten und Präferenzen Code zu formatieren. Dadurch kann bei der Zusammenarbeit an größeren Projekten mit verschiedenen Programmierern sehr unterschiedliche Syntax entstehen. Hier sorgt der Einsatz von Prettier dafür, dass für die gesamte Code Basis eine einheitliche Formatierung angewandt wird, auf die man sich vorher als Team verständigt hat.

Neue Kollegen, die das Team verstärken, müssen nur die entsprechende Konfiguration hinterlegen und schon sorgt Prettier dafür, dass auch ihre Code Änderungen in der entsprechenden Formatierung in die Code Basis einfließen.

Welche Syntax unterstützt Prettier?

Stand heute (Februar 2019) unterstützt Prettier die Formatierung folgender Code Syntax:

  • JavaScript
  • TypeScript
  • Flow
  • JSX
  • JSON
  • CSS
  • SCSS
  • Less
  • HTML
  • Vue
  • Angular
  • GraphQL
  • Markdown
  • YAML

Prettier installieren

Die Installation mit Prettier erfolgt via yarn oder npm, je nachdem welchen Paket-Manager ihr in eurem Projekt verwendet. Außerdem kann die Installation global oder für ein Projekt erfolgen:

Prettier mit yarn installieren

Prettier global Installation:

yarn global add prettier

Prettier für das aktuelle Projekt installieren:

yarn add prettier --dev --exact

Prettier mit npm installieren

Prettier global Installation:

npm install --global prettier

Prettier für das aktuelle Projekt installieren:

npm install --save-dev --save-exact prettier

Prettier konfigurieren

Prettier verwendet nach der Installation eine Standard-Konfiguration, dessen Optionen sich in der Prettier Dokumentation einsehen lassen.

Möchte man eine eigene Konfiguration verwenden, ist das ganz einfach möglich, denn Prettier verwendet zur Konfiguration cosmiconfig und ist daher sehr variabel, was die Erstellung einer eigenen Konfigurationsdatei angeht.

Prettier unterstützt eine Konfiguration als:

  • .prettierrc-Datei mit YAML, TOML oder JSON
  • .prettierrc.js-Datei oder prettier.config.js-Datei mit einem JavaScript-Objekt
  • Eine Konfiguration mit einem Eintag “prettier” in der package.json-Datei

Wie die Konfigurationsdatei dann im einzelnen aufgebaut werden muss, ist in der Prettier Dokumentation ebenfalls sehr gut erklärt.

Prettier nutzen

Prettier lässt sich auf verschiedene Arten einsetzen:

  1. Manuelle Anwendung durch Befehle im Terminal via Prettier Command Line Interface (CLI)
  2. Als Plugin im Editor (z.B. Visual Studio Code) mit manueller oder automatischer Anwendung

Prettier CLI

Möchte man initial eine ganze Code-Basis mit Prettier formatieren, eignet sich die Nutzung des Command Line Interface (CLI) über das Terminal am Besten.

Prettier wird wie folgt aufgerufen:

prettier [opts] [filename ...]

Die wichtigsten Optionen dabei sind:

--write

Alle Dateien, die nicht der vorgegebenen Formatierung entsprechen werden mit Hilfe der Option passend formatiert und gespeichert.

--check

Prüft, ob die angegebene(n) Datei(en) den Vorgaben der Konfiguration entsprechen. Hier kann ein einzelner Dateiname test.html, aber auch ein Verzeichnispfad "src/*.js" als zweiter Parameter übergeben werden.

--ignore-path

Sollen bestimmte Verzeichnisse von der Überprüfung und Formatierung ausgeschlossen werden, können diese mit der Option --ignore-path angegeben werden.

Standardmäßig ist beispielsweise das Verzeichnis node_modules von der Überprüfung ausgeschlossen.

Alternativ können die Verzeichnisse auch in einer Datei .prettierignore abgelegt werden. Dies empfiehlt sich gerade für eine langfristige Nutzung von Prettier im Terminal.

--config

Hat man eine eigene Konfigurationsdatei erstellt, empfiehlt es sich aus Performance-Gründen Prettier den Pfad zur Konfigurationsdatei mitzuteilen.

Da Prettier nicht im gesamten Verzeichnisbaum nach einer Konfiguration sucht, muss dieser Befehl auch genutzt werden, wenn die Konfigurationsdatei in einem Unterverzeichnis liegt, z. B.:

prettier --config ./my/.prettierrc

--no-config

Falls keine eigene Konfiguration vorliegt, empfiehlt es sich den Parameter anzuhängen, um die Performance von Prettier zu verbessern.

Prettier als Editor Plugin

Nutzt man Prettier dauerhaft in einem Projekt, empfiehlt sich die Integration in den Code-Editor via Plugin.

Es existiert ein Prettier Plugin für die meisten gängigen Editoren. Hier erkläre ich das Setup anhand des Editors Visual Studio Code.

Am einfachsten ist die Installation über das Terminal:

code --install-extension esbenp.prettier-vscode

Der Befehl spart die lästige Suche im Plugin-Bereich. Nach der Installation ist noch ein Neustart des Editors erforderlich, danach ist Prettier in VSCode integriert.

Zur Anwendung gibt es zwei Möglichkeiten:

Automatische Formatierung beim Speichern der Datei

Soll der Code automatisch beim Speichern der Datei formatiert werden, lässt sich das in den VSCode-Einstellungen anpassen. Die Einstellungen öffnen mit dem Shortcut STRG + ,.

Nun über die linke Navigation unter Text-Editor > Formatierung oder über die Suche nach formatOnSave die Option Format on Save suchen und aktivieren.

Ab sofort überprüft Prettier bei jedem Speichern die Formatierung des Codes und passt ihn bei Abweichungen automatisch an.

Manuelle Code-Formatierung via Shortcut

Falls eine automatische Formatierung beim Speichern der Datei unerwünscht ist, lässt sich die Datei auch manuelle formatieren. Dazu dient der Shortcut STRG + SHIFT + I.

Weitere Informationen zum Thema Prettier:

https://prettier.io/

https://github.com/prettier/prettier

https://prettier.io/docs/en/install.html

https://prettier.io/docs/en/options.html

https://prettier.io/docs/en/editors.html