Häufig gestellte Fragen

Prettier Config Generator ist ein kostenloses, interaktives Web-Tool, mit dem Sie jede Prettier-Option visuell konfigurieren und die resultierende .prettierrc-Datei sofort kopieren können.

Prettier ist ein eigensinniger Code-Formatierer, der einen einheitlichen Stil in Ihrer gesamten Codebasis durchsetzt und Stil-Debatten in Code-Reviews eliminiert.

Eine .prettierrc-Datei ist eine Konfigurationsdatei im Stammverzeichnis Ihres Projekts, die Prettier mitteilt, wie Code formatiert werden soll.

Wählen Sie die Prettier-Optionen auf der Hauptseite aus. Die Konfiguration aktualisiert sich in Echtzeit. Klicken Sie auf "Konfiguration kopieren" und fügen Sie das JSON in eine .prettierrc-Datei ein.

Ja, völlig kostenlos. Keine Registrierung, kein Konto erforderlich, keine Nutzungsbeschränkungen.

Ja. Es enthält jede offiziell unterstützte Prettier-Option mit Beschreibungen und Standardwerten.

Klicken Sie auf "Konfiguration kopieren" in der Seitenleiste oder auf den schwebenden Button auf Mobilgeräten.

Alle drei sind gültige Konfigurationsmethoden. .prettierrc unterstützt JSON/YAML, prettier.config.js ist ein JavaScript-Modul, und package.json hält alles in einer Datei.

Ja. Prettier unterstützt TypeScript, JSX/TSX, Vue-Einzeldatei-Komponenten und viele andere Formate.

Installieren Sie die Erweiterung "Prettier - Code formatter" und fügen Sie formatOnSave: true zu Ihren VS Code-Einstellungen hinzu.

Führen Sie npx prettier --write . im Projektstamm aus.

JavaScript, TypeScript, JSX, CSS, HTML, Vue, JSON, YAML, Markdown und mehr.

Erstellen Sie eine .prettierignore-Datei im Projektstamm.

Ja. Installieren Sie eslint-config-prettier.

printWidth gibt die Zeilenlänge an, die Prettier anstrebt. Standardmäßig 80.

singleQuote steuert Anführungszeichen in JS/TS, jsxSingleQuote steuert JSX-Attribute.

Verwenden Sie die Suchleiste oben auf der Seite.

Ja. Klicken Sie auf den Theme-Umschalter in der Kopfzeile.

printWidth: 80, tabWidth: 2, semi: true, singleQuote: false, trailingComma: "all".

Öffnen Sie ein Issue oder Pull Request im GitHub-Repository.

Sie können jede Prettier-3.x-Version aus dem Versions-Dropdown auswählen — 3.0 bis 3.6 plus "latest". Das Bundle der ausgewählten Version wird bei Bedarf von jsDelivr geladen, sodass die Optionsliste immer mit dem tatsächlichen Schema dieser Version übereinstimmt.

TypeScript, JavaScript, Flow, CSS, SCSS, Less, HTML, Vue, Angular-Templates, JSON, JSON5, JSON mit Kommentaren, Markdown, MDX, YAML und GraphQL. Der Parser wird automatisch aus der Eingabe erkannt, aber Sie können ihn mit dem Dropdown überschreiben.

Klicken Sie auf die Teilen-Schaltfläche und die aktuelle Prettier-Version, die ausgewählten Optionen, der Code und die Parser-Überschreibung werden mit LZ in den URL-Hash komprimiert und in Ihre Zwischenablage kopiert. Das Öffnen dieses Links stellt genau dieselbe Konfiguration wieder her. Nichts wird an einen Server gesendet — alles bleibt im Browser.

Sie zeigt, wie viele KI-Tokens Ihre Ein- und Ausgabe unter dem ausgewählten Modell kosten würden. GPT-4o / GPT-4 / GPT-3.5 verwenden die offiziellen BPE-Tokenizer für eine exakte Zählung; Claude, Gemini, Llama und Mistral verwenden eine zeichenbasierte Näherung mit dem Präfix "~".

Ja. Ihre Prettier-Version, Optionsauswahlen und Split-View- / Tokenizer-Einstellungen werden in localStorage gespeichert, sodass ein Reload alles wiederherstellt. Ein teilbarer URL-Hash hat Vorrang, wenn einer beim Öffnen der Seite vorhanden ist.

Wenn der Parser von Prettier Ihre Eingabe nicht analysieren kann — meist weil der gewählte Parser nicht zum Code passt (z. B. CSS gewählt, aber Sie haben JSX eingefügt) — erscheint die Fehlermeldung in einem roten Streifen über dem Diff. Wechseln Sie den Parser passend zu Ihrem Code, und der Fehler verschwindet.

Ja. Der Preview-Tab hat ein eigenes Parser-Dropdown neben dem Diff-Toggle, und jeder Parser bringt ein eigens dafür erstelltes Beispiel mit — CSS, SCSS, Less, HTML, Vue, Angular, JSON / JSON5 / JSONC, Markdown, MDX, YAML, GraphQL, plus TypeScript / JS. Beim Wechsel des Parsers wird das passende Beispiel mit Ihren aktuellen Optionen neu formatiert, sodass sprachspezifische Optionen wie proseWrap, htmlWhitespaceSensitivity und vueIndentScriptAndStyle einen Ort haben, an dem sie ihre Wirkung zeigen können. Ihre Auswahl bleibt über Reloads hinweg erhalten.