searchusermenu
  • 发布文章
  • 消息中心
点赞
收藏
评论
分享
原创

VSCode格式化html标签代码

2023-07-03 02:11:38
67
0

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

 

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

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

{
    "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
        }
    },
}
0条评论
作者已关闭评论
t****m
98文章数
1粉丝数
t****m
98 文章 | 1 粉丝
t****m
98文章数
1粉丝数
t****m
98 文章 | 1 粉丝
原创

VSCode格式化html标签代码

2023-07-03 02:11:38
67
0

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

 

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

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

{
    "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
        }
    },
}
文章来自个人专栏
文章 | 订阅
0条评论
作者已关闭评论
作者已关闭评论
0
0