How to customize HTML formatting with Vue 3 and Prettier? - eslint

Question

I have setup a new Vue 3 project with Eslint and Prettier config.
But when reformatting the HelloWorld.vue I see something ugly like this
<a
href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel"
rel="noopener"
target="_blank"
>babel</a
>
I want something more compact and still readable like this:
<a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" rel="noopener"
target="_blank">babel</a>
I searched for a while and also tried out things like "htmlWhitespaceSensitivity": "ignore" but nothing helps.
.eslintrs.js
module.exports = {
root: true,
env: {
node: true,
},
extends: [
'plugin:vue/vue3-essential',
'eslint:recommended',
'#vue/typescript/recommended',
'#vue/prettier',
'#vue/prettier/#typescript-eslint',
],
parserOptions: {
ecmaVersion: 2020,
},
rules: {
'no-console': process.env.NODE_ENV === 'production' ? ['error', {allow: ['warn', 'error']}] : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
},
overrides: [
{
files: ['**/__tests__/*.{j,t}s?(x)', '**/tests/unit/**/*.spec.{j,t}s?(x)'],
env: {
mocha: true,
},
},
],
}
.prettierrc
{
"trailingComma": "es5",
"tabWidth": 2,
"semi": false,
"singleQuote": true,
"bracketSpacing": false,
"printWidth": 120,
"jsxBracketSameLine": true,
"htmlWhitespaceSensitivity": "ignore"
}
My Solution
That I wouldn't name an answer, because it doesn't solve the problem with Prettier.
I don't use Prettier any more.
This is my current .eslintrc.js:
module.exports = {
root: true,
env: {
node: true,
},
extends: ['plugin:vue/vue3-essential', '#vue/standard', '#vue/typescript/recommended'],
parserOptions: {
ecmaVersion: 2020,
},
rules: {
'comma-dangle': ['error', 'always-multiline'],
'no-console': process.env.NODE_ENV === 'production' ? ['error', { allow: ['warn', 'error'] }] : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'quotes': ['error', 'single'],
'vue/html-quotes': ['error', 'double'],
},
overrides: [
{
files: ['**/__tests__/*.{j,t}s?(x)', '**/tests/unit/**/*.spec.{j,t}s?(x)'],
env: {
jest: true,
},
},
],
}
Together with IntelliJ, this configuration leads to code formatting that looks pretty for me...

Answer 1

That formatting is controlled by Prettier's printWidth option. Since you're seeing the wrapping occur even with a printWidth of 120, the problem is likely that the particular line that <a> is on exceeds 120 characters, including surrounding whitespace (as seen in this demo).
Solution 1: Increase printWidth globally
Increase the printWidth value in .prettierrc to cover that line's character length (probably not the best idea, as it defeats the purpose of the option in your entire project).
Solution 2: Disable Prettier for line
Disable all Prettier rules for that particular line in <template>:
<!-- eslint-disable-next-line prettier/prettier -->
babel
Solution 3: Increase printWidth for the component
Use a component-specific printWidth config in <script> that accommodates an acceptable length (currently no way to configure from <template>):
<script>
/* eslint "prettier/prettier": ["warn", { "printWidth": 200 }] */
</script>