How to set vscode format Vue template automatically on save?

Question

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

Answer 1

1. 使用plugin:vue/recommended替换plugin:vue/essential

// .eslintrc.js
module.exports = {
  extends: [
    'plugin:vue/recommended',
    '@vue/standard'
  ]
}

2. 在保存时启用 eslint 修复

// .vscode/settings.json
{
  "eslint.validate": [
    "javascript",
    "html",
    "vue"
  ],
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
    "source.fixAll.stylelint": true
  },
  "vetur.validation.template": false
}

Answer 2

为了使用 ESLint 和 Vetur 的组合来自动保存模板，我使用了以下 VS Code 设置组合：

    {
        "eslint.validate": [
            "vue",
            "html",
            "javascript",
            "typescript"
        ],
        "editor.codeActionsOnSave": {
            "source.fixAll.eslint": true
        },
        "editor.formatOnSave": true,
        "vetur.format.defaultFormatterOptions": {
            "prettier": {
              "singleQuote": true
            }
        }
    }

这"editor.formatOnSave": true对我来说是成功的。这导致在脚本部分将单引号转换为双引号的问题，因此我还添加了更漂亮的 singleQuote 配置。

Answer 3

在你的 settings.json 你应该有：

• editor.formatOnSave: true
• [vue]: {"editor.defaultFormatter": "octref.vetur"}如果您为.vue文件注册了多个格式化程序，您需要指定使用哪个格式化程序（否则保存时的格式将不知道使用哪个，并且默认不执行任何操作。这将选择“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当您使用Format Document操作并获得对话框时，会注册多个格式化程序There are multiple formatters for 'Vue' files. Select a default formatter to continue。