最近在学习一些前端知识，开始使用了Visual Studio Code这款ide。但是代码的显示格式实在受不了。一个元素会格式化好多行。

例如

<el-button 
    type="primary" 
    size="medium" 
    @click="save"
    >保存</el-button>

这看起来简直难受，我想要的是这个样子：

<el-button type="primary" size="medium" @click="save">保存</el-button>

解决办法

• 安装Vetur
• 设置-搜索vetur-在setting.json中编辑增加代码

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

结论

期间自己瞎猫抓耗子，Vetur,prettier反复安装卸载。即便是现在这样也依然会出现一些元素会换行 比如

<el-switch
    v-model="headSwitches[scope.$index]"
    @change="changeHide(scope.$index)"
></el-switch>

不过比起之前也算舒服多了。如果有前端大佬有更好解决方法，欢迎指教。

后续

刚刚又在网上搜了一下找到了更好的配置方式。

• 其他不变，设置-搜索vetur-在setting.json中编辑增加代码

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