vscode下编辑vue文件属性不换行配置,有需要的直接复制用!
哎!难受!我搞不懂为什么 vscode 默认 html 的 dom 属性是换行的,不知道这个默认值的设计是怎么想的。难道是我太郊区了吗?算了算了,反正可以改配置,记录一下!我是受不了属性换行的这种格式化写法,难受得到一批!
修正后格式化效果
参考配置
需要你已经安装了 vetur 插件,基本现在拿 vscode 搞 vue 全家桶的没又不装这个的,应该都知道是啥,我就不配图了!
如下配置是 不换行+tab4 个空格,我个人不太喜欢 2 个空格(默认),太少了!
{
"vetur.format.defaultFormatter.html": "js-beautify-html",
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
"wrap_line_length": 999,
"wrap_attributes": "auto",
"end_with_newline": false
}
},
"vetur.format.options.tabSize": 4
}
补充资料
如果你平时还有使用 vscode 写传统 html 的习惯,也想保持普通 html 的 dom 属性不换行,那么可以装一个 `
并复制如下配置即可保证 html dom 属性不换行,且 html/css/js/json 等常见格式格式化后缩进是 4 个字符!
{
"[vue]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[html]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[css]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[jsonc]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"prettier.printWidth": 999,
"prettier.tabWidth": 4,
"prettier.proseWrap": "never",
"prettier.trailingComma": "none",
"editor.quickSuggestions": {
"strings": true
}
}