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"
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".