|

Make it ­čÄÇPrettier - Teil 2: Vom Installationsprozess bis zum Produktiveinsatz.

­čŚé 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