网站首页 » 前端开发 » 前端工具 » CSScomb – Sublime text中一个超赞的CSS属性排序插件
上一篇:
下一篇:

CSScomb – Sublime text中一个超赞的CSS属性排序插件

前言

CSS样式的有序排列对于提高工作效率或多或少都会有就贡献,当你看到自己写的代码齐刷刷的有序排列,心情肯定也不会差,特别是对于从事前端开发的朋友来说。所以下面就给大家分享Sublime text中一个超赞的CSS属性排序插件 – CSScomb。通过这个工具可以让你重新排列CSS中所定义的属性,也可以按照你预定义的排序格式生成新的CSS。

sublime-text-csscomb-plugin

基本介绍

CSScomb 插件的主要特征:

1.帮助排序CSS属性

2.自定义排序规则

3.可以处理标签 style 内的CSS属性

4.格式不变化

5.完全支持CSS2/CSS2.1/CSS3和CSS4

看起来还是很全的,在很多情况下都可以对样式属性进行排序,所有我愿为 CSScomb 插件代言。

如何安装

CSScomb 插件安装方法可以会比其它插件稍微麻烦一点点,但也没关系,我们一步步跟着来就好。

1.Sublime Text 最大的特色就是插件强大 ,所以你也可以通过 package control 来安装所需的插件。通过快捷键组合ctrl+shift+P或者[preferences]-> [Package Control] 唤出命令面板。

2.在面板中输入“install package”后回车

3.接着输入“CSScomb”关键字,此时你就可以看到下拉中会出现 CSScomb 插件了。点击安装就可以了,安装完成之后记得重启 Sublime Text。

sublime-text-csscomb-plugin

在这里官方提供了一个在线版的 http://csscomb.com/online/,你可以前往体验下有序样式的魅力。

在线是可以用,但是怎么自己安装的就不能用呢?

原来 CSScomb 插件需要 Node.js 的支持,所以要想 CSScomb 起作用,你还必需安装 Node.js,

Node.js的官方下载链接会在最后面的相关资料里贴出。

sublime-text-csscomb-plugin

CSScomb 错误(CSScomb error)解决方法

可安装完之后,当我在 Sublime Text 中充满期待的按下快捷键Ctrl+Shift+C时,我惊呆了,竟然报了如下错误:

sublime-text-csscomb-plugin

CSScomb error:
C://Users\123\Desktop\Subime Text Build3083\Data\Packages\CSScomb\node_modules\csscomb\node_modules\csscomb-core\lib\core.js:412
throw e;
Please check the validity of the block starting from line #1

网上找了很多资料,有朋友说环境变量看看有没有添加

sublime-text-csscomb-plugin

可我看了下,已经添加了。问题排除!

有朋友说要找到CSScomb.sublime-settings文件把下面这行代码:

"node-path" : ":/usr/local/bin"

这个路径改成你安装Node.js里的bin文件的路径如我的:

"node-path" : "D:\\Program Files\\nodejs\\node_modules\\npm\

\bin",

你可以在Sublime Text 选项 [preferences]-> [Package Settings]->[CSScomb]->[Settings-Default] 找到。

设置完后选中CSS属性代码再试了一下,还是没有效果。同样的错误。

官方文档好像也是这么说的呀?选择需要重排序的CSS样式然后按下快捷键Ctrl+Shift+C,在多次尝试失败后,我走了一条“非同寻常”的路,试一下连同类名样式一起选中,再按

下快捷键Ctrl+Shift+C,结果竟然可以了。更牛的是这个插件还可以对整个文件里的CSS代码起作用,方法:全选CSS样式代码,或者不选中CSS样式代码,直接按快捷键Ctrl+Shift+C

这是一开始对官方文档错误的理解:

sublime-text-csscomb-plugin

下面这个是正确的使用方法:

sublime-text-csscomb-plugin

你也可以对全部代码进行处理排序,只需要全选或者不选中然后按下快捷键Ctrl+Shift

+C就可以了。

可以是可以了,出来的效果还是差那么一点点,请看图:

sublime-text-csscomb-plugin

相信你已经看到了,排序后的CSS样式有些地方会产生空行。这不管怎么说也说不过去呀。方法还是有的,同样是在提到的CSScomb.sublime-settings文件中,官方默认规则下面是其中两块的截图看完你应该就明白了为什么会有空行了。

sublime-text-csscomb-plugin

默认的CSS样式是安一定的规则分门另类的,换句话说就是相关的属性会放到一起,块与块之间就空出一行来作为区分。如果你还不相信请看看下面这个栗子:

sublime-text-csscomb-plugin

有没有茅塞顿开的感觉。关于 CSScomb 插件就给大家分享到这里,希望您喜欢!踊跃留言,发出你的声音,让我感受你独一无二的存在!

相关资料

CSScomb官网下载:http://csscomb.com/

官方下载地址:https://nodejs.org/

相关软件官方下载:http://www.sublimetext.com/

  • 微信扫一扫,赏我

  • 支付宝扫一扫,赏我

声明

原创文章,不经本站同意,不得以任何形式转载,如有不便,请多多包涵!

本文永久链接:http://yunkus.com/sublime-text-csscomb-plugin/

发表评论

电子邮件地址不会被公开。 必填项已用*标注

评论 END