如何在保存時自動設置 vscode 格式的 Vue 模板？

Question

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

這里是：

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

在你的 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"
    }  
}

注意：當您使用Format Document操作並獲得對話框There are multiple formatters for 'Vue' files. Select a default formatter to continue您知道有多個格式化程序為.vue注冊There are multiple formatters for 'Vue' files. Select a default formatter to continue There are multiple formatters for 'Vue' files. Select a default formatter to continue 。

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對我"editor.formatOnSave": true 。 這導致在腳本部分將單引號轉換為雙引號的問題，因此我也添加了更漂亮的 singleQuote 配置。

Answer 4

我的答案只是松散耦合到這個問題，但由於這個問題是谷歌搜索“vetur auto format not working”的最佳結果，我想為此添加一個可能的解決方案。

我的模板的lang屬性設置如下<template lang=""> 。 刪除屬性后，自動格式化再次開始工作。