Keine Werbung mögen? Gehen Werbefrei Heute

Prettier Konfigurationsgenerator

DatenEntwickler
ANZEIGE Entfernen?
EINGANG
JSON ist die am häufigsten verwendete Option; wählen Sie ein JS-Format, wenn Sie dynamische Konfiguration oder Umgebungswechsel benötigen.

Kernoptionen

Die Zeilengröße, an der der Drucker ausrichtet. Standardwert von Prettier: 80.
Anzahl der Leerzeichen pro Einrückungsebene. Standardwert von Prettier: 2.
Änderung der Anführungszeichen für Objekt-Eigenschaften.
Endkomma in mehrzeiligen Konstrukten ausgeben.
Klammern um einen einzigen Pfeil-Funktion-Parameter.
Zeilenumbruchstil für geschriebene Dateien.

JSX

Markdown & HTML

Wie Prettier den Markdown-Textumbruch behandelt.
Wie Prettier die Leerzeichen in HTML behandelt.

Sprachspezifische Überschreibungen

Fügen Sie eine overrides Block, um Einstellungen für bestimmte Dateitypen anzupassen.

Ausgabemöglichkeiten

ANZEIGE Entfernen?

Führung

Prettier Config Generator

Prettier Konfigurationsgenerator

Eine korrekte Prettier-Konfiguration erstellen, ohne durch die Dokumentation zu suchen. Wählen Sie jede Formatierungsoption aus einer Liste, fügen Sie spezifische Überschreibungen für Markdown, HTML, YAML und JSON hinzu und exportieren Sie das Ergebnis als .prettierrc.json, .prettierrc.yaml, ein ES-Modul, ein CommonJS-Modul oder ein bereitgestelltes "prettier" Element für package.json. Eine passende .prettierignore Vorlage wird neben dem Ergebnis generiert, damit Ihr Repository bereits beim ersten Commit formatiert werden kann.

Nutzung

  1. Wählen Sie ein Ausgabeformat — JSON für die einfachste teilbare Datei, YAML für eine menschenfreundliche Bearbeitung, ein JS-Modul, wenn Sie logische Bedingungen benötigen, oder das package.json-Element, wenn Sie eine Datei weniger im Repository haben möchten.
  2. Legen Sie die Kernoptionen: Zeilengröße, Tab-Größe, Semikolons, Anführungszeichenstil, Endkomma, Klammern mit Leerzeichen, Pfeil-Funktion-Klammern und Zeilenumbruchstil.
  3. Passen Sie die JSX Einstellung an, wenn Ihr Codebase React verwendet, und die Markdown & HTML Einstellung für die Umbruchbehandlung und die Leerzeichenbehandlung.
  4. Aktivieren Sie jede Sprachspezifische Überschreibung um unterschiedliche Regeln für bestimmte Dateitypen anzuwenden — zum Beispiel eine größere printWidth für JSON oder ein einzelnes Attribut pro Zeile für HTML.
  5. Klicken Sie auf Kopie oder Herunterladen auf der generierten Konfiguration. Legen Sie sie an der Wurzel Ihres Projekts ab und führen Sie aus npx prettier --write ..

Funktionen

  • Jede offizielle Prettier-Option — printWidth, tabWidth, useTabs, semi, singleQuote, quoteProps, jsxSingleQuote, trailingComma, bracketSpacing, bracketSameLine, arrowParens, endOfLine, proseWrap, htmlWhitespaceSensitivity, singleAttributePerLine.
  • Fünf Ausgabeformate — JSON, YAML, ESM (.mjs), CommonJS (.cjs) und ein package.json-Fragment.
  • Sprachspezifische Überschreibungsblöcke für Markdown, HTML, YAML und JSON mit sinnvollen Standardwerten, die Sie direkt kopieren oder anpassen können.
  • Automatisch generierte .prettierignore Vorlage, die Build-Ausgaben, Abhängigkeiten, Lock-Dateien, minimierte Assets und gängige Framework-Cache-Ordner enthält.
  • JSDoc @type Anmerkung auf JS-Modul-Ausgaben, damit Editor-Tools automatisch Vorschläge und Typüberprüfungen anzeigen.
  • Live-Vorschau — Jede Änderung aktualisiert das Ergebnis sofort, sodass Sie Option-Kombinationen in Sekunden A/B vergleichen können.

Häufig gestellte Fragen

  1. Warum hat Prettier so wenige Optionen absichtlich?

    Das Designziel von Prettier ist es, Streit über Stil zu beenden, indem es eindeutig ist. Jede Option, die existiert, wurde mit Bedauern hinzugefügt, weil ein Konsens über die „richtige“ Standardwerte unmöglich war. Das Team lehnt explizit neue Optionen ab, um Konfigurationen portabel zu halten und die Überprüfungen vorhersagbar zu machen. Deshalb ist etwas wie „Leerzeichen um Schlüsselwörter“ nicht konfigurierbar — Prettier behandelt Formatierungsentscheidungen als Kommoditätsentscheidungen, nicht als persönliche Ausdrucksform.

  2. Welcher Unterschied besteht zwischen trailingComma 'es5' und 'all'?

    'es5' fügt Komma an Stellen ein, wo ECMAScript 5 sie erlaubt — Arrays und Objekte — aber nicht in Funktionsparametern oder Aufrufen. 'all' fügt sie auch an Funktionsparameterlisten und Aufrufstellen hinzu, was in ES2017+ gültig ist und bei der Hinzufügung oder Entfernung von Argumenten sauberere Git-Differenzen erzeugt. 'all' ist der aktuelle Standardwert von Prettier und die empfohlene Wahl für jedes Projekt, das moderne JS oder Transpilierung verwendet.

  3. Wie interagiert Prettier mit ESLint?

    Prettier behandelt die Formatierung; ESLint behandelt die Richtigkeit. Sie überschneiden sich bei stilistischen Regeln wie Anführungszeichen und Semikolons, was zu Konflikten führt, bei denen ESLint Probleme meldet, die Prettier einfach neu formatiert. Die Lösung ist eslint-config-prettier — ein teilbarer Konfigurationsblock, der jede Regel von Prettier deaktiviert. Formatieren Sie zuerst mit Prettier, dann überprüfen Sie mit ESLint auf Fehler. Plugins wie eslint-plugin-prettier, die Prettier als Prüfregel ausführen, werden nicht mehr empfohlen, da sie ESLint verlangsamen und Fehlerquellen verschleiern.

  4. Was macht proseWrap in Markdown-Dateien?

    'beibehalten' behält Ihre bestehenden Zeilenumbrüche unverändert. 'immer' führt den Text bei printWidth automatisch um, sodass die Quelle in jedem Editor lesbar ist, was gut für Dokumentations-Repositories ist. 'nie' fügt umgebrochene Absätze zu einer einzigen Zeile zusammen, was die richtige Wahl ist, wenn Dateien von Tools bearbeitet oder in Umgebungen gerendert werden, in denen Zeilenumbrüche als separate Absätze angezeigt werden. Der Standardwert ist 'beibehalten', weil Zeilenumbrüche in einigen Markdown-Formaten semantische Bedeutung haben können.

  5. Wann sollte ich ein JS-Format statt JSON verwenden?

    Verwenden Sie JSON, wenn die Konfiguration statisch ist und über die gesamte Team-Gruppe geteilt wird — es ist die einfachste und portabelste Form. Verwenden Sie ein JS-Format, wenn Sie gemeinsame Regeln aus einem Paket importieren, Optionen basierend auf einer Umgebungsvariable wechseln, Überschreibungen aus Glob-Listen im Code ableiten oder TypeScript-Typen über die JSDoc @type-Import verwenden. JS-Konfigurationen sind langsamer beim Laden, da Prettier sie ausführen muss, aber der Aufwand ist bei Editor-Speicherzeiten unsichtbar.

Möchten Sie werbefrei genießen? Werde noch heute werbefrei

Erweiterungen installieren

IO-Tools zu Ihrem Lieblingsbrowser hinzufügen für sofortigen Zugriff und schnellere Suche

Zu Chrome-Erweiterung Zu Kantenerweiterung Zu Firefox-Erweiterung Zu Opera-Erweiterung

Die Anzeigetafel ist eingetroffen!

Anzeigetafel ist eine unterhaltsame Möglichkeit, Ihre Spiele zu verfolgen. Alle Daten werden in Ihrem Browser gespeichert. Weitere Funktionen folgen in Kürze!

ANZEIGE Entfernen?
ANZEIGE Entfernen?
ANZEIGE Entfernen?

Nachrichtenecke mit technischen Highlights

Beteiligen Sie sich

Helfen Sie uns, weiterhin wertvolle kostenlose Tools bereitzustellen

Kauf mir einen Kaffee
ANZEIGE Entfernen?