Preserve vertical whitespace in Vue template with Prettier - vue.js

Question

I'm using the eslint-plugin-vue with my Vue project.
I have the following .prettierrc file:
// /.prettierrc
{
"arrowParens": "avoid",
"bracketSpacing": true,
"insertPragma": false,
"jsxBracketSameLine": false,
"printWidth": 80,
"proseWrap": "preserve",
"requirePragma": false,
"semi": false,
"singleQuote": true,
"tabWidth": 2,
"trailingComma": "es5",
"useTabs": false
}
And the following .eslintrc.js file:
module.exports = {
root: true,
env: {
node: true,
},
extends: [
'plugin:vue/recommended',
'#vue/prettier',
],
rules: {
'linebreak-style': ['error', 'unix'],
'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'vue/max-attributes-per-line': 'off',
'vue/html-self-closing': [
'error',
{
html: {
void: 'always',
normal: 'always',
component: 'always',
},
svg: 'always',
math: 'always',
},
],
},
plugins: ['vue'],
parserOptions: {
parser: 'babel-eslint',
},
}
But unfortunately, prettier thinks that
<template>
<header> Home </header>
</template>
Is prettier than
<template>
<header>
<a href="/" class="logo">
Home
</a>
</header>
</template>
How can I tell prettier to preserve my vertical whitespace in the Vue template?
Are there any rules similar to what I want?

Answer 1

Your only option(workaround) is using ignore.
Ex Js files.
// prettier-ignore
Ex Html files.
<!-- prettier-ignore -->
https://prettier.io/docs/en/ignore.html

Answer 2

Here's the list of rules for vue in eslint: https://vuejs.github.io/eslint-plugin-vue/rules/
But if you disable a rule it will be applied to all your code then.
Also, it seems that you can tell Prettier to ignore a block: https://prettier.io/docs/en/ignore.html#html
Besides, I would argue that this is more 'readable', but that's my point of view :)
<template>
<header>
Home
</header>
</template>