因为自己遇到这个问题,然后百度了很久都得不到解决办法,所以解决问题以后在博客园写下此文,希望能帮助到更多人!

//在jsbeautifyrc.js里面的html中加入这个,就OK了
"wrap_attributes":"force"//【own新添加】html属性是否换新行【auto自动,force强制换行,preserve保护现有格式 】

如果是第一次不会,可以看如下流程图

1:在插件安装中找到如下图所示,点击配置

此插件是Hbuilder默认自带的格式化插件

2:点击 jsbeautify.js这个

3:点击之后,会打开配置文件,如图所示

4:在下面html中加入配置:"wrap_attributes":"force"

绿色选中的这一样就是

"html": {
"indent_handlebars": true,
"indent_inner_html": true,
"indent-scripts": "normal", //[keep|separate|normal]
"extra_liners": [] ,//配置标签列表,需要在这些标签前面额外加一空白行
"wrap_attributes":"force"//【own新添加】html属性是否换新行【auto自动,force强制换行,preserve保护现有格式 】
}

完成的配置参考如下:

点击查看代码
module.exports = {
parsers: {
".js": "js",
".json": "js",
".njs": "js",
".sjs": "js",
".wxs": "js",
".css": "css",
".nss": "css",
".wxss": "css",
".acss": "css",
".ttss": "css",
".qss": "css",
".html": "html",
".ux": "html",
".wxml": "html",
".nml": "html",
".vue": "html",
".nvue": "html",
".axml": "html",
".swan": "html",
".ttml": "html",
".qml": "html"
},
options: {
"indent_size": "1",
"indent_char": "\t",
"indent_with_tabs": false, //使用tab缩进
"eol": "\r\n", //行结束符
"end_with_newline": false, //使用换行结束输出
"indent_level": 0, //起始代码缩进数
"preserve_newlines": true, //保留空行
"max_preserve_newlines": null, //最大连续保留换行符个数。比如设为2,则会将2行以上的空行删除为只保留1行
"space_in_paren": false, //括弧添加空格 示例 f( a, b )
"space_in_empty_paren": false, //函数的括弧内没有参数时插入空格 示例 f( )
"jslint_happy": false, //启用jslint-strict模式
"space_after_anon_function": false, //匿名函数的括号前加空格
"brace_style": "collapse", //代码样式,可选值 [collapse|expand|end-expand|none][,preserve-inline] [collapse,preserve-inline
"unindent_chained_methods": false, //不缩进链式方法调用
"break_chained_methods": false, //在随后的行中断开链式方法调用
"keep_array_indentation": false, //保持数组缩进
"unescape_strings": false, //使用xNN符号编码解码可显示的字符
"wrap_line_length": 120,
"e4x": false, //支持jsx
"comma_first": false, //把逗号放在新行开头,而不是结尾
"operator_position": "before-newline",
"unformatted": ["wbr"],
"html": {
"indent_handlebars": true,
"indent_inner_html": true,
"indent-scripts": "normal", //[keep|separate|normal]
"extra_liners": [] ,//配置标签列表,需要在这些标签前面额外加一空白行
"wrap_attributes":"force"//【own新添加】html属性是否换新行【auto自动,force强制换行,preserve保护现有格式 】
}
}
}

Hbuilder/Uniapp 格式化的时候,很多属性会排列在一行,如何结局?的更多相关文章

  1. fastjson格式化bean的简易属性过滤器

    fastjson的bean属性过滤器 有的时候,我们在接口开发时,一个完整的bean会包含很多属性,但是前端接口只需要其中的某几个属性时,应该在对json的返回要进行精简.下面直接看代码 packag ...

  2. CSS2.1SPEC:视觉格式化模型之width属性详解(下)

    本文承接CSS2.1SPEC:视觉格式化模型之width属性详解(上),继续分析CSS视觉格式化模型中width以及相关值的计算问题: 注:与上节不同,本节的demo中由于出现了float,absol ...

  3. fileinput 配置项大全,从源码中翻出了很多属性,没那么多时间一一验证,特发出来给大家参考参考

    fileinput 配置项大全,从源码中翻出了很多属性,没那么多时间一一验证,特发出来给大家参考参考 fileinput 配置项大全 option 属性名 属性类型 描述说明 默认值 language ...

  4. SpringMVC的数据格式化-注解驱动的属性格式化

    一.什么是注解驱动的属性格式化? --在bean的属性中设置,SpringMVC处理 方法参数绑定数据.模型数据输出时自动通过注解应用格式化的功能. 二.注解类型 1.DateTimeFormat @ ...

  5. CSS2.1SPEC:视觉格式化模型之width属性详解(上)

    在介绍了包含块之后,CSS2.1标准中介绍了width属性和height属性,这两个属性在我们的页面布局中也发挥着重要的作用.在盒模型中,width和height包围了一个框的内容区域(content ...

  6. 新增html5标签 例如input的很多属性

    <meter> 标签定义度量衡.仅用于已知最大和最小值的度量. contenteditable="true"> 规定可编辑的内容. <output> ...

  7. HBuilder自定义格式化代码

    对于代码格式到底为两个空格还是四个空格,可能大家喜欢的都不同,如果你是在使用HBuilder编辑器,那么恭喜你,这两种代码格式你可以轻易的更换.下面贴步骤 1.打开工具—>选项 2.选择HBui ...

  8. 一个很实用的css3兼容工具很多属性可以兼容到IE6

    当你看到这样的效果图是不是已经崩溃了 css3没出来之前大部分人基本都是用图片的方式拼出来的 腾讯邮箱就是这么做的 然后你想和设计说换直角吧.我用图片的好烦的感觉!而且我们还要兼容到ie6 她和你说别 ...

  9. jsp页面 使用c 标签的 varStatus 属性和 index 解决一行显示多少个 然后进行自动换行

    jsp页面显示,一行有三条记录,自动换行 <c:forEach items="${slist}" var="s" varStatus="stat ...

随机推荐

  1. 从0到1使用Kubernetes系列(二):安装工具介绍

    该系列第一篇为:<从0到1使用Kubernetes系列--Kubernetes入门>.本文是Kubernetes系列的第二篇,将介绍使用Kubeadm+Ansible搭建Kubernete ...

  2. Java(25)常见异常整理

    作者:季沐测试笔记 原文地址:https://www.cnblogs.com/testero/p/15228418.html 博客主页:https://www.cnblogs.com/testero ...

  3. Hive中的4种Join方式

    common join 普通join,性能较差,存在Shuffle map join 适用情况:大表join小表时,做不等值join 原理:将小表数据广播到各个节点,存储在内存中,在map阶段直接jo ...

  4. ZK(ZooKeeper)分布式锁实现

    点赞再看,养成习惯,微信搜索[牧小农]关注我获取更多资讯,风里雨里,小农等你. 本文中案例都会在上传到git上,请放心浏览 git地址:https://github.com/muxiaonong/Zo ...

  5. python打印爱心

    print('\n'.join([''.join([('AndyLove'[(x-y)%8]if((x*0.05)**2+(y*0.1)**2-1)**3-(x*0.05)**2*(y*0.1)**3 ...

  6. freemarker自定义指令

    最近项目中使用了spring boot搭建项目,使用spring security管理项目中的权限,使用freemarker作为视图层.为了将权限控制到按钮上,因此考虑直接使用spring secur ...

  7. Qt坐标转换系统的理解

    转 https://blog.csdn.net/hgcprg/article/details/53537106 今天又看了一篇对Qt坐标转换系统以及QTransform的博客,作者讲的非常透彻,链接如 ...

  8. STM32的串口通信

    本篇文章主要讲解一个在开发过程中经常使用到的一个外设---串口. 串口是绝大多数 MCU 中不可或缺的一个外设,同时也是我们开发中经常使用的一种调试手段,所以在STM32的学习中,串口的配置使用也是必 ...

  9. 手写vue-router & 什么是Vue插件

    博文分享 这篇文章你可以学习到: 实现一个自己的vue-router 了解什么是Vue的插件 学习b站大佬后做的笔记整理和源码实现 1.1.3一步一步带你弄懂vue-router核心原理及实现哔哩哔哩 ...

  10. hdu 1166 敌兵布阵(简单线段树or树状数组)

    题意: N个工兵营地,第i个营地有ai个人. 三种操作: 1.第i个营地增加x个人. 2.第i个营地减少x个人. 3.查询第i个到第j个营地的总人数. 思路: 线段树or树状数组 代码:(树状数组) ...