当前位置：首页 > news >正文

vscode设置vue标签不换行

news 2025/5/22 13:41:36

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