Angular Formatter
Formatiere Angular-Komponentenvorlagen mit diesem Angular Formatter. Füge Vorlagen-HTML mit strukturellen Direktiven, Bindings und Interpolation ein. Das Werkzeug setzt Blockelemente wie div, section, p, ul und table in eigene Zeilen mit zwei Leerzeichen Einrückung, entfernt überflüssige Leerzeichen und formatiert Inline-Script- und Style-Blöcke. Direktiven, Bindings und Ausdrücke bleiben unverändert, damit Angular-Entwickler schnell übersichtliche Vorlagen erhalten.
Häufig gestellte Fragen
Was kann ich mit dem Angular Formatter formatieren?
Er formatiert Angular-Komponentenvorlagen, also das HTML, das du in .component.html-Dateien oder in einem Vorlagen-String schreibst. TypeScript-Komponentenklassen werden hier nicht verarbeitet. Verwende dafür den TypeScript Formatter.
Bleiben Direktiven und Bindings erhalten?
Ja, Attribute wie *ngIf, *ngFor, [value], (click) und [(ngModel)] sowie Interpolationen wie {{ user.name }} werden unverändert übernommen. Nur der Leerraum zwischen den Elementen ändert sich.
Welche Elemente erhalten eigene Zeilen?
Wenn ein Element Blockelemente enthält, etwa div, section, article, header, footer, nav, main, form, p, h1 bis h6, ul, ol oder table, kommt jedes Kindelement in eine eigene eingerückte Zeile. Elemente ohne solche Kindelemente bleiben in einer Zeile; Folgen von Leerraum werden dabei zu einzelnen Leerzeichen zusammengefasst.
Warum bleibt meine benutzerdefinierte Komponente in einer Zeile?
Benutzerdefinierte Elemente wie app-root oder mat-card sind keine Blockelemente von HTML und ihr Inhalt bleibt daher inline, sofern er kein Blockelement wie div oder p enthält. Umschließe den Inhalt mit einem Blockelement, wenn du ihn auf mehrere Zeilen verteilen möchtest.
Werden Listenelemente in separate Zeilen gesetzt?
Nicht von selbst: li gehört nicht zu den Block-Tags. Daher bleibt ein ul, dessen einzige Kindelemente li-Elemente sind, in einer Zeile. Füge Blockinhalt wie ein div in die Elemente ein, damit sie auf mehrere Zeilen verteilt werden.
Was passiert mit Script- und Style-Tags?
Inline-Style-Blöcke werden als CSS und Inline-Scripts als JavaScript formatiert und unter ihrem Tag eingerückt. Der Inhalt von pre- und textarea-Elementen bleibt unverändert.
Bleiben HTML-Kommentare erhalten?
Ja, HTML-Kommentare bleiben erhalten und stehen in erweiterten Elementen in einer eigenen Zeile. Ihr Inhalt wird unverändert übernommen, sodass auskommentiertes Markup unverändert bleibt.
Validiert das Werkzeug meine Vorlage?
Nein, die Vorlage wird weder kompiliert noch geprüft, und auch nicht geschlossene Tags werden so gut wie möglich formatiert. Verwende ng build oder den Angular-Sprachdienst deines Editors, um Vorlagenfehler zu finden.
Warum ist die Ausgabe mit html gekennzeichnet?
Angular-Vorlagen sind HTML. Daher wird das Ergebnis als Markdown-Codeblock mit der Kennzeichnung html ausgegeben. Kopiere die Zeilen zwischen den Begrenzungszeichen in deine Vorlagendatei.
Wie groß darf meine Vorlage sein?
Pro Ausführung sind bis zu 5 MB möglich. Größere Eingaben werden mit einer Meldung abgelehnt. Die Ausgabe entspricht der Option Angular des Code Formatters.