第一話(huà) 何為 CSScomb

CSScomb is a coding style formatter for CSS. You can easily write your own configuration to make your style sheets beautiful and consistent.

通俗點(diǎn)說(shuō)就是CSS格式化插件。我最喜歡的就是他的排序功能，真香。如果你是組件庫(kù)開(kāi)發(fā)者，為了保證代碼質(zhì)量，我想更需要他的幫助。

?????? 如果你只想解決“消除 CSScomb 生成的空行”，請(qǐng)滑至文章底部

第二話(huà) 安裝

關(guān)于安裝，這個(gè)CSScomb Github上也有介紹，就不重復(fù)了。咱們講的上面沒(méi)有的，如何配合VScode使用。

VSCode 安裝配置

1. 在插件市場(chǎng)里找到 CSScomb，選個(gè)下載量多的。

2. 點(diǎn)擊 文件（File）-> 首選項(xiàng)（Performances）-> 設(shè)置（Settings），接著搜索 CSScomb，要是你想基于項(xiàng)目配置，可以切換為 Workspace，根據(jù)需求自己設(shè)置?？梢酝ㄟ^(guò)點(diǎn)選方式，也可以直接 Edit in settings.json，完成保存，會(huì)在根目錄下出現(xiàn) .vscode 文件夾。

?? Tips: 如何獲取配置的字段名?

Copy Setting ID => csscomb.preset
Copy Setting as JSON => "csscomb.preset": "./yandex.json"

試一試，不虧

這里我開(kāi)啟了保存時(shí)進(jìn)行格式化，預(yù)設(shè)也沒(méi)使用官方提供的，而是基于官方進(jìn)行了自定義。你們要是覺(jué)得官方的可以滿(mǎn)足需求就無(wú)需像我這么折騰了。

第三話(huà) 消除空行??

"csscomb.preset": {} 的配置分為兩部分，??其他屬性 和 sort-order ??『不可犯懶哦，打開(kāi)看看，你會(huì)豁然開(kāi)朗』

關(guān)于排序規(guī)則，官方也提供了三種排法，如何選取看個(gè)人『蘿卜青菜各有所愛(ài)』

• ?? csscomb
• ?? yandex
• ?? zen

小編我就喜歡 yandex 。

看了三種配置，你應(yīng)該關(guān)注到了分組，例如：{ "sort-order": [ [ "margin", "padding" ], [ "border", "background" ] ] }

/* before */
p {
    background: none;
    border: 0;
    margin: 0;
    padding: 0;
}

/* after */
p {
    margin: 0;
    padding: 0;

    border: 0;
    background: none;
}

組與組之間會(huì)有一個(gè)空行隔開(kāi)，雖說(shuō)利于閱讀，但空行過(guò)多，會(huì)造成閱讀不變。

回到我們的標(biāo)題，如何消除空行呢？

小編也Google『百度』了半天，也沒(méi)見(jiàn)到個(gè)可用的回答。后面靈機(jī)一動(dòng)，全部歸為一組不就得了，整一個(gè)大組總可以吧~

我可真是個(gè)小機(jī)靈鬼兒~??

抱歉了各位，消除空行的秘訣就是整一個(gè)大分組??

{
  "exclude": [".git/**", "node_modules/**", "bower_components/**"],
  "sort-order": [
    [
      "position",
      "z-index",
      "top",
      "right",
      "bottom",
      "left",
      "display",
      "visibility",
      ...
    ]
  ]
}

消除空行的秘訣就是整一個(gè)大分組!!!
消除空行的秘訣就是整一個(gè)大分組!!!
消除空行的秘訣就是整一個(gè)大分組!!!