模板下载吧 > 站长学院 > 福利分享 > Hbuilder中如何设置格式化CSS代码为单行

Hbuilder中如何设置格式化CSS代码为单行

模板下载吧

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

第一步:

打开编辑器所在文件夹找到插件目录

X:\Program Files\HBuilder\plugins

第二步:

搜索文件“beautify-CSS.js”

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

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

第三步:

格式化脚本

根据【符号】添加换行、空格等达到格式的目的,我们只需要去除不需要的换行即可。主要就是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 }

下载地址

注意:本段内容隐藏解压密码/提取密码必须成功"回复本文"后" 刷新本页"方可查看!

如果您觉得本站对你有帮助请按住键盘上CTRL+D收藏!欢迎再次光临!





上一篇:

下一篇:

Hbuilder中如何设置格式化CSS代码为单行:等您坐沙发呢!

大牛,别默默的看了,快来点评一下吧!:)。

您必须登录后才能发表评论哦!:)

QQ登录 微博登录
2017织梦源码销售商城

Hi, 欢迎加入模板下载吧技术交流群,带你装逼带你飞!

我要入群

模板下载吧,累计帮助1000+用户成功建站,为草根创业提供助力!

立刻开启你的建站之旅
现在加入模板下载吧,注册一个账号