Bad formatting in Vue HTML

Question

I'm starting with Vue and I have configured ESLint and Prettier to format the code with my own style but it does not work as expected. When I want to print a variable in the template, the formatter in VS Code does something weird (I attach some code)

I expected to maintain this formatting for msg (it is a String)

<template>
    <div class="test">
        <ul>
            {{ msg }}
        </ul>
    </div>
</template>

But I got this (the formatter inserts 2 line breaks in the msg line)

<template>
    <div class="test">
        <ul>
            {{
                msg
            }}
        </ul>
    </div>
</template>

I use prettier (.prettierrc.json)

{
    "useTabs": true,
    "tabWidth": 2,
    "endOfLine": "lf",
    "arrowParens": "always",
    "semi": true,
    "singleQuote": true,
    "trailingComma": "none",
    "htmlWhitespaceSensitivity": "ignore"
}

and ESLint (.eslintrc.js)

module.exports = {
    env: {
        browser: true,
        es6: true,
        node: true
    },
    extends: ['plugin:vue/essential', 'standard', 'prettier'],
    globals: {
        Atomics: 'readonly',
        SharedArrayBuffer: 'readonly'
    },
    parserOptions: {
        ecmaVersion: '2020',
        sourceType: 'module'
    },
    plugins: ['vue']
};

I've tried to disable the formatting in VS Code but I cannot fix this.

Does anybody know how can I fix this "problem"?

Answer 1

For me is better to work only with ESlint , below you can find my configuration

module.exports = {
    env: {
        'browser': true,
        'es6': true,
        'node': true
    },
    parserOptions: {
        'parser': 'babel-eslint'
    },
    extends: [
        '@vue/standard',
        'plugin:vue/recommended'
    ],
    rules: {
        "vue/html-indent": ["error", 4, {
            "attribute": 1,
            "closeBracket": 0,
            "switchCase": 0,
            "ignores": []
        }],

        "vue/max-attributes-per-line": [2, {
            "singleline": 10,
            "multiline": {
              "max": 1,
              "allowFirstLine": false
            }
          }],
        'indent': ['error', 4],
        'vue/component-name-in-template-casing': ['error', 'kebab-case'],
        'vue/script-indent': [
            'error',
            4,
            { 'baseIndent': 1 }
        ],
        'space-before-function-paren': ['error', 'never'],
        'semi': [2, "never"],
        'vue/singleline-html-element-content-newline': 'off',
        'vue/multiline-html-element-content-newline': 'off'
    },
    overrides: [
        {
            'files': ['*.vue'],
            'rules': {
                'indent': 'off'
            }
        }
    ]
}

a lot of time prettier will brake your eslint format and you will run into problems, it is preferable to configure your program with one visual fixer. Try format you project with the eslint format that i gave you and the prettier disabled and tell me if the problem still exist!