vue.js - 如何在保存时自动设置 vscode 格式的 Vue 模板？

Question

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

这里是：

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

Answer 1

在您的 settings.json 中，您应该有：

• editor.formatOnSave: true
• [vue]: {"editor.defaultFormatter": "octref.vetur"}如果您为文件注册了多个格式化程序，则.vue需要指定使用哪一个（否则保存时格式化将不知道要使用哪一个，并且默认不执行任何操作。这将选择“Vetur”作为默认值。
• "vetur.format.defaultFormatter.html": "js-beautify-html"告诉 Vetur 如何格式化<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，那么这意味着您为“.vue”文件注册了多个格式化程序。

Answer 2

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 3

为了使用 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做了伎俩。这导致在脚本部分将单引号转换为双引号的问题，因此我也添加了更漂亮的单引号配置。

Answer 4

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

我的模板有这样的lang属性集<template lang="">。删除属性后，自动格式化再次开始工作。