CODEWITHSUNDEEP
vue.jsvisual-studio-codevetur
gwtjs
gwtjs

Reputation: 121

How to set vscode format Vue template automatically on save?

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

Upvotes: 12

Views: 21251

Answers (5)

Volodya Martynson
Volodya Martynson

Reputation: 1

In my case, this was the only option that allowed me to enable “format on save” for Vue files.

Here is my ⁠settings.json configuration:

// Both "modifications" and "modificationIfAvailable" do not work
"editor.formatOnSaveMode": "file",

Upvotes: 0

RubenLaguna
RubenLaguna

Reputation: 24816

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.

Upvotes: 25

jeti
jeti

Reputation: 1908

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.

Upvotes: 0

christina
christina

Reputation: 111

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.

Upvotes: 6

F-loat
F-loat

Reputation: 124

  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
}

Upvotes: 9

Related Questions