|

Make it 🎀Prettier - Teil 1: Was ist Prettier? Und warum sollte ich es verwenden?

🗂 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 ersten Teil dieser dreiteiligen Serie "Make it 🎀Prettier" klären wir die Frage, was Prettier ist und was für den Einsatz des Tools spricht. Los gehts.

Was ist Prettier? 🤔

Einfach gesagt: Grundlegend handelt es sich um einen Code-Formatter für diverse Dateitypen, ähnlich wie stylelint.
Allerdings mit zwei entscheidenden Unterschieden:

  1. Anstatt dass Codefehler hervorgehoben also unterstrichen werden, formatiert Prettier diese bei jedem Speichervorgang automatisch. Dies bringt uns direkt zu
  2. Prettier ist opinionated d.h. Prettier gibt das Format vor und es gibt kaum Optionen die Formatierung zu beeinflussen. Sämtliche Optionen werden in Teil 3 der Reihe besprochen

Zwei Fronten

Nun hat sich meiner (subjektiven) Erfahrung nach gezeigt, dass es in dem Zusammenhang zwei Gruppen von Menschen gibt:

  1. Die, die Prettier nicht nutzen, da sie es ablehnen
    und
  2. die, die Prettier nutzen und wirklich lieben.
    (und eigentlich noch 3. die, die es gerne nutzen würden aber aufgrund von xyz nicht können/dürfen)

😱Plot Twist: Jeder von Gruppe 2 war einmal in Gruppe 1.

Ich übrigens auch.😅

Der Grund für die initiale Ablehnung erscheint erstmal relativ plausibel:
Die meisten Entwickler die bereits Linter in ihren Projekten verwenden, haben meist komplexe und umfangreiche Konfigurations-Dateien, in denen alle Formatierungsvorgaben genaustens definiert wurden.
Von der Dopplung der Anführungszeichen, über Einrückungsgrößen und Zeilenumbrüche bis hin zur Semikolon vs. kein Semikolon Steitfrage.

Wird nun eine nicht vorgesehene Formatierung gefunden, so wird diese in der IDE hervorgehoben und... das wars.🙈

Oder anders gesagt:
Der Nutzer hat die Wahl, wann und ob er diese "Unschönheit" beseitigt.

Dies mag auch funktionieren, solange man sich im selben Projekt, oder vielleicht innerhalb der selben Projektstruktur bewegt.

Aber sobald man ein fremdes Projekt bearbeitet oder betrachtet, ist alles wieder anders.

Wäre es da nicht fantastisch, wenn alle Projekte eine einheitliche oder zumindest stark ähnliche Formatierung hätten?

Wir reden hier schließlich nur über Formatierung. Nicht über Vorgaben für Lösungswege, Projektarchitektur oder Coding Styles wie beispielsweise ESLint das macht.

Es gibt zahlreiche Gründe, warum Standardisierungen wichtig sind. Allem voran eine angestrebte Eindeutigkeit, Klarheit und diverse Arbeitsablauf-Verbesserungen.

"Aber ich bin will hier lieber einen Umbruch haben" 🧐

Schön 😊.
Aber Karl vielleicht nicht.
Und Monika will es wieder anders haben. Und wenn einer der beiden den Code sieht, kann es sein, dass er diesen erstmal umformatieren, oder sich zumindest darüber aufregen will.

Und wenn dies der Fall ist, kann es gut sein, dass folgendes Problem existiert:

Ihr macht euch zu viele Gedanken um Formatierungen. Viel zu viele.
Dabei wäre es so einfach: "Ctrl + s" und Prettiers ✨magic✨ erledigt den Rest.

Fluch und Segen: Opinionated Linting ☝

Klar, kommt es vor, dass immer mal wieder der Code nicht so formatiert wird, wie man es gerne hätte.

Allerdings folgt Prettier bewusst einem einfachen Regelset um die bestmögliche Leseerfahrung zu ermöglichen. Für alle.
Dies ist der entscheidende Punkt: Der Code ist für ALLE gut lesbar. Und es gibt keinen Grund mehr für nicht-zielführende Diskussionen.

Oder, um es mit den Worten der Prettier Dokumentation zu sagen:

“It reminds me of how Steve Jobs used to wear the same clothes every day because he has a million decisions to make and he didn't want to be bothered to make trivial ones like picking out clothes. I think Prettier is like that.”

Und niemand kann mir sagen, dass dies jemals eine schlechte Sache sein kann.

Außerdem gibt es immer noch einen kleinen Spielraum für individuelle Formatierung. Mehr dazu in Teil 3.

Also, probiert es doch einfach mal aus.
Im zweiten Teil erkläre ich euch auch Schritt für Schritt, wie das geht und wie ihr möglichst schnell und effizient Prettier in eure Projekte einbauen könnt.

Viel Erfolg! ✊✊✊
Weiter geht's mit Teil 2