vue.jsvisual-studio-codeeslintvetur

When using vue/essential it does not format in template


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"

Solution

  • 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://v2.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".