Html Template formatting gone crazy

[UP-MDK]

Hi,

i tried using this plugin and others to format .vue files with prettier.
I tried for about 1h and haven't got anything workable.

Is there any way of formatting vuejs files with prettier?
I am using "vite" for adding vue to html files, but i couldn't get vue files to format correctly with the cli either.
Am i doing something wrong?

I would also provide additional information, if needed.

My html in .vue

<div class="layout"
> <main class="main"
    > <div class="container"
        > <img src="/icons/icon-nav-logo.svg" alt="Logo" /> <div class="main-wrapper"
            > <div class="search"
                > <input type="search" placeholder="Suche" /> <button type="submit">Google</button> </div
            > <ul class="quick-links"
                > <li
                    > <a href=""> <img /> <span>Moco</span> </a> </li
                > </ul
            > </div
        > </div
    > </main
> </div
>

prettier config:

{
    "semi": false,
    "singleQuote": true,
    "tabWidth": 4,
    "trailingComma": "es5",
    "endOfLine": "lf",
    "printWidth": 130
}