VSCode 中的 *.vue 文件自动格式化不起作用

Question

我正在 VSCode 1.58.2 中进行 Vue.js 项目。

一切顺利；但是 *.vue 文件在保存时不会自动格式化。

我的.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
}

感谢您的帮助。

Answer 1

在你的 settings.json 你应该有：

[vue]: {"editor.defaultFormatter": "octref.vetur"}
"vetur.format.defaultFormatter.html": "js-beautify-html" 告诉 vue 如何格式化 <template>
完整配置：

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

注意：如果 .vue 文件有多个格式化程序，则必须指定要使用的格式化程序，否则保存时格式将不知道使用哪一个，并且默认不执行任何操作。这将 select “Vetur” 作为默认值。

Answer 2

经过一段时间的尝试，我可以解决问题。我的修改 .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"
  }
}

VSCode 中的 *.vue 文件自动格式化不起作用

Autoformatting of *.vue files in VSCode not working

vue.js

visual-studio-code

vscode-settings