11

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

1
  • Do you have vetur.format.enable: true in config?
    – Styx
    Aug 21, 2019 at 16:12

4 Answers 4

22

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.

3
  • 1
    this worked best for me, thanks for the answer.
    – adammtlx
    Apr 8, 2021 at 14:46
  • 1
    This actually works, after a loooong search, thank you. Apr 15, 2021 at 0:08
  • simple and great. thx. Nov 17, 2021 at 13:55
9
  1. use plugin:vue/recommended replace plugin:vue/essential
// .eslintrc.js
module.exports = {
  extends: [
    'plugin:vue/recommended',
    '@vue/standard'
  ]
}
  1. 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
}
6

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.

0

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.

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.