How to set vscode format Vue template automatically on save?

Question

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

Answer 1

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.

Answer 2

1. use plugin:vue/recommended replace plugin:vue/essential

// .eslintrc.js
module.exports = {
  extends: [
    'plugin:vue/recommended',
    '@vue/standard'
  ]
}

2. enable eslint fix on save

// .vscode/settings.json
{
  "eslint.validate": [
    "javascript",
    "html",
    "vue"
  ],
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
    "source.fixAll.stylelint": true
  },
  "vetur.validation.template": false
}