Sublime Text 套件介紹(四):CSScomb

CSScomb

一個可以高度自訂的 CSS 格式化套件,包含了多 selector 是否換行,{} 是否換行與空格,property 的順序、沒有 property 的 selector 是否移除等等,官網提供了 Grunt 與 Sublime Text 的等等的 plugin,這次要介紹的就是 Sublime Text 的 plugin。

安裝

  1. 下載 Sublime Text
  2. 安裝 CSScomb for Sublime Text
    1. 確定有安裝 Package Contrl,如果沒有請看 安裝第一個 Sublime Text 套件
    2. 按下 Ctrl + Shift + P 輸入 Package Control: Install Package(我通常輸入 pki)
    3. 等待取得套件清單,輸入 CSScomb 確定後即安裝完成

使用

  1. 開啟需要格式化的 CSS 檔案
  2. 按下 Ctrl + Shift + C 格式化,即可看到成果(以前是 Ctrl + Shift + H)

設定

預設的格式化可能不是符合團隊規定,也因為如此 CSScomb 提供了超多的設定可以調整,開啟 Sublime Text 並且依照下列步驟調整

  1. Preferences > Package Settings > CSScomb > Settings - Default
  2. 複製後在開啟 Preferences > Package Settings > CSScomb > Settings - User 並貼上
  3. 開始調整成符合團隊的需求,設定可以參考 Configuration options

結語

其實以前就已經有在使用 HTML-CSS-JS Prettify (HTMLPrettify),只是一直都沒有花時間介紹(改天再花時間介紹),平常在看 min 的時候很好用,但是卻無法 format 成團隊要的格式,所以在發現 CSScomb 時,真是非常的高興!兩者可以互相搭配使用,但是熱鍵可能有點衝突,可能需要自己解決一下…另外還有提供 online 可以體驗 format 後的結果,只可惜沒有參數可以調整

參考資料:

  1. CSScomb