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也不能解决这个问题)。
阅读 34k
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

"vetur.format.defaultFormatter.js": "vscode-typescript",
"vetur.format.defaultFormatter.html": "js-beautify-html"
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
logo
Microsoft
子站问答
访问
宣传栏