Atom CSScomb 增强版

🌙
手机阅读
本文目录结构
a'xi'he

何为 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
}
axihe
axihe

AXIHE / 精选教程

浏览全部教程

HTML

CSS

JS

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili 和抖音。

关注我: Github / 知乎

如果你加我的私人微信,麻烦写上您的 称呼,所在地区,职业,方便我备注,谢谢


本站的微信公众号

阿西河前端教程

Anbang

安邦的私人微信

微信号: yaolushan

Anbang

Bilibili(B站)

朱安邦

Anbang

我叫朱安邦,阿西河的站长

目前在杭州从事区块链周边的开发工作,机械专业,以前从事平面设计工作。

2014年底脱产在老家自学6个月的前端技术,自学期间几乎从未出过家门,最终找到了满意的前端工作。更多>

axihe