vscode 格式化 vue 代码

格式化 HTML：即 vue（template）

1. 安装 Vetur 拓展

2. 配置 setting.json

1. 打开 [文件] -> [首选项] -> [设置] -> [拓展] -> [Vetur]
2. vsCode 跟新过后设置变成下拉选择的方式来配置拓展，但是可以点击右上方的···按钮，选择选择打开 setting.json，即可添加用户设置
3. 配置 template 格式化

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

4. 不喜欢标签内属性换行，可以设置为：

"vetur.format.defaultFormatter.html": "js-beautify-html",
"vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
        "wrap_attributes": "auto"
    },
    "prettyhtml": {
        "wrapAttributes": false,
        "printWidth": 100,
        "singleQuote": false,
        "sortAttributes": false
    }
},

5. 标签内属性换行，且对齐， 可以设置为：

"vetur.format.defaultFormatter.html": "js-beautify-html",
"vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
        "wrap_attributes": "force-aligned"
        // #vue组件中html代码格式化样式
    }
},