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

我正在开发 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
}

感谢您的帮助。

stack overflow Autoformatting of *.vue files in VSCode not working
原文答案
author avatar

接受的答案

在你的 settings.json 中你应该有:

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

  2. "vetur.format.defaultFormatter.html": "js-beautify-html" 告诉vue如何格式化 <template>

3.完整配置:

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

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


答案:

作者头像

尝试了一段时间后,我可以解决问题。我修改的.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"
  }
}
作者头像

扩展@MiKr13 的答案,如果您使用的是 Volar 扩展

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