Atom CSScomb 增強版

CSScomb 增強版

何為CSScomb

官方網(wǎng)站只有一句描述:Makes your code beautiful(讓你的代碼更漂亮)，通俗點講:CSScomb 是用來排版 CSS 代碼的，可以說是格式化插件,依賴 nodejs。

獲取 CSScomb

官方網(wǎng)站: CSScomb

支持許多編輯器,比如 Sublime/Atom/brackets 等

第三方 CSScomb

昨天寫了篇 CSS3 的文章，發(fā)現(xiàn)代碼有點混亂，人力排版有點，所以跑去 Atom 插件庫尋找 csscomb。

Atom -> settings -> install -> csscomb

下圖三個藍色圈圈的功能基本一致，第一個是官方的，今天的主角是黃色的。

atom-css-comb

特點

• 支持格式化CSS/LESS/SASS
• 支持自定義格式
• 內(nèi)置三種排版風格(Yandex/CSScomb/zen)
  • Yandex 的 CSS規(guī)范，去引擎搜索了下，好像很強大…不過不適合我
  • CSScomb 排版樣式
  • zen(Emmet 的前身)

基礎使用

• 默認快捷鍵有兩個 [還可以使用鼠標點擊插件調(diào)用]

  • ctrl + alt + c[沖突]
  • ctrl + alt + shift + c[沖突]

• 切換排版風格(Ready-made configs),看描述和看圖

  • Packages -> Css comb -> settings

默認快捷鍵參數(shù)

'atom-text-editor':
  'ctrl-alt-c':'css-comb:comb'

進階使用

針對用戶群：喜歡折騰，有自己風格的小伙伴，這里只是展示，具體小伙伴自己可以參考官方提供的文檔進行定制。 看到上面那個 common config，選中 custom config [Edit config file]，進入到定制參數(shù)頁面，格式是使用 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
}