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

由于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也不能解决这个问题)。
阅读 20.3k
评论
    2 个回答

    这是因为在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

    评论 赞赏
      wmui
      • 1.7k
      "vetur.format.defaultFormatter.js": "vscode-typescript",
      "vetur.format.defaultFormatter.html": "js-beautify-html"
      评论 赞赏
        撰写回答

        登录后参与交流、获取后续更新提醒