CSS-FORMATTER / CSS · SCSS · LESS

CSS-Formatierer

Erweitern Sie ein einzeiliges Stylesheet in ordentliche Regeln.

Läuft lokal · Code wird nicht hochgeladen
Optionen

IHR NÄCHSTER SCHRITT

Verbinden Sie nützliche Tools mit Ihrem Unternehmensworkflow

Erstellen Sie ein Unternehmenskonto, um die Website-Überwachung, geschäftliche E-Mails und Benachrichtigungen zu konfigurieren und Ihr Team zur Zusammenarbeit einzuladen.

Neue Unternehmen erhalten eine 14-tägige Pro-Testversion, für die keine Karte erforderlich ist. Bei Testversionen ist der bezahlte monatliche Kreditzuschuss nicht inbegriffen.

Sie haben bereits ein Konto? Öffnen Sie Ihren Arbeitsbereich → (English)

So verwenden Sie es

  1. Code einfügen, Datei ablegen oder Beispiel laden; Die Sprache ist für diese Seite voreingestellt und kann geändert werden.
  2. Format auswählen oder verkleinern und Einzug, Breite und andere Optionen anpassen; Das Ergebnis wird während der Eingabe rechts angezeigt.
  3. Ergebnis kopieren oder herunterladen; Bei einem Fehler verwenden Sie „Gehe zu Fehler“, beheben Sie ihn und führen Sie ihn erneut aus.

Codestiloptionen

Gemeinsame Konventionen
OptionenEmpfehlung
Einzug2 Leerzeichen (gemeinsam im Frontend) / 4 Leerzeichen / Tab
LinienbreiteWrap bei 80; 100 oder 120 für Breitbildschirme
ZitateDoppelt (Prettier-Standard) oder einfach
SemikolonStandardmäßig aktiviert, um ASI-Überraschungen zu vermeiden
Nachgestellte KommasFür mehrzeilige Listen für sauberere Unterschiede hinzugefügt

Sprachen und Engines

Bei der Formatierung werden dieselben Open-Source-Engines wie bei gängigen Editoren verwendet, sodass die Ergebnisse mit „Prettier“ in VS Code übereinstimmen und Ihr Team einen Stil beibehalten kann. Jede Engine wird von dieser Website geladen und in Ihrem Browser ausgeführt.

Sprache
SpracheFormatKomprimieren
HTMLHübscher 3✓ Kommentare und Leerzeichen
XMLXunL XML-Engine✓
CSS / SCSS / WenigerHübscher 3✓ CSSO-Umstrukturierung
JavaScript / TypeScriptPrettier 3 (Babel)✓ Terser (nur JavaScript)
JSONHübscher 3✓ Große Zahlen sorgen für Präzision
YAMLHübscher 3– (Kommentare behalten)
SQLSQL-Formatter (14 Dialekte)—

Häufig gestellte Fragen

Wird die Formatierung die Stile ändern?

Nein. Nur Leerzeichen, Zeilenumbrüche und Abstände um Doppelpunkte und Semikolons ändern sich; selectors, properties and values stay the same.

Ist mein Code hochgeladen?

Nein. Die Engines werden von dieser Website heruntergeladen und in Ihrem Browser ausgeführt. Ihr Code durchläuft niemals unsere Server oder Dritte und ist daher für den internen Code und die interne Konfiguration sicher.

Wie groß dürfen Dateien sein?

Bis zu 5 MB pro Datei; Über 300 KB wartet die Seite auf die Schaltfläche, anstatt sie während der Eingabe zu formatieren, damit der Browser reagiert.

Praktischer Leitfaden zum CSS-Formatierer und häufig gestellte Fragen

Was macht ein CSS-Formatierer?

Der PostCSS-Parser von Prettier 3 unterstützt CSS, SCSS und Less: eine Deklaration pro Zeile, ein Selektor pro Zeile, verschachtelte Regeln und @media, eingerückt nach Tiefe, Farben und Werten wie geschrieben.

Für wen ist das gedacht und wann ist es nützlich?

Frontend-Entwickler, Theme-Anpasser und Vermarkter, die Site-Stile bearbeiten und ein einzeiliges Stylesheet oder sauberes SCSS und weniger lesen müssen.

Wie verwende ich diesen CSS-Formatierer?

Fügen Sie CSS, SCSS oder weniger ein, um eine Deklaration pro Zeile mit klarer Verschachtelung und Medienabfragen zu erhalten.

Wie soll ich die Ergebnisse interpretieren?

Nur Layout; Die Gültigkeit der Eigenschaft wird nicht überprüft und gebrochene Klammern oder fehlende Semikolons werden in Zeile und Spalte gemeldet.

Wo wird die Arbeit ausgeführt und welche Dienste erhalten Daten?

Stylesheets werden in Ihrem Browser formatiert und nie hochgeladen.