how to change the format of the code in vue/ volar/ prettier project?

Question

hi I would like change how my autoformatting is setup from vue volar. Currently when I format my code volar takes the closing tag of a html tag and sets in on another line. for me it hard to read this code this way. I don't know if this is intentional or a bug. im sure this is something thar can be changed but, I don't know which settings use... any help would be great

current code:

  <v-container
      ><div class="d-flex justify-start">
        {{ contactsStore.contacts.length }} Kontakte
      </div></v-container
    >

expect behavior:

<v-container>
 <div class="d-flex justify-start">
  {{ contactsStore.contacts.length }} Kontakte
 </div>
</v-container>

and when the component has props I would like to to look like this

  <v-container
    :headers="headers"
    :items="contactsStore.getStateWithFullName"
    :search="search"
    :items-per-page="20"
    hide-default-footer
    >
     <div class="d-flex justify-start">
        {{ contactsStore.contacts.length }} Kontakte
     </div>
    </v-container>

Answer 1

fixed! just found the answer in another post. good to know that I am not the only one that does not like this.

Closing > in new line