Vue Formatter
Formatiere Vue-Einzeldateikomponenten mit diesem Vue Formatter. Füge eine Komponente ein. Das Werkzeug formatiert ihren Script-Block als JavaScript oder, bei lang=ts, als TypeScript und ihren Style-Block je nach lang-Attribut als CSS, SCSS oder Less. Beide Blöcke werden unter ihren Tags eingerückt. Der Template-Block bleibt in einer Zeile, wobei Leerraum zusammengefasst wird. Hilfreich für Vue-Entwickler, die Komponenten für Reviews und Dokumentation aufräumen.
Häufig gestellte Fragen
Was ändert der Vue Formatter an einer Komponente?
Er formatiert den Inhalt von Script- und Style-Blöcken und setzt jeden Block der obersten Ebene in eine eigene Zeile. Der Code in jedem Block wird unter dem öffnenden Tag um zwei Leerzeichen eingerückt.
Wie wird der Template-Block behandelt?
Der Template-Block bleibt in einer Zeile; Folgen von Leerraum werden zu einzelnen Leerzeichen zusammengefasst. Direktiven wie v-if, v-for, :prop und @event sowie Mustache-Ausdrücke werden unverändert übernommen.
Wie wird der Script-Block formatiert?
Ein einfaches Script-Block wird als JavaScript mit zwei Leerzeichen Einrückung und Semikolons geparst und ausgegeben. Mit lang="ts" wird es als TypeScript formatiert, das auch Typannotationen unterstützt.
Wie wird der Style-Block formatiert?
Ein Style-Block wird standardmäßig als CSS formatiert, mit einer Deklaration pro Zeile. Mit lang="scss" oder lang="less" gelten die Regeln für SCSS beziehungsweise Less, und das scoped-Attribut bleibt erhalten.
Was passiert bei einem Syntaxfehler im Script?
JavaScript- und CSS-Blöcke werden geparst. Ein Syntaxfehler stoppt daher das Werkzeug und seine Meldung wird angezeigt. Behebe das gemeldete Problem und formatiere erneut.
Wird script setup unterstützt?
Ja, das setup-Attribut bleibt am Tag erhalten und der Inhalt wird wie jeder andere Script-Block formatiert. Compiler-Makros wie defineProps sind für den Formatter gewöhnliche Funktionsaufrufe.
Kann ich die Einrückung ändern?
Nein, der Formatter verwendet immer zwei Leerzeichen und hat keine Optionen. Dieselbe Komponente erzeugt immer dieselbe Ausgabe.
Bleiben Kommentare erhalten?
Ja, HTML-Kommentare zwischen Blöcken sowie Kommentare in Script- und Style-Blöcken bleiben erhalten. Kommentare im Template bleiben an ihrer Stelle in der einzeiligen Ausgabe.
Warum ist das Ergebnis als html gekennzeichnet?
Single-File-Komponenten werden als HTML gelesen, daher wird das Ergebnis als Markdown-Codeblock mit der Kennzeichnung html zurückgegeben. Kopiere die Zeilen zwischen den Begrenzungen in deine .vue-Datei.
Wie groß darf die Komponente sein?
Bis zu 5 MB pro Ausführung; eine größere Eingabe wird mit einer Meldung abgelehnt. Die Ausgabe ist identisch mit der Option Vue des Code-Formatierers.