Code-Formatter

Die Code-Formatter von ArrayKit räumen Code, Abfragen und Konfigurationsdateien auf, die du einfügst, damit sie sich leichter lesen, prüfen und committen lassen. Bring Abfragen für MySQL, PostgreSQL, SQL Server, SQLite, BigQuery und Oracle mit dem SQL-Formatierer in Form, verschönere JavaScript, TypeScript und JSX oder minifiziere JavaScript mit dem JS-/TS-Formatierer und räume Stylesheets und Markup mit dem CSS-/SCSS-Formatierer, dem HTML-Formatierer und dem XML-Formatierer auf. Für Konfigurationen wandeln YAML ↔ JSON, INI zu JSON und dotenv zu JSON in beide Richtungen um, und der TOML Formatter formatiert TOML und macht daraus JSON und wieder zurück. Der GraphQL-Formatierer, der OpenAPI-/Swagger-Formatierer, der Dockerfile-Formatierer und der MongoDB-Query-Formatierer kümmern sich um API-Definitionen, Container-Dateien und Datenbankabfragen, und der SVG-Optimierer entfernt Editor-Ballast aus Icons. Für die Dokumentation rendert die Markdown-Vorschau GitHub-Flavored Markdown schon beim Tippen, HTML zu Markdown wandelt Seiten und Snippets um, und der Mermaid-Diagramm-Renderer zeichnet Fluss- und Sequenzdiagramme als SVG. Zur Kontrolle probierst du ein Muster im Regex-Tester aus, vergleichst zwei Versionen mit „Text vergleichen“, testest ein Farbpaar mit dem Kontrast-Checker und rechnest Farben und CSS-Längen mit dem CSS-Farbkonverter und dem CSS-Einheiten-Konverter um. Gebaut sind sie für Frontend-, Backend- und DevOps-Engineers sowie technische Redakteure. Alles läuft in deinem Browser, sodass dein Code auf deinem Gerät bleibt und nichts hochgeladen wird.

• YAML ↔ JSON — Konvertiere YAML zu JSON und zurück.
• Markdown-Vorschau — Rendere Markdown zu HTML mit Live-Vorschau.
• Regex-Tester — Teste reguläre Ausdrücke live mit Treffern, Gruppen und Flags.
• CSS-Farbkonverter — Konvertiere zwischen HEX, RGB und HSL mit Live-Farbmuster.
• Text vergleichen — Vergleiche zwei Texte Zeile für Zeile und sieh Hinzufügungen und Löschungen.
• MDX-Konverter — Rendere MDX als Text, konvertiere HTML → MDX und escape Text zu MDX-Literalen.
• CSS-/SCSS-Formatierer — Verschönere oder minimiere CSS/SCSS/LESS, sortiere Eigenschaften und entferne Duplikate.
• JS-/TS-Formatierer — Verschönere JavaScript, TypeScript und JSX/TSX mit Prettier-Optionen oder minimiere reines JavaScript.
• HTML-Formatierer — Verschönere oder minimiere HTML, formatiere eingebettetes CSS/JS und zeige eine Vorschau.
• XML-Formatierer — Verschönere, minimiere und validiere XML und konvertiere XML ↔ JSON.
• SQL-Formatierer — Formatiere SQL für MySQL, PostgreSQL, SQL Server, SQLite, BigQuery und Oracle.
• GraphQL-Formatierer — Formatiere oder minimiere GraphQL-Abfragen und -Schemas, validiere die Syntax und extrahiere Operationen.
• Dockerfile-Formatierer — Formatiere ein Dockerfile und erhalte Best-Practice- und Lint-Hinweise.
• MongoDB-Query-Formatierer — Formatiere MongoDB-Shell-Abfragen und Aggregations-Pipelines.
• Kontrast-Checker — Prüfe das WCAG-Kontrastverhältnis und ob AA/AAA zwischen zwei Farben bestanden wird.
• Mermaid-Diagramm-Renderer — Rendere Mermaid-Diagramme (Fluss, Sequenz, Gantt) als SVG in deinem Browser.
• SVG-Optimierer — Minimiere SVG: entferne Kommentare, Metadaten und Editor-Reste und reduziere Leerzeichen.
• MongoDB-Query-Beautifier — Verschönere und rücke MongoDB-Abfragen und find()-Anweisungen in deinem Browser ein.
• MongoDB-Aggregation-Beautifier — Verschönere und rücke MongoDB-Aggregation-Pipelines in deinem Browser ein.
• MongoDB-Explorer — Erkunde ein MongoDB-Dokument- oder Sammlungs-Beispiel und leite Feldschema und Typen ab.
• OpenAPI-/Swagger-Formatierer — Formatiere und validiere OpenAPI-/Swagger-Spezifikationen (JSON oder YAML) und zähle Pfade und Operationen.
• CSS-Einheiten-Konverter — Konvertiere zwischen px, rem, em, pt und %.
• Glob-zu-Regex-Konverter — Wandle glob-Muster in regex um und teste Pfade.
• HTML zu Markdown — Konvertiere HTML in sauberes, lesbares Markdown.
• TOML Formatter — Formatiere TOML und konvertiere von und zu JSON.
• logfmt zu JSON — logfmt key=value-Logs zu JSON und zurück konvertieren, mit Werten in Anführungszeichen und Typumwandlung.
• dotenv zu JSON — KEY=value .env-Dateien in ein JSON-Objekt und zurück konvertieren.
• CSV zu Markdown — CSV oder TSV in eine GitHub-Flavored-Markdown-Tabelle verwandeln.
• INI zu JSON — INI-Sektionen und key=value-Paare in JSON und zurück in INI konvertieren.
• Markdown Table Generator — Baue Markdown-Tabellen in einem Raster und exportiere GFM, HTML, AsciiDoc, reST oder LaTeX.
• Data Size Converter — Rechne zwischen Bytes, Bits und dezimalen (KB, MB) und binären (KiB, MiB) Einheiten um.
• Properties zu JSON — Java-.properties zu JSON konvertieren und zurück, im Browser.

Häufig gestellte Fragen

Was kann ich mit den Code-Formattern von ArrayKit machen?

Du kannst Code verschönern oder minifizieren, SQL übersichtlich setzen, ein Dockerfile linten und GraphQL, MongoDB-Abfragen, OpenAPI-Spezifikationen und TOML formatieren. Außerdem wandelst du Konfigurationen zwischen YAML, TOML, INI, .env, Java-.properties, logfmt und JSON um, siehst Markdown und MDX in der Vorschau, machst aus HTML oder CSV Markdown, baust Markdown-Tabellen und renderst Mermaid-Diagramme. Für schnelle Checks gibt es den Regex-Tester, den Glob-zu-Regex-Konverter, „Text vergleichen“, den Kontrast-Checker und den MongoDB-Explorer, dazu Konverter für CSS-Farben, CSS-Einheiten und Datengrößen.

Welche Sprachen kann ich verschönern oder minifizieren?

CSS, SCSS und LESS, HTML, XML und GraphQL kannst du verschönern und minifizieren, JavaScript, TypeScript, JSX und TSX verschönern, wobei sich reines JavaScript auch minifizieren lässt. Der SQL-Formatierer beherrscht MySQL, PostgreSQL, SQL Server, SQLite, BigQuery und Oracle. Dockerfiles, MongoDB-Abfragen und OpenAPI-Spezifikationen haben mit dem Dockerfile-Formatierer, dem MongoDB-Query-Formatierer und dem OpenAPI-/Swagger-Formatierer eigene Tools, und der SVG-Optimierer verkleinert SVG-Markup. Für JSON gibt es einen eigenen Formatierer und Viewer in den JSON-Tools.

Kann ich privaten oder proprietären Code bedenkenlos einfügen?

Ja. Jeder Formatierer und Konverter läuft in deinem Browser, sodass Quellcode, SQL, Konfigurationsdateien und die Werte in einer .env-Datei auf deinem Gerät verarbeitet und nie auf einen Server hochgeladen werden. Du kannst proprietären Code formatieren, ohne dass er deinen Rechner verlässt.

Ändert das Formatieren, wie mein Code funktioniert?

Verschönern soll nur das Aussehen des Codes ändern: Einrückung, Zeilenumbrüche, Abstände und den Stil der Anführungszeichen. Minifizieren entfernt Leerraum und Kommentare, um Dateien kleiner zu machen, und verdichtet bei JavaScript zusätzlich den Code. Einige Optionen ändern den Inhalt bewusst: Das Sortieren von CSS-Eigenschaften ordnet sie neu, und das Entfernen doppelter Deklarationen behält nur den letzten Wert jeder Eigenschaft, wodurch ein absichtlicher Fallback verloren gehen kann. Vergleiche das Ergebnis mit „Text vergleichen“ und teste es, bevor du es auslieferst.

Wie wandle ich Konfigurationsdateien zwischen YAML, TOML, INI, .env und JSON um?

Nimm den passenden Konverter: YAML ↔ JSON und der TOML Formatter arbeiten in beide Richtungen, INI zu JSON macht aus [Abschnitten] verschachtelte Objekte und zurück, und dotenv zu JSON wandelt .env-Dateien in JSON und zurück und kommt dabei mit Werten in Anführungszeichen, Kommentaren und export-Präfixen zurecht. „Properties zu JSON“ kann Schlüssel mit Punkten wie db.host verschachteln, und logfmt zu JSON macht aus key=value-Logzeilen JSON-Objekte und zurück.