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><a href="/" class="logo"> Home </a></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?
