Vue编程格式化代码属性自动换行问题

更新时间：2022年06月11日 10:55:58 作者：借你趁早

这篇文章主要为大家介绍了Vue编程格式化代码属性及自动换行问题，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪

前言

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

直入主题

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

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

具体操作

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

直接上图看下我修改后的

原理

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",
        }
     },

以上就是Vue编程格式化代码属性自动换行问题的详细内容，更多关于Vue代码格式化属性自动换行的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

vue插件实现v-model功能
最近在开发自己的富文本编辑器插件，在开发中遇到了很多问题其中我觉得比较好的问题就是在你定义的插件中实现双向绑定。这篇文章主要介绍了vue插件实现v-model功能,需要的朋友可以参考下
2018-09-09
解决Element中el-date-picker组件不回填的情况
这篇文章主要介绍了解决Element中el-date-picker组件不回填的情况，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-11-11
vue使用el-upload上传文件及Feign服务间传递文件的方法
这篇文章主要介绍了vue使用el-upload上传文件及Feign服务间传递文件的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2019-03-03
基于Vue 2.0的模块化前端 UI 组件库小结
AT-UI 是一款基于 Vue.js 2.0 的轻量级、模块化前端 UI 组件库，主要用于快速开发 PC 网站产品。下面通过本文给大家介绍Vue 2.0的模块化前端 UI 组件库，需要的朋友参考下吧
2017-12-12
Vue中的计算属性和axios基本使用回顾
这篇文章主要介绍了Vue中的计算属性和axios基本使用回顾，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-01-01
element-plus报错ResizeObserver loop limit exceeded解决办法
这篇文章主要给大家介绍了关于element-plus报错ResizeObserver loop limit exceeded的解决办法,文中通过代码介绍的非常详细,对大家的学习或者工作具有一定的参考借鉴价值,需要的朋友可以参考下
2023-07-07
vue-cli脚手架引入图片的几种方法总结
下面小编就为大家分享一篇vue-cli脚手架引入图片的几种方法总结，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-03-03
vue父子组件进行通信方式原来是这样的
这篇文章主要为大家详细介绍了vue父子组件进行通信方式，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
2022-02-02
vue源码入口文件分析(推荐)
这篇文章主要介绍了vue源码入口文件分析(推荐)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-01-01
vue可用于拖动排序组件示例
这篇文章主要为大家介绍了vue可用于拖动排序组件示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-06-06