VSCode格式化html标签代码

简介： VSCode问题总结

写vue代码的时候，如果标签上有很多属性，vscode则会格式化然后自动换行，每个属性占一行，这种代码行数会变得太多，但是不换行的话，一行代码占用位置又太长，不利于开发，于是想配置一下自动换行的长度以实现我的需求。

运行菜单 File 中 Preferences 菜单中选择 Settings 项，点击以下图片 中的按钮，打开settings.json编辑

通过配置每行的长度，超出长度时则会换行，具体配置如下：

{
    "vetur.validation.template": false,
    // 解决Vue换行问题
    "vetur.format.defaultFormatter.html": "js-beautify-html",
    "vetur.format.defaultFormatter.js": "vscode-typ=script",
    "vetur.format.defaultFormatterOptions": {
        "js-beautify-html": {
            "wrap_attributes": "auto",
            "wrap_line_length": 120 // 超过120的部分换行
        },
        "prettyhtml": {
            "printWidth": 100,
            "singleQuote": false,
            "wrapAttributes": false,
            "sortAttributes": false
        }
    },
}