Question

我已经修改了settings.json文件，但是它不起作用。

这里是：

{
    "eslint.autoFixOnSave": true,
    "vetur.format.defaultFormatter.html":"js-beautify-html"
}

Answer 1

为了使用 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 2

在你的 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 注册的格式化程序。

Answer 3

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

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

在保存时启用eslint修复

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

Answer 4

我的回答与问题松散耦合，但由于这个问题是谷歌搜索“vetur auto format not working”的最佳结果，我想为此添加一个可能的解决方案。

我的模板设置了 lang 属性，如下所示 <template lang="">。删除属性后，自动格式化又开始工作了。

如何在保存时自动设置vscode格式Vue模板？

4 个答案: