vscode下vue多属性换行设置

如何在vscode 下格式化 vue 代码,让其看起来更加漂亮呢?
在vue的官方文档中,有这么个最佳实践:


示例如下:

Bad:

<img src="https://kelvin.mbioq.com/usr/themes/ob/img/logo2.svg" alt="Vue Logo">
<MyComponent foo="aa" bar="bb" baz="cc"/>

Good:

<img
  src="https://kelvin.mbioq.com/usr/themes/ob/img/logo2.svg"
  alt="Vue Logo"
>
<MyComponent
  foo="aa"
  bar="bb"
  baz="cc"
/>

但是在vscode中,进行格式化,却得不到官方指导的效果,经过多方查找,终于找到解决方案.

github issue#561

具体配置如下:

"vetur.format.defaultFormatter.html": "js-beautify-html",
"vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      "wrap_attributes": "force-aligned"
    }
},

ok,大功告成

添加新评论