先介绍下背景：最近，准备开始搞新的项目，是基于Vue的后台管理系统。
然后，在开发的时候，发现我的Vue代码中的模板部分总是按照属性自动换行，试了网上很多方式都搞不定，而我又难以接受这种样式，因此决心非给他整明白不可。
这是让我恼火的样式
这是我最终的效果
从我接手这台电脑的时候，我的vscode编辑器是已经安装了eslint,prettier,vetur等一些“必备的”插件。而根据我对这些插件的一点点了解，我知道这三个插件都有格式化代码的作用，只是出于对这几个插件认知不够，先放着。
接着，根据网上的一些前辈经验，我了解到，vetur 有一些属性可以格式template模板代码，vetur.format.defaultFormatterOptions，vetur.format.defaultFormatter.html，但参考设置了之后，发现效果不对，怀疑是 prettier冲突导致，所以我选择禁用prettier后在测试。果然，禁用之后，虽然效果还是不对，但已经可以通过属性wrap_attributes控制了，查看wrap_attributes源码可以发现，有些值已经无效了。所以，万一你设置的值没有效果，也许是因为插件不在接受了。经过测试，这里我发下我的配置项setting.json
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
"wrap_attributes": "auto"
},
},
"vetur.format.defaultFormatter.html": "js-beautify-html",
"vetur.format.defaultFormatter.js": "vscode-typescript",
// 控制换行的方式，取可视区宽度和编辑器设置折行列中较小值
"editor.wordWrap": "bounded",
// 设置编辑器的换行最小列数
"editor.wordWrapColumn": 120,
// 默认的格式化程序
"[vue]": {
"editor.defaultFormatter": "octref.vetur"
},
复制代码结论：
prettier插件已经不需要了，可以卸载了- 设置好编辑器的换行方式和最小换行列数
- 设置
vuter的格式化属性
