ESLint + Prettier warning in Vuejs - vue.js

Question

I have installed ESLint + Prettier in my Vuejs project. Saving files causes the prettier to throw the following warning. Much appreciated if someone could explain what causes this warning.
"Replace `·:to=\"{·name:·'About',·query:·{·lang:·$i18n.locale·}·}\"·tag=\"button\">About</router-link` with `⏎········:to=\"{·name:·'About',·query:·{·lang:·$i18n.locale·}·}\"⏎········tag=\"button\"⏎········>About</router-link⏎······`"
The vuejs file:
<template>
<div id="app">
<div id="nav">
<router-link to="/">Home</router-link>|
<router-link
:to="{ name: 'About', query: { lang: $i18n.locale } }"
tag="button"
>
About
</router-link>
<p>{{ $route.query.lang }}</p>
<h2>{{ $i18n.locale }}</h2>
</div>
<router-view />
</div>
</template>
.prettierrc.js:
module.exports = {
singleQuote: true,
semi: false
}
.eslintrc.js:
module.exports = {
root: true,
env: {
node: true
},
extends: ['plugin:vue/essential', '#vue/prettier'],
parserOptions: {
parser: 'babel-eslint'
},
rules: {
'prettier/prettier': ['error']
},
overrides: [
{
files: [
'**/__tests__/*.{j,t}s?(x)',
'**/tests/unit/**/*.spec.{j,t}s?(x)'
],
env: {
jest: true
}
}
]
}

Answer 1

The line-wrapping you're observing is done by Prettier's core formatting. You can avoid it by setting the max line width (printWidth) to something longer than 80.
Configure Prettier with:
// <root>/.prettierrc.js
module.exports = {
printWidth: 200, // max number of characters per line (default: 80)
}
And configure ESLint's prettier/prettier options:
// <root>/.eslintrc.js
const prettierOptions = require("./prettierrc");
module.exports = {
rules: {
"prettier/prettier": ["error", prettierOptions],
},
};