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).

In den Artikeln Traffic verringern: JavaScript-Dateien kombinieren und Website-Gestaltung: Beschleunigung durch Kombinieren von CSS-Dateien bin ich bereits darauf eingegangen, dass es Sinn macht, bei Web-Projekten CSS- und JavaScript-Dateien zusammenzufassen, um mehrfaches Abfragen einzelner Dateien zu verhindern.

Verwendet man CSS Pre-Prozessoren wie LESS oder Sass, ist es ziemlich einfach, seine Stylesheets zu kombinieren. Seit einiger Zeit nutze ich für das Kompilieren von LESS-Dateien die Anwendung Koala.

Nur für das Kombinieren von JavaScript-Dateien habe ich bisher noch keine Lösung gefunden. Und deswegen habe ich mir einfach selbst eine gemacht: Miniphpy

Durch das Web-Interface kannst du deine Dateien zu Bündel kombinieren. Um auf Dateien zu verweisen, kannst du entweder einen lokalen Pfad oder eine URI zu einer Datei angeben.

Die Dateien werden dann, abhängig von der Reihenfolge, zusammgefügt und anschließend komprimiert.

Hierbei kannst du wählen, ob die Komprimierung lokal (erfolgt mithilfe von Bibliotheken, die in Miniphpy enthalten sind) oder remote (dabei werden APIs der Komprimierungs-Dienste http://javascript-minifier.com/ und http://cssminifier.com/ verwendet) passieren soll.

Da Miniphpy eine PHP-Anwendung ist, musst du Apache (z.B. durch XAMPP) auf deinem PC am Laufen haben.

Wie ihr vielleicht seht, erscheint der Blog erneut in einem neuen Look. Das ist die verbesserte Version von “Winegum”.
Diesen Theme könnt ihr auch nutzen und ihn auch selbst anpassen.

Den Download-Link findet ihr auf http://lgkonline.com/winegum/.

Über das Dashboard von WordPress könnt ihr Winegum weiter anpassen. So könnt ihr z.B. das Header-Hintergrundbild, ein eigenes Logo setzen und noch einiges mehr.
Auch könnt ihr entscheiden, ob ihr eine Sidebar wollt und wenn, wo sie überall angezeigt werden soll.

Außerdem könnt ihr Links zu sozialen Netzwerken setzen, z.B. zu eurem Facebook- oder Twitter-Profil.
Derzeit werden diese Dienste angeboten:

• Facebook
• Twitter
• YouTube
• Instagram
• GitHub
• Vine
• Google+