VSCode格式化html标签代码

简介: VSCode问题总结

写vue代码的时候,如果标签上有很多属性,vscode则会格式化然后自动换行,每个属性占一行,这种代码行数会变得太多,但是不换行的话,一行代码占用位置又太长,不利于开发,于是想配置一下自动换行的长度以实现我的需求。


运行菜单 FilePreferences菜单中选择 Settings项,点击以下图片 中的按钮,打开settings.json编辑

image.png

通过配置每行的长度,超出长度时则会换行,具体配置如下:

{
"vetur.validation.template": false,
// 解决Vue换行问题"vetur.format.defaultFormatter.html": "js-beautify-html",
"vetur.format.defaultFormatter.js": "vscode-typ=script",
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
"wrap_attributes": "auto",
"wrap_line_length": 120// 超过120的部分换行        },
"prettyhtml": {
"printWidth": 100,
"singleQuote": false,
"wrapAttributes": false,
"sortAttributes": false        }
    },
}
目录
相关文章
|
7天前
|
编解码 前端开发
编写代码中常见问题汇总(html和css)
text-indent用于首行缩进,line-height与height相同实现垂直居中;vertical-align:middle用于行内元素居中;text-align:center做水平居中;list-style:none清除列表符号;overflow:hidden隐藏溢出;background-repeat:no-repeat阻止平铺;float:left实现横排;相对定位父元素,绝对定位子元素;box-sizing调整盒子模型;用边框或overflow解决盒子塌陷;
29 5
|
11天前
|
存储 JavaScript 前端开发
HTML标签data-属性的作用
HTML标签data-属性的作用
|
10天前
|
移动开发 HTML5 前端开发
【网页搭建基石】:揭秘HTML标签的魔法世界
【网页搭建基石】:揭秘HTML标签的魔法世界
|
13天前
|
前端开发 JavaScript
HTML情人节爱心代码
HTML情人节爱心代码
18 2
|
23小时前
|
JavaScript
VScode格式化vue文件--避免html属性换行
VScode格式化vue文件--避免html属性换行
5 0
|
4天前
爱心代码---html代码合集他来咯(2)
爱心代码---html代码合集他来咯
|
4天前
爱心代码---html代码合集他来咯(1)
爱心代码---html代码合集他来咯
12 0
|
7天前
|
JavaScript 前端开发 定位技术
html中a标签的多用性
html中a标签的多用性
|
7天前
|
前端开发 JavaScript
HTML的a标签如何做返回顶部的功能
HTML的a标签如何做返回顶部的功能
13 0
|
7天前
|
移动开发 定位技术 HTML5
HTML5的新语义化标签
HTML5的新语义化标签