I've modified the settings.json
file, but it doesn't work.
Here it is:
{
"eslint.autoFixOnSave": true,
"vetur.format.defaultFormatter.html":"js-beautify-html"
}
In your settings.json you should have:
editor.formatOnSave: true
[vue]: {"editor.defaultFormatter": "octref.vetur"}
if you have several formatters registered for .vue
files you need to specify which one to use (otherwise format on save will not know which one to use and it will default to do nothing. This will select "Vetur" as the default."vetur.format.defaultFormatter.html": "js-beautify-html"
to tell Vetur how to format the part inside <template>
tags:{
"editor.formatOnSave": true,
"vetur.format.defaultFormatter.html": "js-beautify-html",
"[vue]": {
"editor.defaultFormatter": "octref.vetur"
}
}
Note: How do you know that there are several formatters registered for .vue
? If when you use the Format Document
action you get the dialog There are multiple formatters for 'Vue' files. Select a default formatter to continue
then it means that you have more that one formatter registed for '.vue' files.
plugin:vue/recommended
replace plugin:vue/essential
// .eslintrc.js
module.exports = {
extends: [
'plugin:vue/recommended',
'@vue/standard'
]
}
// .vscode/settings.json
{
"eslint.validate": [
"javascript",
"html",
"vue"
],
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true,
"source.fixAll.stylelint": true
},
"vetur.validation.template": false
}
To get the auto-save of templates to work using the combination of ESLint and Vetur, I used the following combination of VS Code settings:
{
"eslint.validate": [
"vue",
"html",
"javascript",
"typescript"
],
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"editor.formatOnSave": true,
"vetur.format.defaultFormatterOptions": {
"prettier": {
"singleQuote": true
}
}
}
The "editor.formatOnSave": true
did the trick for me. This lead to the problem of converting single quotes to double quotes in the script section, therefore I added the prettier singleQuote config as well.
My answer is just loosely coupled to the question but as this question is the top result for googling "vetur auto format not working" I would like to add a possible solution to that.
My template had the lang
attribute set like this <template lang="">
. After removing the attribute auto formatting started to work again.
vetur.format.enable: true
in config?