Autoformatting of *.vue files in VSCode not working

user_3301970 0
Viewed 1337

I am working on a Vue.js project in VSCode 1.58.2.

Everything works smoothly; however *.vue files are not autoformatted on save.

My .vscode/settings.json

{
  "editor.formatOnPaste": true,
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll": true
  },
  "editor.defaultFormatter": "octref.vetur",
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
  "javascript.format.placeOpenBraceOnNewLineForControlBlocks": false,
  "javascript.format.placeOpenBraceOnNewLineForFunctions": false,
  "typescript.format.insertSpaceBeforeFunctionParenthesis": true,
  "typescript.format.placeOpenBraceOnNewLineForControlBlocks": false,
  "typescript.format.placeOpenBraceOnNewLineForFunctions": false
}

Thanks for helping.

vscode-settings vue.js visual-studio-code
2 Answers

In your settings.json you should have:

  1. [vue]: {"editor.defaultFormatter": "octref.vetur"}

  2. "vetur.format.defaultFormatter.html": "js-beautify-html" to tell vue how to format the <template>

  3. Full config:

{
    "editor.formatOnSave": true,
    "vetur.format.defaultFormatter.html": "js-beautify-html",
    "[vue]": {
        "editor.defaultFormatter": "octref.vetur"
    }  
}

NOTE: If you have multiple formatters for .vue files you'll have 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.

user_93608850

After trying a while I could solve the problem. My modified .vscode/settings.json:

{
  "editor.formatOnPaste": true,
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll": true
  },
  "editor.defaultFormatter": "octref.vetur",
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
  "javascript.format.placeOpenBraceOnNewLineForControlBlocks": false,
  "javascript.format.placeOpenBraceOnNewLineForFunctions": false,
  "typescript.format.insertSpaceBeforeFunctionParenthesis": true,
  "typescript.format.placeOpenBraceOnNewLineForControlBlocks": false,
  "typescript.format.placeOpenBraceOnNewLineForFunctions": false,
  "[vue]": {
    "editor.defaultFormatter": "octref.vetur"
  }
}
user_33019700
Related