在WebStorm中使用CSScomb

在前端開發寫CSS時，往往不能很好的把握格式和屬性順序，閱讀起來不友好。CSScomb幫助我們解決了這個問題！

CSScomb(CSS梳理)是一個可以用來格式化和排序CSS屬性的插件，官網地址http://csscomb.com/。

一、安裝CSScomb

要使用CSScomb，需要先安裝CSScomb，npm install csscomb -g，參考CSScomb使用方法http://csscomb.com/docs。

二、配置WebStorm
1. File -> Settings ->Tools -> External Tools
2. 點擊"+"添加，隨后出現Create Tool配置

3. 配置項
Name: CSScomb(可以填寫其它容易識別comb插件的名字)

Group: CSSTools(可以填寫其它組的名字，將會出現在對文件操作的菜單中)

Description: Makes your code beautiful.(對插件的描述)
Parameters: $FilePath$ -v -t
Working directory: $FileDir$

 

三、使用
6. 在項目任意位置新建一個 .csscomb.json 文件，然后寫入需要的配置，WebStorm會自動讀取這個配置。在CSScomb的官網，可視化的生成一個配置 http://csscomb.com/config。將生成的配置拷貝到.csscomb.json文件中即可。
7. 在CSS(SCSS,Less)文件上右鍵菜單找到CSS TOOLS分組，點擊CSScomb，就能完成對CSS(SCSS，Less)的屬性排序和格式化。

 

四、舉例

以我本地的靜態網站為例

 

在根目錄下存放了 .csscomb.json 配置詳情如下：

{
    "remove-empty-rulesets": true,
    "always-semicolon": true,
    "color-case": "lower",
    "block-indent": "  ",
    "color-shorthand": true,
    "element-case": "lower",
    "eof-newline": true,
    "leading-zero": false,
    "quotes": "double",
    "space-before-colon": "",
    "space-after-colon": " ",
    "space-before-combinator": " ",
    "space-after-combinator": " ",
    "space-between-declarations": "\n",
    "space-before-opening-brace": " ",
    "space-after-opening-brace": "\n",
    "space-after-selector-delimiter": "\n",
    "space-before-selector-delimiter": "",
    "space-before-closing-brace": "\n",
    "tab-size": true,
    "unitless-zero": true,
    "vendor-prefix-align": true
}

 對 puyu.scss 選擇 CSScomb 即可對 puyu.scss 進行格式化。

更改后，通過 TortoiseGit 可以查看到更改了哪些文件：

點擊具體的某一項查看更改詳情：

可以看到，將添加了廠商前綴的屬性進行了格式化，使得值對其排列。