Как настроить форматирование во .vue?

Question

[Fastor1us]

По умолчанию плагин Vue Language Features (Volar) для VSCode форматирует файл так:

<script setup>
import Card from './Card.vue'
defineProps({
  value: {
    type: Object,
    required: true,
  },
})
</script>


<template>
  <div>
    <Card v-bind:value="value.groups[0].cards[0]" v-for="card in value.groups[0].cards" v-bind:key="card.id" />
  </div>
</template>

Что меня не совсем устраивает - очень длинная строка с компонентом Card.
Мне нужно что бы она выглядела так:

<Card 
  v-bind:value="value.groups[0].cards[0]"
  v-for="card in value.groups[0].cards" 
  v-bind:key="card.id" 
/>

Но при форматировании плагин Vue Language Features (Volar) приводит её к виду "в одну строку".

Установил Prettier, теперь поведение записи компонента при форматировании стало как мне нужно, но появилась другая проблема - пробел в одну строку между блоками <script setup>, <template> и <style scoped> а мне нужно в две строки. Эту проблему я так же не смог побороть.

Помогите! Мне нужно что бы было 2 строки между блоками<script setup>, <template> и <style scoped>, и компоненты можно было бы записывать в удобном, читаемом виде. Как это лучше сделать?

п.с. настройки Prettier:

{
  "printWidth": 80,
  "tabWidth": 2,
  "useTabs": false,
  "singleQuote": true,
  "semi": false,
  "trailingComma": "all",
  "bracketSpacing": true,
  "jsxBracketSameLine": false,
  "vueIndentScriptAndStyle": true,
  "vueIndentTemplate": true
}