第一话 何为 CSScomb

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

通俗点说就是CSS格式化插件。我最喜欢的就是他的排序功能，真香。如果你是组件库开发者，为了保证代码质量，我想更需要他的帮助。

🔊🔊🔊 如果你只想解决“消除 CSScomb 生成的空行”，请滑至文章底部

第二话 安装

关于安装，这个CSScomb Github上也有介绍，就不重复了。咱们讲的上面没有的，如何配合VScode使用。

VSCode 安装配置

1. 在插件市场里找到 CSScomb，选个下载量多的。

2. 点击 文件（File）-> 首选项（Performances）-> 设置（Settings），接着搜索 CSScomb，要是你想基于项目配置，可以切换为 Workspace，根据需求自己设置。可以通过点选方式，也可以直接 Edit in settings.json，完成保存，会在根目录下出现 .vscode 文件夹。

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

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

试一试，不亏

这里我开启了保存时进行格式化，预设也没使用官方提供的，而是基于官方进行了自定义。你们要是觉得官方的可以满足需求就无需像我这么折腾了。

第三话 消除空行🙋

"csscomb.preset": {} 的配置分为两部分，👉其他属性 和 sort-order 👈『不可犯懒哦，打开看看，你会豁然开朗』

关于排序规则，官方也提供了三种排法，如何选取看个人『萝卜青菜各有所爱』

• 👉 csscomb
• 👉 yandex
• 👉 zen

小编我就喜欢 yandex 。

看了三种配置，你应该关注到了分组，例如：{ "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;
}

组与组之间会有一个空行隔开，虽说利于阅读，但空行过多，会造成阅读不变。

回到我们的标题，如何消除空行呢？

小编也Google『百度』了半天，也没见到个可用的回答。后面灵机一动，全部归为一组不就得了，整一个大组总可以吧~

我可真是个小机灵鬼儿~😉

抱歉了各位，消除空行的秘诀就是整一个大分组❕❗

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

消除空行的秘诀就是整一个大分组!!!
消除空行的秘诀就是整一个大分组!!!
消除空行的秘诀就是整一个大分组!!!