候补的神
候补的神
  • 发布:2016-05-01 11:38
  • 更新:2019-05-09 18:17
  • 阅读:6579

CSS 格式化成一行一条

分类:HBuilder

CSS 一行一条已经写习惯了,HBuilder不支持自定义,但又很喜欢这个编辑器,经过一番折腾基本满足需求了,现提供修改方法以供参考。
HBuilder的JS,HTML,CSS格式化插件是 js-beautify 脚本(https://github.com/beautify-web/js-beautify)


HBuilderX 1.8.2 (2019-04-10) 更新新版本设置方法,这里已修改css脚本为例。
新版本给出了插件配置项,但js-beautify@1.8.8 插件本身没有提供一行格式的参数项。因此只能手动修改插件,非常简单。

脚本文件位置
X:\HBuilderX\plugins\format\node_modules\js-beautify\js\src\css\beautifier.js
注意不同语言的格式化脚本不同,这里是 CSS\beautifier.js

修改方法:
1、修改 this.eatWhitespace(true) 为 this.eatWhitespace()
去除参数 true 则 清除空格但不插入换行
2、去除或注释掉 this._output.add_new_line();
不插入换行

修改
...} else if (this._ch === '{') {
[294] this.eatWhitespace(); 去除参数true
[295] // this._output.add_new_line(); 注释掉
} else if (this._ch === '}') {
...
[298] // this._output.add_new_line(); 注释掉
...
[314] this.eatWhitespace(); 去除参数true
...
} else if (this._ch === ';') {
...
[362] this.eatWhitespace(); 去除参数true
...
[369] this._output.add_new_line(); 注释掉
}
这里不支持上传图片,参照行修改,或直接下载修改过的文件。 HBuilderX-beautifier-css.zip


  • 以下为旧版本

1、打开编辑器所在文件夹找到插件目录
X:\Program Files\HBuilder\plugins

2、搜索文件“beautify-css.js”
你可能会看到多个同名的文件,这是由于【编辑器更新】之后并没有删除之前旧版本的插件,根据创建日期找到最新的版本进行修改,否则无效。

X:\Program Files\HBuilder\plugins\【自动生成的插件文件夹】\js\node_modules\js-beautify\js\lib\beautify-css.js

3、格式化脚本会根据【符号】添加换行、空格等达到格式的目的,我们只需要去除不需要的换行即可。主要就是print.newLine();
找到 ch === '{' 和 ch === '}' 去除或直接替换要插入的内容即可,没什么技术含量,应该都能搞定的。

懒得动手可以直接下载附件内脚本整个替换,修改的部分我没有删除,只是注释掉了。

注意:我仅针对普通CSS做了测试,如果是less、sass还请自行使用语法验证,若发现问题还需同志们一起努力。

h1,  
h2,  
h3 {  
    margin-top: 0;  
    margin-bottom: 10px  
}  
h1, h2, h3{ margin-top: 0; margin-bottom: 10px}  
13 关注 分享
DCloud_heavensoft maxd010@163.com 无聊的纠结 肖邦 深井冰_01 五叶神 hojk@foxmail.com _LHH_ 18062620801@qq.com 羅 lhyh 辰溪 miao3760@126.com

要回复文章请先登录注册

2396635762@qq.com

2396635762@qq.com

漏了[393] this.eatWhitespace(); 去除参数true
2019-05-09 18:17
候补的神

候补的神 (作者)

mac版本我没用过,不过脚本结构应该都是一样的,自己追踪调下。
2019-04-10 14:23
jjmathy

jjmathy

hbuilderX没用
2019-02-18 20:30
拜托程序员

拜托程序员

新版hbuilderX这是失效了吧
2018-12-12 13:53
全村人的老司机

全村人的老司机

如果小伙伴不想这么麻烦 可以 访问http://www.bejson.com/ 进行各种语言的格式化操作 哈哈哈哈哈哈
2018-11-27 18:41
173564986@qq.com

173564986@qq.com

有没有mac版本修改成功的老哥
2018-10-13 11:53
miao3760@126.com

miao3760@126.com

用起来来,非常好,感谢!!
2018-06-26 13:38
857763541@qq.com

857763541@qq.com

这评论的字段长度挺长的,base64的图片都可以发得出去,我试了楼主的方法,可以生效,但是方法是直接覆盖js文件,我是在最新版的js文件上面修改的,上面的base64代码就是我的方法(复制代码,在浏览器url直接打开),其实重点就是楼主说的print.newLine(),只不过新版js重新优化了一下方法
2018-06-16 16:18
269479841@qq.com

269479841@qq.com

真心不错,如果能做个mxl能导入就更好了
2017-09-23 10:12
八爪熊

八爪熊

有没MAC用户成功的?
2017-05-10 11:29
TangJuyi

TangJuyi

终于找到了。给力
2017-04-19 22:21
红狼

红狼

厉害了我的哥,亲测没问题
2017-01-17 17:17
461271422@qq.com

461271422@qq.com

非常感谢楼主大神
2016-12-15 14:45
_LHH_

_LHH_

thank you
2016-11-01 10:59
hojk@foxmail.com

hojk@foxmail.com

THINKS
2016-08-18 09:32
Chenng

Chenng

感谢你!我也喜欢写成一行,也喜欢这个编辑器,你让我更加喜欢它了!
2016-07-24 11:46
肖邦

肖邦

屌屌屌,我也尝试过自己去修改,哎一点规律都找不到 说起来都是泪啊
2016-07-04 00:50
maxd010@163.com

maxd010@163.com

终于有解决办法了,支持一个
2016-05-09 15:27
无聊的纠结

无聊的纠结

试过了,真不错
2016-05-03 13:56