vscode设置vue属性多了格式化不换行

最新推荐文章于 2024-01-09 10:55:26 发布

原创最新推荐文章于 2024-01-09 10:55:26 发布 · 1.1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js #前端

针对Vue文件在VSCode中格式化时属性自动换行的问题，可以通过调整设置来实现紧凑显示。首先在文件>首选项>设置中搜索vetur.format.defaultFormatter.html，选择js-beautify-html插件。接着在setting.json中添加相关配置，如wrap_attributes:auto，以保持属性不换行。这样可以优化代码的视觉效果。

问题描述：

vue有很多属性的时候，vscode格式化会自动换行，每个属性占一行，看起来很难受

解决方法：

首先打开vscode的》文件》首选项》设置

搜索vetur.format.defaultFormatter.html ，下面有个下拉框，选择js-beautify-html (PS:需要你先安装这个插件)

点击左侧三个点选择打开setting.json，加入如下代码，然后保存

"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
"wrap_attributes": "auto" 
},
"prettyhtml": {
"printWidth": 100,
"singleQuote": false,
"wrapAttributes": false,
"sortAttributes": false
}
}