vscode设置vue标签不换行

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"
}

4、找到 Vetur › Format › Default Formatter: HTML 项

在下拉框中选择 js-beautify-html 项
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值