vsCode编辑vue文件内标签属性换行的问题
前情提要
问题:
大家一定遇到vsCode里编辑Vue文件的时候,默认的Vetur插件会把文件格式的太长太长了,甚至每个属性都换一行,导致上下来回翻找代码太麻烦了。
诉求:
我不要这样痛苦,哪怕很长不换行也行。我就喜欢标签内写一堆的低效方式,紧凑就行,哈哈。
一、设置js-beautify-html
- 打开设置
- 扩展
- Vetur
- 多滚几行,在"Format>Default Formatter:HTML"这里,下拉选择js-beautify-html
二、编辑“Vetur的setting.json”
- 继续下滚刚才设置了js-beautufy-html的区域,因为这里还是Vetur的设置地界
- 看到“Format:Default Formatter Options”下有“在settings.json中编辑”,点进去
- 修改三处,“editor.wordWarp”设置成"off"的好处是,你会发现vue其实有两部分组成,一部分是vue的,一部分是我们写的html,如果不改这里,你会发现只有vue的不换行,但是html部分还是在换
- warp_attributes改为"aligned-multiple",我看其他人改的auto,哈哈,大家随性试一下,我用的前一个
三、setting.json的内容贴出来,方便大家复制
怎么样,我不错吧,哈哈,因为前面是图片,方便圈出来,这里方便大家复制。说实话,Vuter的换行弄的每次上下翻找代码太长了。
{
"editor.wordWrap": "off",
"vetur.format.defaultFormatter.scss": "none",
"vetur.format.defaultFormatter.html": "js-beautify-html",
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
"wrap_attributes": "aligned-multiple"
},
"prettyhtml": {
"printWidth": 100,
"singleQuote": false,
"wrapAttributes": false,
"sortAttributes": false
}
}
}