vscode设置vue标签不换行

news2024/11/16 0:54:51

1、打开文件 --> 首选项 --> 设置

在这里插入图片描述

2、在设置里搜索 vetur.format，项较多，向下滑动找到在 setting.json 中编辑按钮点进去

在这里插入图片描述

3、修改配置文件vetur.format.defaultFormatterOptions

{
    "files.autoSave": "afterDelay",
    "security.workspace.trust.untrustedFiles": "open",
    "git.enableSmartCommit": true,
    "diffEditor.ignoreTrimWhitespace": false,
    "[vue]": {
        "editor.defaultFormatter": "octref.vetur"
    },
    "explorer.confirmPasteNative": false,
    "vetur.format.defaultFormatterOptions": {
    


        "js-beautify-html": {
            // "wrap_attributes": "force-expand-multiline"
            "wrap_attributes": "force-expand-multiline"
        },
        "prettyhtml": {
            "printWidth": 100,
            "singleQuote": false,
            "wrapAttributes": false,
            "sortAttributes": false
        }
    },
      // "vetur.format.defaultFormatterOptions": {
    //     "js-beautify-html": {
    //         // "wrap_attributes":"auto" 仅在超出行长度时才对属性进行换行。
    //         // "wrap_attributes":"force" 对除第一个属性外的其他每个属性进行换行。
    //         // "wrap_attributes":"force-aligned" 对除第一个属性外的其他每个属性进行换行，并保持对齐。
    //         // "wrap_attributes":"force-expand-multiline" 对每个属性进行换行。
    //         // "wrap_attributes":"aligned-multiple" 当超出折行长度时，将属性进行垂直对齐。
    //         "wrap_attributes": "auto"
    //     },
    //     "prettyhtml": {
    //         "printWidth": 100,
    //         "singleQuote": false,
    //         "wrapAttributes": false,
    //         "sortAttributes": false
    //     }
    // },
    "vetur.format.defaultFormatter.html": "js-beautify-html"
}