何为csscomb
官方网站只有一句描述:
makes your code beautiful(让你的代码更漂亮)
通俗点讲:
csscomb是用来排版css代码的…可以说是格式化插件,依赖nodejs
获取csscomb?这不是今天的话题 官方网站: csscomb
支持许多编辑器,比如sublime/atom/brackets等 第三方csscomb?这才是今天的话题 昨天写了篇css3的文章…发现代码有点混乱..人力排版有点…….所以跑去atom插件库寻找csscomb
atom -> settings -> install -> csscomb 我去,,好几个csscomb插件包….看图(三个蓝色圈圈的功能基本一致,第一个是官方的,,,今天的主角是黄色的)
atom-css-comb 特点 支持格式化css/less/sass 支持自定义格式 内置三种排版风格(yandex/csscomb/zen)
yandex的css规范..去引擎搜索了下..好像很强大…不过不适合我 csscomb排版样式 zen(emmet的前身) 基础使用 默认快捷键有两个 [还可以使用鼠标点击插件调用]
ctrl + alt + c[冲突] ctrl + alt + shift + c[冲突] 切换排版风格(ready-made configs),看描述和看图
packages -> css comb -> settings
默认快捷键参数
'atom-text-editor': 'ctrl-alt-c':'css-comb:comb'
进阶使用 针对用户群:喜欢折腾,有自己风格的小伙伴,这里只是展示,具体小伙伴自己可以参考官方提供的文档进行定制
看到上面那个common config,选中custom config [edit config file],
进入到定制参数页面,格式是使用json写的.
{ help: about options https://github.com/csscomb/csscomb.js/blob/master/doc/options.md, exclude: [node_modules/**], verbose: true, always-semicolon: true, block-indent: , colon-space: [, ], color-case: lower, color-shorthand: true, element-case: lower, eof-newline: true, leading-zero: false, quotes: single, remove-empty-rulesets: true, rule-indent: , stick-brace: \n, strip-spaces: true, unitless-zero: true, vendor-prefix-align: true }
定制参数大全:点我点我点我