前情提要

问题：

大家一定遇到vsCode里编辑Vue文件的时候，默认的Vetur插件会把文件格式的太长太长了，甚至每个属性都换一行，导致上下来回翻找代码太麻烦了。

诉求：

我不要这样痛苦，哪怕很长不换行也行。我就喜欢标签内写一堆的低效方式，紧凑就行，哈哈。

一、设置js-beautify-html

1. 打开设置
2. 扩展
3. Vetur
4. 多滚几行，在"Format>Default Formatter:HTML"这里，下拉选择js-beautify-html

二、编辑“Vetur的setting.json”

1. 继续下滚刚才设置了js-beautufy-html的区域，因为这里还是Vetur的设置地界
2. 看到“Format:Default Formatter Options”下有“在settings.json中编辑”，点进去
   
3. 修改三处，“editor.wordWarp”设置成"off"的好处是，你会发现vue其实有两部分组成，一部分是vue的，一部分是我们写的html，如果不改这里，你会发现只有vue的不换行，但是html部分还是在换
4. 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
        }
    }
}