Formatter Vue
Formattate i componenti Vue a file singolo con questo Formatter Vue. Incollate un componente e lo strumento formatta il suo blocco script come JavaScript oppure come TypeScript quando lang è ts, e il blocco style come CSS, SCSS o Less in base al suo attributo lang, indentando entrambi sotto i rispettivi tag. Il blocco template resta su una sola riga, con gli spazi vuoti consecutivi ridotti. Utile per gli sviluppatori Vue che riordinano i componenti in vista di revisioni e documentazione.
Domande frequenti
Che cosa modifica in un componente il Formatter Vue?
Formatta il contenuto dei blocchi script e style e dispone ogni blocco di primo livello su una riga a sé. Il codice all'interno di ogni blocco è indentato di due spazi sotto il tag di apertura.
Come viene gestito il blocco template?
Il blocco template resta su una sola riga, con le sequenze di spazi vuoti ridotte a spazi singoli. Le direttive come v-if, v-for, :prop e @event e le espressioni mustache vengono copiate esattamente come sono scritte.
Come viene formattato il blocco script?
Un blocco script semplice viene analizzato e stampato come JavaScript, con indentazione di due spazi e punti e virgola. Con lang="ts" viene formattato come TypeScript, che accetta anche annotazioni di tipo.
Come viene formattato il blocco style?
Per impostazione predefinita, un blocco style viene formattato come CSS, con una dichiarazione per riga. Con lang="scss" o lang="less" vengono applicate le regole SCSS o Less, e l'attributo scoped viene mantenuto.
Che cosa succede se lo script contiene un errore di sintassi?
I blocchi JavaScript e CSS vengono analizzati, quindi un errore di sintassi interrompe lo strumento e il relativo messaggio viene visualizzato. Correggete il problema segnalato e formattate di nuovo.
Supporta script setup?
Sì, l'attributo setup viene mantenuto nel tag e il contenuto viene formattato come qualsiasi altro blocco script. Le macro del compilatore come defineProps sono normali chiamate di funzione per il formatter.
Posso cambiare l'indentazione?
No, il formatter usa sempre due spazi e non ha opzioni. Lo stesso componente produce sempre lo stesso risultato.
I commenti vengono mantenuti?
Sì, i commenti HTML tra i blocchi e quelli all'interno dei blocchi script e style vengono mantenuti. I commenti all'interno del template restano al loro posto sulla stessa riga.
Perché il risultato è racchiuso in un blocco di codice html?
I componenti a file singolo vengono letti come HTML, quindi il risultato viene restituito in un blocco di codice Markdown contrassegnato come html. Copiate nel vostro file .vue le righe comprese tra i delimitatori.
Quanto può essere grande il componente?
Fino a 5 MB per esecuzione; gli input più grandi vengono rifiutati con un messaggio. Il risultato è identico a quello dell'opzione Vue del Code Formatter.