It appears that prettier is not formatting the code as desired. Here is my current ESLint configuration:
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/vue3-recommended",
"eslint:recommended"
],
"parserOptions": {
"sourceType": "module"
},
"rules": {
"vue/no-mutating-props": [
"error",
{
"shallowOnly": true
}
],
"vue/html-self-closing": [
"error",
{
"html": {
"void": "always"
}
}
]
}
},
Additionally, my .prettierrc includes this rule
{
"printWidth": 120,
"semi": true,
"singleQuote": true,
"singleAttributePerLine": true,
"tabWidth": 2,
"overrides": [
{
"files": "*.scss",
"options": {
"singleQuote": false
}
}
]
}
Despite this configuration, when I run prettier, the code is formatted differently:
<template>
<pre
ref="board"
class="border rounded w-100 text-white bg-dark p-1"
style="height: 10rem; resize: vertical"
>{{ robotActionData }}</pre
>
</template>
This results in warnings for line breaks and indentation mismatches. I expect prettier to format the code like this:
<template>
<pre
ref="board"
class="border rounded w-100 text-white bg-dark p-1"
style="height: 10rem; resize: vertical"
>
{{ robotActionData }}
</pre>
</template>
How can I adjust prettier to achieve this formatting?