Vue-muotoilija
Muotoile Vue yksittäiset tiedostokomponentit tällä Vue-muotoilijalla. Liitä komponentti, niin työkalu muotoilee sen script-lohkon muodossa JavaScript tai muodossa TypeScript, kun lang on ts, ja style-lohkon muodossa CSS, SCSS tai Lessinä lang-attribuutin mukaan. Molemmat sisennetään avaavan taginsa alle. Template-lohko säilytetään yhdellä rivillä ja sen ylimääräiset välilyönnit tiivistetään. Hyödyllinen Vue-kehittäjille, jotka siistivät komponentteja katselmointia ja dokumentaatiota varten.
Usein kysytyt kysymykset
Mitä Vue-muotoilija muuttaa komponentissa?
Se muotoilee script- ja style-lohkojen sisällön ja sijoittaa jokaisen ylimmän tason lohkon omalle rivilleen. Kunkin lohkon koodi sisennetään kahdella välilyönnillä avaavan tagin alle.
Miten template-lohkoa käsitellään?
Template-lohko säilytetään yhdellä rivillä, ja peräkkäiset välilyönnit tiivistetään yksittäisiksi välilyönneiksi. Direktiivit, kuten v-if, v-for, :prop ja @event, sekä mustache-lausekkeet kopioidaan täsmälleen alkuperäisessä muodossaan.
Miten script-lohko muotoillaan?
Tavallinen script-lohko jäsennetään ja tulostetaan muodossa JavaScript käyttäen kahden välilyönnin sisennystä ja puolipisteitä. Kun lang="ts", se muotoillaan muodossa TypeScript, joka hyväksyy myös tyyppimerkinnät.
Miten style-lohko muotoillaan?
Style-lohko muotoillaan oletuksena muodossa CSS siten, että kukin määritys on omalla rivillään. Kun käytössä on lang="scss" tai lang="less", käytetään SCSS- tai Less-sääntöjä, ja scoped-attribuutti säilytetään.
Mitä tapahtuu, jos script-lohkossa on syntaksivirhe?
JavaScript- ja CSS-lohkot jäsennetään, joten syntaksivirhe pysäyttää työkalun ja sen viesti näytetään. Korjaa ilmoitettu ongelma ja muotoile uudelleen.
Tukeeko se script setupia?
Kyllä, setup-attribuutti säilytetään tagissa ja sisältö muotoillaan kuten mikä tahansa muu script-lohko. Kääntäjän makrot, kuten defineProps, ovat muotoilijalle tavallisia funktiokutsuja.
Voinko vaihtaa sisennyksen?
Ei, muotoilija käyttää aina kahden välilyönnin sisennystä eikä siinä ole asetuksia. Sama komponentti tuottaa aina saman tulosteen.
Säilyvätkö kommentit?
Kyllä, HTML-kommentit lohkojen välissä sekä script- ja style-lohkojen sisällä säilytetään. Templaten sisäiset kommentit pysyvät paikallaan yhdellä rivillään.
Miksi tulos on rajattu html-koodiaitausmerkeillä?
Yksittäiset tiedostokomponentit luetaan muodossa HTML, joten tulos palautetaan muodossa Markdown-koodilohkona, jonka merkintänä on html. Kopioi koodiaitausten väliset rivit .vue-tiedostoosi.
Kuinka suuri komponentti voi olla?
Enintään 5 MB suoritusta kohti; suurempi syöte hylätään ja siitä näytetään viesti. Tuloste on sama kuin Code Formatterin Vue-vaihtoehdolla.