Eslint and Prettier Conflicts

Describe the bug

I'm using eslint and prettier on my project. I'm getting an error => [eslint] Expected 1 line break before and after opening tag (<div>), but no line breaks found. eslint_d(vue/singleline-html-element-content-newline) (vue/singleline-html-element-content-newline) with the code below:

<div mx-auto mt-5 text-center text-sm opacity-50>test</div>

Apparently the eslint wants to code to be like this:

<div mx-auto mt-5 text-center text-sm opacity-50>
    test
</div>

But prettier keeps reformatting it in to a single line that i showed you above and when it does that eslint keeps given me the same error. I've tried lots of different configurations with different paramaters in .prettierrc file but it doesn't seems to be working. Here are my configurations:

{
  "tabWidth": 2,
  "trailingComma": "es5",
  "semi": false,
  "singleQuote": true,
  "bracketSameLine": true,
  "bracketSpacing": true,
  "bracketLine": true,
  "parser": "vue",
  "jsxBracketSameLine": true,
  "htmlWhitespaceSensitivity": "ignore",
}

I want Prettier to handle the format warnings that Eslint is giving me. What should I do for it?

Reproduction

Conflict between eslint and prettier

System Info

System:
    OS: Windows 10 10.0.22621
    CPU: (16) x64 AMD Ryzen 7 5800X3D 8-Core Processor
    Memory: 5.63 GB / 15.92 GB
  Binaries:
    Node: 18.13.0 - C:\Program Files\nodejs\node.EXE
    npm: 8.19.3 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.22621.1413.0), Chromium (112.0.1722.39)
    Internet Explorer: 11.0.22621.1

Used Package Manager

npm

Validations

[X] Follow our Code of Conduct
[X] Read the Contributing Guide.
[X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
[X] Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.
[X] The provided reproduction is a minimal reproducible of the bug.

antfu-collective / vitesse