Mach deinen Code prettier

Als Programmier:in entwickelt man mit der Zeit eine eigene Code-"Handschrift". Benutzt du für Strings einfache Anführungszeichen (') oder doppelte (")? Benutzt du Semikolons? Benutzt du für Einrückungen Tabstopps oder Leerzeichen und wie viele?

Innerhalb eines Projekts ist es auf jeden Fall angenehm, überall die gleiche Formatierung zu haben. Das sorgt für eine bessere Übersicht und befriedigt nebenbei den inneren Monk.
Arbeitet man mit mehreren Personen an einem Projekt, kannst du entweder regelmäßig von Hand den Code der anderen formatieren oder du lässt es machen, automatisch!

Installiere Prettier

Das geht mit dem Tool Prettier! Du legst zuvor in einer Config-Datei (.prettierrc.json) die Regeln fest (Semikolons ja/nein, maximale Zeilenlänge etc.) und führst dann Prettier aus. In einer separaten Datei (.prettierignore) kannst du noch definieren, welche Ordner und Dateien dabei unangetastet bleiben sollen.

Folge einfach dem offiziellen Guide, um Prettier bei dir einzurichten: Install · Prettier

Prettier bei jedem Git Commit ausführen

Du kannst Prettier jedes Mal manuell ausführen oder dafür eine Extension in deinem Code-Editor installieren. Ich finde es allerdings angenehmer, dass Prettier automatisch vor jedem Git Commit ausgeführt wird. So wird sichergestellt, dass kein unschöner Code nach GitHub gelangt (oder wo auch immer du Git hostest). Auch funktioniert das ganze dann unabhängig davon, welchen Code-Editor du oder Team-Kolleg:innen verwenden.

Ich bin einfach den Abschnitt "Git hooks" gefolgt: Install · Prettier

Das Tool "Husky" sorgt also dafür, dass Prettier vor jedem Git Commit-Befehl ausgeführt wird und der Code formatiert wird.

Meine bevorzugten Einstellungen

Meine .prettierrc.json-Datei sieht so aus:

{
    "tabWidth": 4,
    "useTabs": false,
    "semi": false,
    "singleQuote": false,
    "trailingComma": "none",
    "bracketSpacing": true,
    "bracketSameLine": false,
    "fluid": false
}

• Zur Einrückung werden 4 Leerzeichen verwendet.
• Ich nutze keine Semikolons (bei JavaScript und TypeScript).
• Ich nutze doppelte Anführungszeichen bei Strings (").
• Keine Kommata, wo es nicht notwendig ist (z.B. in TypeScript Interfaces).
• Leerzeichen um geschweifte Klammern ({ foo: bar }).
• Für bracketSameLine siehe: https://prettier.io/docs/en/options.html#bracket-line

Was du in .prettierignore reinschreibst, ist stark von deinem jeweiligem Projekt abhängig. Grundsätzlich sollte da alles rein, was kompiliert wird (vielleicht build-Ordner).