|

🗂 Kapitel-Übersicht

Teil 1: Was ist Prettier? Und warum sollte ich es verwenden?

➡️ Teil 2: Vom Installationsprozess bis zum Produktiveinsatz.

Teil 3: Optionen und Individualisierungsmöglichkeiten

Im zweiten Teil dieser dreiteiligen Serie "Make it 🎀Prettier" geht es um die Verwendung von Prettier - von Installation bis Produktiveinsatz. Nach diesem Teil /solltest/ du in der Lage sein, Prettier in all deinen Projekten zu verwenden.

ℹ️Disclaimer: Die Installation wird im folgenden via yarn durchgeführt, man kann aber auch npm verwenden.

Existierende Projekte per CLI updaten

Natürlich ist es verhältnismäßig einfach, Prettier bei einem völlig neuen Projekt einzusetzen, aber für die meisten Entwickler dürfte es relevant sein, Prettier einem bereits vorhandenen Projekt hinzuzufügen.
Die Prettier CLI (Command Line Interface) löst dieses Problem.

Dazu öffnen wir unsere Kommandozeile und installieren Prettier global:

$ yarn global add prettier

Dann navigieren wir zu dem Root-Verzeichnis des Projekts, das formatiert werden soll. Im Beispiel hat dies ein src-Verzeichnis. Dort führen wir dann

$ prettier --write "**/*"

aus, wobei "**/*" unsere Zieldateien nach der glob syntax definiert. In diesem Fall wären dies alle unterstüzten Dateien in allen Verzeichnissen. Alternativ könnte man durch "**/*.{js,json,css,html,scss,md}" spezifische Dateiformate und Unterordner bei der Suche selektieren und formatieren lassen.

Der Befehl sucht dann im aktuellen Verzeichnis nach einer Prettier-Konfiguration, zum Beispiel eine .prettierrc Datei.
Sämtliche Optionen für die .prettierrc findet man in Teil 3 des Blogbeitrags.

Sofern keine Konfiguration vorhanden ist, sollte das Flag --no-config aus Performance-Gründen mitgegeben werden.

Die Option --write sagt der Prettier CLI übrigens, dass sie die gefunden Dateien formatieren soll.

Nach Fehlern suchen

Im Anschluss können wir

$ prettier --check "**/*"

nutzen, um zu sehen, ob Dateien evtl. nicht angepasst wurden oder wo Probleme existieren.

Mit dem Befehl

$ prettier --debug-check "**/*"

scannt man die angepassten Dateien nach möglichen Code-Fehlern die durch die Formatierung entstanden sein könnten. Sollte etwas gefunden werden, sollten diese Dateien manuell mit dem vorherigen Stand der Dateien verglichen werden.

Wer diese Formatierungsänderungen nun committen will, muss allerdings in den sauren Apfel🍏 beißen: Dieser große Commit macht zum Teil die Git-History zunichte, da nach dem initialen Einsatz dieser Commit als letzte Änderung genannt wird.
Denkbar wäre, die Formatierung nur bei bestimmten Dateitypen anzuwenden, aber ich persönlich sehe dies nicht als den richtigen Weg an.
Grundsätzlich gilt: Überprüft initial alle Anpassungen bevor ihr initial committet!.

💡 Quicktipp (Performance)

Um die Performance zu steigern, kann man auch den config-Pfad als Parameter mit übergeben:

$ prettier --config ./prettierrc

(Für eine ausführliche Übersicht aller CLI-Optionen siehe 🔎 Docs

Pre-commit Hook

Durch einen Pre-commit Hook (mehr über Hooks gibt es hier) können die Dateien vor einem Upload in ein Git-Repository im "staged" Status (letzter Befehl war also git add) formatiert werden.
Dies ist besonders bei PRs/MRs (PullRequests bzw. MergeRequests) hilfreich, da dadurch fremder Code direkt entsprechend formatiert wird.

Prettier schreibt dazu:

“Having a githook set up has reduced the amount of style issues in PRs that result in broken builds due to ESLint rules or things I have to nit-pick or clean up later.”

Klingt gut? Dann lasst es uns einrichten.
Prettier empfiehlt hierfür die Verwendung von 🐶husky.
Wichtig zu beachten ist, dass das nachfolgende Beispiel von keiner vorhandenen ESLint-Konfiguration ausgeht. Für die ESLint-Lösung siehe hier.

Zunächst installieren wir Prettier lokal.
Anschließend benötigen wir noch husky sowie pretty-quick, was die einfache (ohne ESLint) Prettier-Formatierung übernimmt.

$ yarn add prettier --dev --exact
$ yarn add pretty-quick husky --dev

⚠️ Es wird dringend empfohlen, dass die Prettier-Version durch das Flag --exact bei der Installation und in der package.json vollständig angegeben wird. Nur so können ungewollte Formatierungsänderungen durch neue Versionen von Prettier verhindert werden.

Schließlich ergänzen wir unsere package.json wie folgt:

[...]
  "husky": {
    "hooks": {
      "pre-commit": "pretty-quick --staged"
    }
  },
[...]

Fertig.🥳
Für alle möglichen pre-commit Hooks, siehe Prettier Docs.

Integration mit Syntax-Linting für CSS und JavaScript

Wie bereits erwähnt, kümmert sich Prettier "nur" um Formatregeln, die die Formatierung betreffen.
Für Syntax-Linting wird oft Stylelint oder ESList verwendet.
Da beide jedoch mit ihren eigenen Regeln zur Formatierung kommen, sollten wir diese Regeln deaktivieren, wenn wir nicht auf die Linter verzichten wollen.

Glücklicherweise können wir dies ebenfalls ohne viel Aufwand tun.

StyleLint Config anpassen

Zunächst benötigen wir das Modul stylelint-config-prettier

$ yarn add stylelint-config-prettier --dev

Anschließend fügen wir das Modul unserem .stylelintrc extends-array als letztes Element hinzu:

{
  "extends": [
    "stylelint-config-recommended",
 ➡️ "stylelint-config-prettier"
  ]
}

ESLint Config anpassen

Hierfür installieren wir eslint-plugin-prettier sowie eslint-config-prettier

$ yarn add eslint-plugin-prettier eslint-config-prettier --dev

Anschließend fügen wir das Modul unserem .eslintrc.json extends-Array als letztes Element hinzu:

{
  "extends": [
    "eslint:recommended",
 ➡️ "plugin:prettier/recommended"
  ]
}

IDE Extension (für VS Code)

Sofern du bereits VSCode verwendest (was du tun solltest 😉) kannst du dir auch die Prettier-Extension installieren.
Dieses Plugin ermöglicht entweder Formatierung eines markierten Bereichs (Rechtsklick --> Bereich formatieren)
oder (empfohlen) das Formatieren des gesamten Dokuments.

Installation

Öffne VSCode und durchsuche das Erweiterungen-Tab (standardmäßig ganz unten) nach Prettier

Das gesuchte Ergebnis ist: Prettier - Code formatter.
Installiere diese Erweiterung.

Unter der Einstellung editor.formatOnSave kann auch festgelegt werden, dass das aktuelle Dokument bei jedem Speichervorgang automatisch formatiert werden soll. (Einfach in den Einstellungen danach suchen 🔍)

💡 Quicktipp (Toggle Formating)

Da man nicht davon ausgehen kann, dass Prettier in jedem Projekt sofort verwendet wird, empfehlt sich zusätzlich die Erweiterung Formatting Toggle, um die automatische Formatierung durch Prettier bequem an und aus zustellen. (unten rechts steht dann Formating ✔︎ bzw. Formating X)

💡 Quicktipp (Recommended extensions)

Damit Prettier automatisch mit dem Projekt in VSCode assoziiert wird, empfiehlt es sich, es als Workspace recommended Extension zu definieren.

Hierfür legt man auf der Root-Ebene eines Projekts im Ordner .vscode eine Datei namens extensions.json an, die wie folgt aussieht bzw., wenn schon vorhanden, erweitert wird:

{
    "recommendations": [
        "esbenp.prettier-vscode"
    ]
}

Weiter geht's mit Teil 3: Optionen und Individualisierungsmöglichkeiten