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        }
    },
}
目录
相关文章
|
3月前
|
移动开发 前端开发 Java
|
6月前
|
搜索推荐 索引 SEO
HTML 文本格式化对于搜索引擎优化(SEO)
HTML文本格式化是搜索引擎优化(SEO)的关键,合理的格式化有助于搜索引擎理解网页内容,提升排名。主要技巧包括:使用正确的标题标签、组织段落和列表、自然融入关键词、优化图像及链接,并使用语义化标签和Meta标签。遵循这些最佳实践,可以显著提高SEO效果,吸引更多访客。
|
9月前
|
JavaScript 前端开发 C++
vscode编辑器中如何调试nextjs代码
代码可调式的重要性不言而喻。 对于Programer来说,自己编写的程序能够被优雅调试是一件幸福的事情,特别是习惯了后端程序调试的开发者... 在折腾Nextjs项目的日子里,我走了很多弯路才弄明白在vs code中如何优雅的调试代码。
590 1
vscode编辑器中如何调试nextjs代码
|
9月前
|
前端开发 搜索推荐 UED
HTML基础-文本格式化标签:美化网页内容
【6月更文挑战第1天】本文介绍了HTML的文本格式化标签,包括`<b>`、`<strong>`、`<i>`、`<em>`、`<u>`、`<s>`、`<mark>`、`<small>`、`<sub>`和`<sup>`等,强调了语义化使用和避免常见错误的重要性。示例代码展示了这些标签的用法,帮助提升网页内容的可读性和吸引力。
186 3
|
9月前
|
JavaScript
VScode格式化vue文件--避免html属性换行
VScode格式化vue文件--避免html属性换行
1012 0
|
10月前
|
前端开发 UED
HTML 文本格式化
HTML 文本格式化
108 0
|
10月前
sublime和vscode 推荐安装的插件
sublime和vscode 推荐安装的插件
119 0
|
10月前
|
人工智能 自然语言处理 算法
国产新型AI编程助手—DevChat AI插件在VSCode中的应用
国产新型AI编程助手—DevChat AI插件在VSCode中的应用
351 0
|
10月前
|
敏捷开发 人工智能 前端开发
让你爽到飞起的【懒人插件AutoScssStruct4Vue】VSCode根据template的标签目录自动一键生成CSS/SCSS/LESS结构,敏捷开发必备插件!!!
让你爽到飞起的【懒人插件AutoScssStruct4Vue】VSCode根据template的标签目录自动一键生成CSS/SCSS/LESS结构,敏捷开发必备插件!!!