VSCode中使用vetur插件格式化vue文件时，js代码会被添加上分号且单引号会转变为双引号

Question

由于vetur插件报错找不到某某组件，于是卸载重装。 装回后插件不再报错，但是格式化vue代码时，会执行两条多余的规则（与未重装之前比较）：

• 自动为js代码加上分号结束符
• 自动将单引号变换为双引号

由于在配置（setting.json）中未找到相应的配置，故很疑惑，应如何取消掉以上两条规则？

---

2018/11/29 更新

//VSCODE扩展当前时间的最新版
vscode version： 1.29.1
prettier version: 1.7.2
vetur version: 0.14.2

也会出现上述问题，解决办法：修改 User Settings

  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      // force-aligned | force-expand-multiline
      "wrap_attributes": "force-aligned"
    },
    "prettyhtml": {
      "printWidth": 100,
      "singleQuote": false,
      "wrapAttributes": false,
      "sortAttributes": true
    },
    // --- 解决问题 ---
    "prettier": {
        "semi": false,
        "singleQuote": true
    }
    // --- 解决问题 ---
  },

一定要在vutur.defaultFormatterOptions参数中设置，单独修改prettier扩展的设置是无法解决这个问题的，因为perttier默认忽略了vue文件（事实上从忽略列表移除vue也不能解决这个问题）。

Answer 1

这是因为在VSCode1.7.2中替换了内置格式化插件。解决办法是在VScode设置(setting.json)中，配置如下规则

{
   "prettier.singleQuote": true,
   "prettier.semi": false,
   "vetur.format.defaultFormatter.html": "js-beautify-html",
   "vetur.format.defaultFormatterOptions": {
      "wrap_attributes": "force-aligned"
    }
}

即可解决题主问题。详情见 vuejs/vetur#476

Answer 2

"vetur.format.defaultFormatter.js": "vscode-typescript",
"vetur.format.defaultFormatter.html": "js-beautify-html"