vscode vue格式化 标签属性换行 或 控件属性一行太长问题

大家在使用vs code开发vue项目的时候，格式化代码是不是总是会碰到标签属性，每一个都换行的问题，代码看着很乱 例如：

又或者参考网上的配置后，发现标签属性不换行了，比以前好看些，但是属性一多，都在一行，导致代码也不方便阅读 下面就教大家配置一下vscode

1. 首先打开 文件 > 首选项 > 设置

2. 然后找到选项 用户 > 扩展 > Vetur ，如果没有Vetur，主要自行安装下Vetur拓展，看到右侧内容，点最下面的settings.json

添加如下自定义配置，如果和原有属性重复冲突，可以根据情况，将原始属性注释

    "vetur.format.defaultFormatter.html": "js-beautify-html",
    "editor.wordWrap": "off",
    "vetur.format.defaultFormatter.scss": "none",
    "vetur.format.defaultFormatterOptions": {
        "js-beautify-html": {
            "wrap_line_length": 150, // 数值越大，一行放的属性越多，根据自己屏幕宽度自行定义
            "wrap_attributes": "auto",
            "end_with_newline": false
        },
        "prettyhtml": {
            "printWidth": 100,
            "singleQuote": false,// 格式化时使用单引号
            "wrapAttributes": false,
            "sortAttributes": false
        }
    },