Online JSX-Formatter

Das Tool formatiert JSX- und TSX-Code zu einem konsistenten Layout, indem es Einrückung, Zeilenumbrüche und Abstandsregeln anwendet. Es richtet sich an Frontend-Entwickler, die lesbare, wartbare Komponenten wünschen. Es arbeitet mit einem Code-String und gibt einen formatierten String zurück, der einem definierten Stilhandbuch entspricht.
Der zugrunde liegende Ansatz basiert auf einem Printer, der den abstrakten Syntaxbaum des Codes verwendet und nicht auf einfachen Regex-Ersetzungen, was eine zuverlässige Handhabung verschachtelter Komponenten und Props ermöglicht. Es unterstützt konfigurierbare Optionen wie Einrückungsgröße, maximale Zeilenlänge und Wrapping-Strategie für JSX-Attribute.
Durch Normalisieren von Whitespace, das Ausrichten mehrzeiliger Props und die Sicherstellung einer konsistenten Platzierung schließender Tags reduziert es Diffs in Pull Requests und beschleunigt Code-Reviews. Sein Nutzen liegt in reproduzierbarer Formatierung über Teams hinweg, Integrationsbereitschaft mit Editoren über eine API und Unterstützung von TSX ebenso wie von reinem JSX. Es verändert weder Laufzeitverhalten noch JSX-Semantik, sondern nur Layout und Lesbarkeit.