VoriTools

Code-Formatierungseditor

Wählen Sie die Sprache und formatieren Sie mit Prettier. Vergleichen oder kopieren Sie das Ergebnis; der Code wird nicht ausgeführt.

Läuft lokal in deinem Browser
Kategorie ansehen: Code & Debugging (34)
LOKALER EDITORMonaco 0.56.0Prettier 3.9.6Es wird nichts hochgeladen
Code wird vollständig in Ihrem Browser formatiert. Editor und Formatierer werden von VoriTools selbst bereitgestellt und senden keinen Ausschnitt an eine Remote-API.
Quelle

Der erweiterte Editor wird nur auf dieser Seite geladen. Falls er nicht starten kann, bleibt derselbe lokale Formatierer im Ausweichfeld verfügbar.

Formatierte Ausgabe

Die Formatierung ändert Leerzeichen und Layout. Bewahren Sie vor umfangreichen Code-Transformationen immer eine Projektkopie auf.

So formatieren Sie Code im Arbeitsbereich

Der Arbeitsbereich formatiert acht Sprachen — JavaScript, TypeScript, JSON, CSS, HTML, Markdown, YAML und GraphQL — mit Prettier 3.9.6, das in der Seite läuft. Sprache wählen, Quelltext links einfügen, Code formatieren drücken; rechts erscheint das Ergebnis.

Der erweiterte Editor ist Monaco 0.56.0 und wird von dieser Seite nachgeladen: Das Klartext-Feld ist sofort nutzbar und bleibt nutzbar, falls der Editor nicht startet. Zusammen liefert die Seite rund 1,8 MB Editor- und Formatiererdateien von voritools.com aus, und nichts von dem, was Sie einfügen, wird irgendwohin gesendet.

  1. Wählen Sie die Sprache in der Liste. Die Seite öffnet mit einem JavaScript-Beispiel; solange Sie das Feld nicht bearbeitet haben, wechselt beim Umschalten der Sprache auch das Beispiel, und Beispiel laden holt es jederzeit zurück.
  2. Fügen Sie den Quelltext in das linke Feld ein. Das Klartext-Feld ist benutzbar, bevor der erweiterte Editor fertig geladen ist; Eingaben darin wandern in den Editor, sobald er startet.
  3. Drücken Sie Code formatieren. Prettier läuft in der Seite und das eingerückte Ergebnis erscheint rechts; die Statuszeile meldet den Abschluss.
  4. Mit Ausgabe kopieren kommt das Ergebnis in die Zwischenablage, mit Ausgabe als Quelle verwenden zurück in das linke Feld für einen weiteren Durchlauf.
  5. Schlägt das Formatieren fehl, nennt die Meldung den Grund und die Ausgabe wird geleert, damit ein früheres Ergebnis nicht für das neue gehalten wird.

Sprachen, Standardwerte und Grenzen

Die acht Sprachen und ihr jeweiliger Parser

JavaScript und TypeScript laufen durch die Babel- und TypeScript-Parser, JSX und Typsyntax bleiben also erhalten und Generics wie <T,> funktionieren weiter. JSON, CSS, HTML, Markdown, YAML und GraphQL haben je einen eigenen Parser: Nicht geschlossene HTML-Tags werden geschlossen, und eine minimierte CSS-Regel wird mit einer Deklaration pro Zeile ausgegeben. Zu jeder Sprache gibt es ein Beispiel hinter Beispiel laden.

Ein Optionen-Fenster gibt es nicht, es gelten also die Standardwerte von Prettier: zwei Leerzeichen Einrückung, doppelte Anführungszeichen und Semikolons in JavaScript und TypeScript, nachgestellte Kommas in mehrzeiligen Konstrukten und eine Druckbreite von 80 Spalten. Die Seite ändert nur Leerraum und Layout; sie führt den Code nicht aus, installiert keine Abhängigkeiten und liest keine .prettierrc des Projekts, das Ergebnis kann also von einem Projekt-Skript mit eigenen Optionen abweichen.

Was die JSON-Ansicht annimmt und was sie stehen lässt

Die JSON-Ansicht ist Prettiers JSON-Parser, kein strenger RFC-8259-Prüfer. Auf dieser Seite gemessen: Ein Dokument mit einfachen Anführungszeichen, Schlüsseln ohne Anführungszeichen, einem nachgestellten Komma, einem //-Kommentar, einer Hexadezimalzahl oder Infinity wird ohne Fehler formatiert. Einfache Anführungszeichen, Schlüssel ohne Anführungszeichen und nachgestellte Kommas werden in der Ausgabe umgeschrieben; Kommentare, 0x10 und Infinity bleiben unverändert stehen.

Ein Dokument kann hier also sauber formatiert werden und anderswo trotzdem abgelehnt werden: {"a":1} // note und {"a":Infinity} kommen mit Kommentar und Infinity-Wert zurück. Bevor das Ergebnis an eine API, eine Konfigurationsdatei oder eine andere Sprache geht, prüfen Sie es mit der Seite JSON-Formatierer, die Kommentare und nachgestellte Kommas ablehnt.

Was lokal bleibt und wo die Grenzen liegen

Prettier und der Editor werden von dieser Seite ausgeliefert, und formatiert wird im Browser: Die Seite sendet weder den Quelltext noch das Ergebnis irgendwohin und arbeitet weiter, wenn das Netz ausfällt. Startet der Editor nicht, bleibt derselbe Formatierer im Klartext-Feld verfügbar.

Da die Arbeit im Tab läuft, sind große Dateien durch den Arbeitsspeicher des Geräts begrenzt: Eine 112-KB-JavaScript-Datei war hier in etwa 0,2 Sekunden formatiert, eine Datei mit vielen Megabyte kann den Tab einfrieren. Halten Sie die Datei unter Versionskontrolle, bevor Sie sie durch die Ausgabe ersetzen: Der Formatierer schreibt die Syntax so, wie Prettier sie druckt, nicht wie sie geschrieben war.

Zuletzt verwendet: