vs code vue template标签格式化

Question

vs-code中 html格式化时会把标签换行的写法并成一行。如
原

<el-dialog 
  title="提示" 
  :visible.sync="dialogVisible" 
  width="30%" 
  :before-close="handleClose">
</el-dialog>

格式化后

<el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
</el-dialog>

先请问下原来那种HTML写法叫什么？然后我该怎么设置才能格式化的时候不改变原先那种换行写法
现在格式化用的prettier，好像用beautify也会合并，设置是这样：

"vetur.format.defaultFormatter.html": "prettier",

格式化一行的格式我觉得不好看 求教

Answer 1

1. 原来那种HTML写法叫什么
   html wrap attributes
2. prettier不支持HTML属性换行美化，见GITHUB 讨论1，讨论2

3. 推荐使用 prettyhtml 来完成你说的格式化，VUE的插件 Vetur 内置了HTML,CSS,JS等等的格式化，默认使用内置的 prettyhtml 完成HTML的格式化，VSCODE配置如下：

     "vetur.format.defaultFormatterOptions": {
       "prettyhtml": {
         // 单行超过100个长度的时候开始换行
         "printWidth": 100,
         "tabWidth": 2,
         "useTabs": false,
         "singleQuote": false,
         "wrapAttributes": true,
         "sortAttributes": true,
       },
     },
     // 禁用vetur的JS格式化，交给eslint处理
     "vetur.format.defaultFormatter.js": "none",

4. Prettyhtml options 配置属性

格式化前：

格式化后（属性根据字母顺序排序）：

Answer 2

标记一下,同求此问题

Answer 3

标记一下，求另外一个问题：
大家vscode使用的是什么格式化插件，能格式化.vue文件的html，css，js，之前用过vue-beauty，但插件有bug，后来用vetur，无法格式化css。

Answer 4

标记一下，同求啊