CSScomb 增强版
编辑教程CSScomb 增强版
官方网站只有一句描述:Makes your code beautiful(让你的代码更漂亮),通俗点讲:CSScomb 是用来排版 CSS 代码的,可以说是格式化插件,依赖 nodejs。
获取 CSScomb
官方网站: CSScomb
支持许多编辑器,比如 Sublime/Atom/brackets 等
第三方 CSScomb
昨天写了篇 CSS3 的文章,发现代码有点混乱,人力排版有点,所以跑去 Atom 插件库寻找 csscomb。
Atom -> settings -> install -> 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
}
Mos固件,小电视必刷固件
ES6 教程
Vue.js 教程
JSON 教程
jQuery 教程
HTML 教程
HTML 5 教程
CSS 教程
CSS3 教程
JavaScript 教程
DHTML 教程
JSON在线格式化工具
JS在线运行
JSON解析格式化
jsfiddle中国国内版本
JS代码在线运行
PHP代码在线运行
Java代码在线运行
C语言代码在线运行
C++代码在线运行
Python代码在线运行
Go语言代码在线运行
C#代码在线运行
JSRUN闪电教程系统是国内最先开创的教程维护系统, 所有工程师都可以参与共同维护的闪电教程,让知识的积累变得统一完整、自成体系。
大家可以一起参与进共编,让零散的知识点帮助更多的人。
X

选择支付方式:


立即支付

¥
9.99
无法付款,请点击这里
金额: 0 元
备注:
转账时请填写正确的金额和备注信息,到账由人工处理,可能需要较长时间
备注:
转账时请填写正确的金额和备注信息,到账由人工处理,可能需要较长时间
如有疑问请联系QQ:565830900
正在生成二维码, 此过程可能需要15秒钟