CSScomb 增強版

何為CSScomb

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

獲取 CSScomb

官方網站:?http://csscomb.com/

支持許多編輯器,比如 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 } 與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

以上是生活随笔為你收集整理的Atom CSScomb 增强版的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。