How to resolve Vitesse formatting issue?

I just created a project based on the https://github.com/antfu/vitesse template. But I've some formatting issue.

If I ask for formating in VS Code, each "first" attribute of an html element is on the same line as the start of element, which is something I would have expected, but it raises warning:

Expected a linebreak before this attribute.eslintvue/first-attribute-linebreak

or sometimes:

Expected indentation of 2 spaces but found 4 spaces.eslintvue/html-indent

If I hit Ctrl+S, then I get no errors anymore, all the attributes(including first one) are on a new line.

Honestly, I don't really care which is kept, but how to synchronize the two of them? It jumps a lot every time I format and it's disturbing.

Thank you very much

EDIT

After @tony19's comment, I tried to set volar as default formatter. So my .vscode/settings.json looks like:

{
  "cSpell.words": [
    "Vitesse",
    "Vite",
    "unocss",
    "vitest",
    "vueuse",
    "pinia",
    "demi",
    "antfu",
    "iconify",
    "intlify",
    "vitejs",
    "unplugin",
    "pnpm"
  ],
  "i18n-ally.sourceLanguage": "en",
  "i18n-ally.keystyle": "nested",
  "i18n-ally.localesPaths": [
    "locales"
  ],
  "i18n-ally.sortKeys": true,
  "prettier.enable": false,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "files.associations": {
    "*.css": "postcss"
  },
  "editor.formatOnSave": false,
  "editor.defaultFormatter": "Vue.volar"
}

But I've still the same behavior. shift+alt+F format like this:

  <div id="simple"
       class="toto">
    index
  </div>

and when I save, it formats like this:

  <div
    id="simple"
    class="toto"
  >
    index
  </div>

I must admit that I'm not a big fan of having the end > on a single line but as far as the comportment is coherent I'm happy (I also tried "editor.defaultFormatter": "dbaeumer.vscode-eslint" and "editor.defaultFormatter": "antfu.vite" without any luck.