Herzlich willkommen! Als Webentwickler wissen Sie, wie wichtig sauberer und konsistenter Code ist. Er ist nicht nur leichter zu lesen und zu warten, sondern verbessert auch die Zusammenarbeit im Team. Ein unformatiertes HTML-Dokument kann schnell zum Albtraum werden, insbesondere bei großen Projekten. Hier kommt Prettier ins Spiel, ein fantastisches Tool, das Ihnen das Leben deutlich erleichtern kann.
Was ist Prettier und warum brauchen Sie es?
Prettier ist ein Code-Formatter, der Ihren Code automatisch formatiert, sodass er einheitlich und lesbar ist. Es unterstützt viele Sprachen, einschließlich HTML, CSS, JavaScript, TypeScript und mehr. Anstatt sich mit Einrückungen, Zeilenumbrüchen und anderen Formatierungsdetails herumzuschlagen, überlassen Sie diese Aufgabe einfach Prettier. Das Tool analysiert Ihren Code und wendet vordefinierte oder konfigurierbare Formatierungsregeln an. Dies führt zu einem deutlich besseren und einheitlicheren Code.
Warum ist das so wichtig?
- Konsistenz: Prettier sorgt für eine einheitliche Formatierung im gesamten Projekt.
- Lesbarkeit: Sauberer Code ist einfacher zu lesen und zu verstehen.
- Weniger Fehler: Einheitliche Formatierung kann subtile Fehler aufdecken.
- Effizienz: Verschwenden Sie keine Zeit mehr mit manueller Formatierung.
- Bessere Zusammenarbeit: Alle Teammitglieder arbeiten mit dem gleichen Code-Stil.
Installation von Prettier
Es gibt verschiedene Möglichkeiten, Prettier zu installieren. Hier sind die gängigsten:
1. Globale Installation (npm oder yarn):
Wenn Sie Node.js und npm (oder yarn) installiert haben, können Sie Prettier global installieren:
npm install -g prettier
# oder
yarn global add prettierNach der globalen Installation können Sie Prettier über die Kommandozeile aufrufen.
2. Lokale Installation (pro Projekt):
Es ist oft empfehlenswert, Prettier lokal in Ihrem Projekt zu installieren, um Versionskonflikte zu vermeiden:
npm install --save-dev prettier
# oder
yarn add --dev prettierBei lokaler Installation müssen Sie Prettier über npm-Skripte oder ein Tool wie npx aufrufen.
3. Integration in Ihren Editor/IDE:
Viele Editoren und IDEs bieten Prettier-Integrationen. Dies ist die bequemste Möglichkeit, Prettier zu verwenden, da der Code automatisch formatiert wird, während Sie tippen oder beim Speichern. Hier sind einige beliebte Integrationen:
- VS Code: Installieren Sie die „Prettier – Code formatter” Extension.
- Sublime Text: Verwenden Sie das Package Control, um „Prettier” zu installieren.
- Atom: Installieren Sie das Paket „prettier-atom”.
- WebStorm/IntelliJ IDEA: Prettier ist oft bereits integriert oder kann als Plugin installiert werden.
Konfiguration von Prettier
Prettier kann über eine Konfigurationsdatei angepasst werden. Erstellen Sie eine .prettierrc.js, .prettierrc.json, .prettierrc.yaml oder .prettierrc.toml Datei im Stammverzeichnis Ihres Projekts. Alternativ können Sie die Konfiguration auch in der package.json unter dem Schlüssel "prettier" definieren. Hier sind einige gängige Optionen:
printWidth: Die maximale Zeilenlänge (Standard: 80).tabWidth: Die Anzahl der Leerzeichen pro Tab (Standard: 2).useTabs: Verwenden Sie Tabs anstelle von Leerzeichen? (Standard:false).semi: Fügen Sie am Ende von Anweisungen Semikolons hinzu? (Standard:true).singleQuote: Verwenden Sie einfache Anführungszeichen anstelle von doppelten? (Standard:false).quoteProps: Wie sollen Eigenschaften in Objekten in Anführungszeichen gesetzt werden? ("as-needed","consistent","preserve"; Standard:"as-needed").jsxSingleQuote: Verwenden Sie einfache Anführungszeichen in JSX? (Standard:false).trailingComma: Füge ein abschließendes Komma in Arrays, Objekten usw. hinzu ("es5","all","none"; Standard:"es5").bracketSpacing: Füge Leerzeichen innerhalb von Klammern in Objekten hinzu? (Standard:true).jsxBracketSameLine: Sollen die abschließenden Klammern von mehrzeiligen JSX-Elementen in derselben Zeile wie der letzte Prop stehen? (Standard:false).arrowParens: Wie sollen Klammern um Arrow-Funktionsparameter gesetzt werden? ("always","avoid"; Standard:"always").htmlWhitespaceSensitivity: Wie soll Prettier mit Whitespace in HTML umgehen? ("css","strict","ignore"; Standard:"css"). Der Wert"css"berücksichtigt die CSS-Anweisungen zur Whitespace-Behandlung.endOfLine: Zeilenende ("lf","crlf","cr","auto"; Standard:"lf").
Beispiel einer .prettierrc.js Datei:
module.exports = {
printWidth: 120,
tabWidth: 2,
useTabs: false,
semi: true,
singleQuote: true,
trailingComma: 'es5',
bracketSpacing: true,
arrowParens: 'always',
htmlWhitespaceSensitivity: 'ignore',
};Verwendung von Prettier
1. Über die Kommandozeile:
Navigieren Sie zum Stammverzeichnis Ihres Projekts und führen Sie den folgenden Befehl aus:
prettier --write .Dieser Befehl formatiert alle unterstützten Dateien im aktuellen Verzeichnis und Unterverzeichnissen. Sie können auch spezifische Dateien angeben:
prettier --write index.html style.css script.jsUm die Änderungen anzuzeigen, ohne sie zu schreiben, verwenden Sie den --check Parameter:
prettier --check .2. In Ihrem Editor/IDE:
Wenn Sie Prettier in Ihrem Editor/IDE integriert haben, wird der Code normalerweise automatisch formatiert, während Sie tippen oder beim Speichern. Die genaue Vorgehensweise hängt von der verwendeten Integration ab. In VS Code beispielsweise können Sie die Option „Format On Save” aktivieren.
3. Mit Git Hooks (husky und lint-staged):
Um sicherzustellen, dass Ihr Code immer formatiert ist, bevor er committet wird, können Sie Git Hooks verwenden. husky ermöglicht es Ihnen, Git Hooks einfach zu verwalten, und lint-staged führt Prettier nur auf den geänderten Dateien aus.
Installieren Sie die erforderlichen Pakete:
npm install --save-dev husky lint-stagedFügen Sie folgende Konfiguration zur package.json hinzu:
{
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"*.{js,jsx,ts,tsx,json,css,scss,md,html}": [
"prettier --write"
]
}
}Initialisieren Sie Husky:
npx husky installJetzt wird Prettier automatisch ausgeführt, bevor Sie einen Commit erstellen.
Spezielle HTML-Formatierung mit Prettier
Prettier geht im Allgemeinen gut mit HTML um. Es berücksichtigt jedoch einige Besonderheiten bei der Formatierung von HTML-Code:
- Einrückung: Prettier verwendet standardmäßig Leerzeichen zur Einrückung von HTML-Elementen. Die Anzahl der Leerzeichen kann über die
tabWidth-Option konfiguriert werden. - Attribute: Prettier formatiert HTML-Attribute, indem es sie alphabetisch sortiert oder in einer bestimmten Reihenfolge anordnet, je nach den Konfigurationseinstellungen.
- Whitespace: Die
htmlWhitespaceSensitivity-Option steuert, wie Prettier mit Whitespace innerhalb von HTML-Elementen umgeht. Die Option „ignore” ist nützlich, um unerwünschte Whitespace-Änderungen zu vermeiden. - Zeilenumbrüche: Prettier versucht, lange Zeilen umzubrechen, um die Lesbarkeit zu verbessern. Die maximale Zeilenlänge kann über die
printWidth-Option gesteuert werden. - Leere Elemente: Prettier kann leere HTML-Elemente (z. B.
<br>,<img>) unterschiedlich formatieren, je nach den Konfigurationseinstellungen. Einige Entwickler bevorzugen selbstschließende Tags (z. B.<br />), während andere separate öffnende und schließende Tags bevorzugen (z. B.<br></br>).
Beispiel vor und nach Prettier
Hier ist ein Beispiel, wie Prettier ein unformatiertes HTML-Dokument verbessern kann:
Vor Prettier:
<div class="container">
<h1>Willkommen</h1>
<p>Dies ist ein Beispieltext.</p>
<button class="btn btn-primary">Klick mich</button>
</div>Nach Prettier:
<div class="container">
<h1>Willkommen</h1>
<p>Dies ist ein Beispieltext.</p>
<button class="btn btn-primary">Klick mich</button>
</div>Beachten Sie die konsistente Einrückung, die Prettier hinzugefügt hat, was den Code deutlich lesbarer macht.
Fazit
Prettier ist ein unverzichtbares Werkzeug für jeden Webentwickler, der Wert auf sauberen, konsistenten und lesbaren Code legt. Es spart Zeit, reduziert Fehler und verbessert die Zusammenarbeit im Team. Egal, ob Sie Prettier global, lokal oder über eine Editor-Integration verwenden, die Vorteile sind enorm. Nutzen Sie die Macht von Prettier und verwandeln Sie Ihren HTML-Code in ein ästhetisches Meisterwerk!