Μορφοποιητής Vue
Μορφοποιήστε single-file components Vue με αυτόν τον Μορφοποιητή Vue. Επικολλήστε ένα component και το εργαλείο μορφοποιεί το block script του ως JavaScript ή ως TypeScript όταν το lang είναι ts, και το block style του ως CSS, SCSS ή Less ανάλογα με το χαρακτηριστικό lang, τοποθετώντας και τα δύο με εσοχή κάτω από τις ετικέτες τους. Το block template παραμένει σε μία γραμμή, με τα κενά συμπτυγμένα. Χρήσιμο για προγραμματιστές Vue που τακτοποιούν components για αξιολογήσεις και τεκμηρίωση.
Συχνές ερωτήσεις
Τι αλλάζει ο Μορφοποιητής Vue σε ένα component;
Μορφοποιεί το περιεχόμενο των μπλοκ script και style και τοποθετεί κάθε μπλοκ ανώτατου επιπέδου στη δική του γραμμή. Ο κώδικας μέσα σε κάθε μπλοκ έχει εσοχή δύο διαστημάτων κάτω από την ετικέτα ανοίγματός του.
Πώς γίνεται ο χειρισμός του μπλοκ template;
Το μπλοκ template διατηρείται σε μία γραμμή, ενώ οι ακολουθίες κενών χαρακτήρων συμπτύσσονται σε μεμονωμένα διαστήματα. Οι οδηγίες όπως v-if, v-for, :prop και @event, καθώς και οι εκφράσεις mustache, αντιγράφονται ακριβώς όπως είναι γραμμένες.
Πώς μορφοποιείται το μπλοκ script;
Ένα απλό μπλοκ script αναλύεται και εκτυπώνεται ως JavaScript, με εσοχή δύο διαστημάτων και ερωτηματικά. Με lang="ts" μορφοποιείται ως TypeScript, το οποίο δέχεται και δηλώσεις τύπων.
Πώς μορφοποιείται το μπλοκ style;
Ένα μπλοκ style μορφοποιείται ως CSS από προεπιλογή, με μία δήλωση ανά γραμμή. Με lang="scss" ή lang="less" χρησιμοποιεί τους κανόνες SCSS ή Less, ενώ το χαρακτηριστικό scoped διατηρείται.
Τι συμβαίνει αν υπάρχει συντακτικό σφάλμα στο script;
Τα μπλοκ JavaScript και CSS αναλύονται, επομένως ένα συντακτικό σφάλμα διακόπτει το εργαλείο και εμφανίζεται το σχετικό μήνυμα. Διορθώστε το πρόβλημα που αναφέρεται και μορφοποιήστε ξανά.
Υποστηρίζει το script setup;
Ναι, το χαρακτηριστικό setup διατηρείται στην ετικέτα και το περιεχόμενο μορφοποιείται όπως κάθε άλλο μπλοκ script. Οι μακροεντολές του μεταγλωττιστή, όπως η defineProps, αντιμετωπίζονται από τον μορφοποιητή ως συνηθισμένες κλήσεις συναρτήσεων.
Μπορώ να αλλάξω την εσοχή;
Όχι, ο μορφοποιητής χρησιμοποιεί πάντα δύο διαστήματα και δεν διαθέτει επιλογές. Το ίδιο component παράγει πάντα το ίδιο αποτέλεσμα.
Διατηρούνται τα σχόλια;
Ναι, διατηρούνται τα σχόλια HTML ανάμεσα στα μπλοκ και τα σχόλια μέσα στα μπλοκ script και style. Τα σχόλια μέσα στο template μένουν στη θέση τους, στη μονή γραμμή του.
Γιατί το αποτέλεσμα περικλείεται σε μπλοκ κώδικα html;
Τα μονοαρχειακά components διαβάζονται ως HTML, επομένως το αποτέλεσμα επιστρέφεται ως μπλοκ κώδικα Markdown με την ένδειξη html. Αντιγράψτε τις γραμμές ανάμεσα στα οριοθετικά του μπλοκ στο αρχείο .vue.
Πόσο μεγάλο μπορεί να είναι το component;
Έως 5 MB ανά εκτέλεση· μεγαλύτερη είσοδος απορρίπτεται με σχετικό μήνυμα. Το αποτέλεσμα είναι ίδιο με την επιλογή Vue του Code Formatter.