vscode 设置vetur格式化文档时 属性不自动换行,一行显示

目录

• vscode 设置格式化

回到顶部

vscode 设置格式化

属性不自动换行、 js 代码不自动换行（vue代码 data中定义的数据不自动换行

 

找到已安装的vetur 的格式化工具

 

 

 添加如下代码：

 "vetur.format.defaultFormatterOptions": {
    
        "js-beautify-html": {
            "wrap_line_length": 900, // 数值越大，一行放的属性越多
            "wrap_attributes": "auto",
            "end_with_newline": false

        },
        "prettyhtml": {
            "printWidth": 100,
            "singleQuote": false,
            "wrapAttributes": false,
            "sortAttributes": false
        }
    },
    "vetur.format.defaultFormatter.html": "js-beautify-html",
    "vetur.format.defaultFormatter.js": "vscode-typescript",

把原来的配置注释掉，添加上面的配置代码，完整配置文件如下：

{
    "editor.fontSize": 18,
    "[javascript]": {
        "editor.defaultFormatter": "vscode.typescript-language-features"
    },
    "terminal.integrated.enableMultiLinePasteWarning": false,
    "[vue]": {
        "editor.defaultFormatter": "octref.vetur"
    },
    // "vetur.format.defaultFormatterOptions": {


    //     "js-beautify-html": {
    //         // "wrap_attributes": "force-expand-multiline"
    //         // "wrap_attributes": ""
    //     },
    //     "prettyhtml": {
    //         "printWidth": 140,
    //         "singleQuote": false,
    //         "wrapAttributes": false,
    //         "sortAttributes": false
    //     }
    // }
    "vetur.format.defaultFormatterOptions": {
    
        "js-beautify-html": {
            "wrap_line_length": 900, // 数值越大，一行放的属性越多
            "wrap_attributes": "auto",
            "end_with_newline": false

        },
        "prettyhtml": {
            "printWidth": 100,
            "singleQuote": false,
            "wrapAttributes": false,
            "sortAttributes": false
        }
    },
    "vetur.format.defaultFormatter.html": "js-beautify-html",
    "vetur.format.defaultFormatter.js": "vscode-typescript",

}