参考来源

特别说明，这些内容非本人原创，只是网络上说法很多，而这种我亲测有效，分享给大家

感谢segmentfault网用户 Raymond 它拥有3.6k的点赞量

感谢segmentfault网用户 陌上寒 它拥有1.8k的点赞量

感谢segmentfault网用户 Jack_Chen 它拥有346的点赞量

最近写Vue代码，发现template里的html代码，会因为标签内的属性稍有超出就出现换行，看着挺难受的，毕竟屏幕还挺宽敞的。

1、直入主题

1.修改 “wrap_attributes”: “force-expand-multiline”

为”wrap_attributes”: “aligned-multiple”

2.添加 “vetur.format.defaultFormatter.html”: “js-beautify-html”,

Js中文网 – 全球前端挚爱的技术成长平台 www.javascriptC.com

Javascript中文网是以前端进阶资源教程分享为主的专业网站，包括：前端教程、JavaScript资讯、大厂面试题、typescript教程、程序人生、React.js源码解读、Vue3.js技术揭秘等，以帮助开发者成长为愿景的社区

2、具体操作

先描述一下我VSCODE的插件的情况，一个Vetur ,vue-beautify

打开设置 搜索 vetur.format.defaultFormatterOptions > 点击在settings.json中编辑

直接上图看下我修改后的

3、原理

1.关于vetur.format.defaultFormatter.html

2. 关于vetur.format.defaultFormatterOptions

4、如果大家有更好的方式可以留言交流~蟹蟹

作者：raotao

链接：https://juejin.im/post/6884850654544658446

原文标题：解决在写Vue时，格式化代码 属性自动换行的问题 - Js中文网 · 前端进阶资源教程