When using vue/essential it does not format in template

Question

I'm trying to figure why my setup does not format within <template>code</template>. To set the stage. I have been using Vue cli 3, template eslint + standard, I use VS Code and I got Vetur and eslint as plugins.

I would like to use the @vue/essential config but as stated it does not format in template, only js. Now switching to @vue/recommended formats in template. What is the difference there?

working config

'extends': [
    'plugin:vue/essential',
    'standard'
  ],

Not working

.eslintrc.js

'extends': [
    'plugin:vue/essential',
    'standard'
  ],

Other configs

vscode

"eslint.workingDirectories": [
        ".eslintrc.js"
    ],
    "eslint.enable": true,
    "eslint.run": "onSave",
    "eslint.validate": [
        {
            "language": "vue",
            "autoFix": true
        },
        {
            "language": "html",
            "autoFix": true
        },
        {
            "language": "javascript",
            "autoFix": true
        }
    ],
    "eslint.options": {
        "extensions": [
          ".js",
          ".vue"
        ]
    },
    "eslint.alwaysShowStatus": true,
    "eslint.autoFixOnSave": true,
    "editor.formatOnSave": false,
    "vetur.validation.template": false,
    "vetur.format.defaultFormatter.js": "prettier",
    "vetur.format.defaultFormatter.css": "prettier"

mazipan mazipan · Accepted Answer · 2019-02-16T03:41:39

ESLint Plugin Vue separate it's rule into 4 categories, each category have it's own rule that you can read further in official documentation page here https://vuejs.org/v2/style-guide/. . Since you are using vue/essential (lowest category), it's have not rules for formatting code in template with good. But it provide many essential rule that you need to follow, like v-bind:key usage, unused component, etc. . If you want better format, you need to raise your category into "recommended" or the highest one "use with caution".

When using vue/essential it does not format in template

1 Answers