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

半岛未凉° 2017-01-05 福利分享 2821 已收录 本文共870个字,预计阅读需要3分钟。
  • 文章介绍
  • 快速入门
  • 增值服务

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还请自行使用语法验证,若发现问题还需同志们一起努力。

修改前的样式:

  1. h1, h2, h3
  2. {
  3. margin-top: 0;
  4. margin-bottom10px
  5. }

修改后的样式:

  1. h1, h2, h3 { margin-top: 0; margin-bottom10px }

下载地址

注意:本段内容隐藏解压密码/提取密码必须成功评论后刷新获取!

回复本文刷新本页

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

上一篇:

下一篇:

Hbuilder中如何设置格式化CSS代码为单行:等您坐沙发呢!
大牛,别默默的看了,快来点评一下吧!:)。

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

站内登录 QQ登录 微博登录
加载中...

Hi, 如果你对这款模板有疑问,可以跟我联系哦!

联系作者

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

立刻开启你的建站之旅
现在加入模板下载吧,注册一个账号
  • 模板下载吧拥有海量网站模板及源码,站长亲测干净无后门。

  • 注册即能下载免费模板栏目资源,帮您更快的完成网站建设。

  • 每日更新模板资源,每日精品推荐,及时获取最新模板资源流行去向。

  • 完美的售后服务,帮助草根站长、企业等成功建站。

  • 将您最爱的资源收藏,建立自己的资源库,并与朋友分享。

喜欢我嘛?喜欢就按“ctrl+D”收藏我吧!♡