解决在写Vue时,格式化代码 属性自动换行的问题

·  阅读 14271

参考来源
特别说明,这些内容非本人原创,只是网络上说法很多,而这种我亲测有效,分享给大家

感谢segmentfault网用户 Raymond 它拥有3.6k的点赞量
感谢segmentfault网用户 陌上寒 它拥有1.8k的点赞量
感谢segmentfault网用户 Jack_Chen 它拥有346的点赞量


最近写Vue代码,发现template里的html代码,会因为标签内的属性稍有超出就出现换行,看着挺难受的,毕竟屏幕还挺宽敞的。

1、直入主题

1.修改 "wrap_attributes": "force-expand-multiline"
为"wrap_attributes": "aligned-multiple"

2.添加 "vetur.format.defaultFormatter.html": "js-beautify-html",

2、具体操作

先描述一下我VSCODE的插件的情况,一个Vetur ,vue-beautify
打开设置 搜索 vetur.format.defaultFormatterOptions > 点击在settings.json中编辑

直接上图看下我修改后的

3、原理

1.关于vetur.format.defaultFormatter.html

这是因为在VSCode1.7.2中替换了内置格式化插件。解决办法是在VScode设置(setting.json)中,配置如下规则

{
   "prettier.singleQuote": true,
   "prettier.semi": false,
   "vetur.format.defaultFormatter.html": "js-beautify-html",
   "vetur.format.defaultFormatterOptions": {
      "wrap_attributes": "force-aligned"
    }
}
详情见 vuejs/vetur#476

复制代码

2. 关于vetur.format.defaultFormatterOptions

// 对属性进行换行。
// - auto: 仅在超出行长度时才对属性进行换行。
// - force: 对除第一个属性外的其他每个属性进行换行。
// - force-aligned: 对除第一个属性外的其他每个属性进行换行,并保持对齐。
// - force-expand-multiline: 对每个属性进行换行。
// - aligned-multiple: 当超出折行长度时,将属性进行垂直对齐。

  "vetur.format.defaultFormatterOptions": {
        "js-beautify-html": {
            "wrap_attributes": "auto",
        }
     },
复制代码

4、如果大家有更好的方式可以留言交流~蟹蟹

分类:
开发工具
收藏成功!
已添加到「」, 点击更改