如何消除 CSScomb 生成的空行

[mileOfSunshine]

第一话 何为 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",
      "float",
      "clear",
      "overflow",
      "overflow-x",
      "overflow-y",
      "-ms-overflow-x",
      "-ms-overflow-y",
      "-webkit-overflow-scrolling",
      "clip",
      "zoom",
      "-webkit-align-content",
      "-ms-flex-line-pack",
      "align-content",
      "-webkit-box-align",
      "-moz-box-align",
      "-webkit-align-items",
      "align-items",
      "-ms-flex-align",
      "-webkit-align-self",
      "-ms-flex-item-align",
      "-ms-grid-row-align",
      "align-self",
      "-webkit-box-flex",
      "-webkit-flex",
      "-moz-box-flex",
      "-ms-flex",
      "flex",
      "-webkit-flex-flow",
      "-ms-flex-flow",
      "flex-flow",
      "-webkit-flex-basis",
      "-ms-flex-preferred-size",
      "flex-basis",
      "-webkit-box-orient",
      "-webkit-box-direction",
      "-webkit-flex-direction",
      "-moz-box-orient",
      "-moz-box-direction",
      "-ms-flex-direction",
      "flex-direction",
      "-webkit-flex-grow",
      "-ms-flex-positive",
      "flex-grow",
      "-webkit-flex-shrink",
      "-ms-flex-negative",
      "flex-shrink",
      "-webkit-flex-wrap",
      "-ms-flex-wrap",
      "flex-wrap",
      "-webkit-box-pack",
      "-moz-box-pack",
      "-ms-flex-pack",
      "-webkit-justify-content",
      "justify-content",
      "-webkit-box-ordinal-group",
      "-webkit-order",
      "-moz-box-ordinal-group",
      "-ms-flex-order",
      "order",
      "-webkit-box-sizing",
      "-moz-box-sizing",
      "box-sizing",
      "width",
      "min-width",
      "max-width",
      "height",
      "min-height",
      "max-height",
      "margin",
      "margin-top",
      "margin-right",
      "margin-bottom",
      "margin-left",
      "padding",
      "padding-top",
      "padding-right",
      "padding-bottom",
      "padding-left",
      "table-layout",
      "empty-cells",
      "caption-side",
      "border-spacing",
      "border-collapse",
      "list-style",
      "list-style-position",
      "list-style-type",
      "list-style-image",
      "content",
      "quotes",
      "counter-reset",
      "counter-increment",
      "resize",
      "cursor",
      "-webkit-user-select",
      "-moz-user-select",
      "-ms-user-select",
      "user-select",
      "nav-index",
      "nav-up",
      "nav-right",
      "nav-down",
      "nav-left",
      "-webkit-transition",
      "-moz-transition",
      "-ms-transition",
      "-o-transition",
      "transition",
      "-webkit-transition-delay",
      "-moz-transition-delay",
      "-ms-transition-delay",
      "-o-transition-delay",
      "transition-delay",
      "-webkit-transition-timing-function",
      "-moz-transition-timing-function",
      "-ms-transition-timing-function",
      "-o-transition-timing-function",
      "transition-timing-function",
      "-webkit-transition-duration",
      "-moz-transition-duration",
      "-ms-transition-duration",
      "-o-transition-duration",
      "transition-duration",
      "-webkit-transition-property",
      "-moz-transition-property",
      "-ms-transition-property",
      "-o-transition-property",
      "transition-property",
      "-webkit-transform",
      "-moz-transform",
      "-ms-transform",
      "-o-transform",
      "transform",
      "-webkit-transform-origin",
      "-moz-transform-origin",
      "-ms-transform-origin",
      "-o-transform-origin",
      "transform-origin",
      "-webkit-animation",
      "-moz-animation",
      "-ms-animation",
      "-o-animation",
      "animation",
      "-webkit-animation-name",
      "-moz-animation-name",
      "-ms-animation-name",
      "-o-animation-name",
      "animation-name",
      "-webkit-animation-duration",
      "-moz-animation-duration",
      "-ms-animation-duration",
      "-o-animation-duration",
      "animation-duration",
      "-webkit-animation-play-state",
      "-moz-animation-play-state",
      "-ms-animation-play-state",
      "-o-animation-play-state",
      "animation-play-state",
      "-webkit-animation-timing-function",
      "-moz-animation-timing-function",
      "-ms-animation-timing-function",
      "-o-animation-timing-function",
      "animation-timing-function",
      "-webkit-animation-delay",
      "-moz-animation-delay",
      "-ms-animation-delay",
      "-o-animation-delay",
      "animation-delay",
      "-webkit-animation-iteration-count",
      "-moz-animation-iteration-count",
      "-ms-animation-iteration-count",
      "-o-animation-iteration-count",
      "animation-iteration-count",
      "-webkit-animation-direction",
      "-moz-animation-direction",
      "-ms-animation-direction",
      "-o-animation-direction",
      "animation-direction",
      "text-align",
      "-webkit-text-align-last",
      "-moz-text-align-last",
      "-ms-text-align-last",
      "text-align-last",
      "vertical-align",
      "white-space",
      "text-decoration",
      "text-emphasis",
      "text-emphasis-color",
      "text-emphasis-style",
      "text-emphasis-position",
      "text-indent",
      "-ms-text-justify",
      "text-justify",
      "text-transform",
      "letter-spacing",
      "word-spacing",
      "-ms-writing-mode",
      "text-outline",
      "text-transform",
      "text-wrap",
      "text-overflow",
      "-ms-text-overflow",
      "text-overflow-ellipsis",
      "text-overflow-mode",
      "-ms-word-wrap",
      "word-wrap",
      "word-break",
      "-ms-word-break",
      "-moz-tab-size",
      "-o-tab-size",
      "tab-size",
      "-webkit-hyphens",
      "-moz-hyphens",
      "hyphens",
      "pointer-events",
      "opacity",
      "filter:progid:DXImageTransform.Microsoft.Alpha(Opacity",
      "-ms-filter:\\'progid:DXImageTransform.Microsoft.Alpha",
      "-ms-interpolation-mode",
      "color",
      "border",
      "border-collapse",
      "border-width",
      "border-style",
      "border-color",
      "border-top",
      "border-top-width",
      "border-top-style",
      "border-top-color",
      "border-right",
      "border-right-width",
      "border-right-style",
      "border-right-color",
      "border-bottom",
      "border-bottom-width",
      "border-bottom-style",
      "border-bottom-color",
      "border-left",
      "border-left-width",
      "border-left-style",
      "border-left-color",
      "-webkit-border-radius",
      "-moz-border-radius",
      "border-radius",
      "-webkit-border-top-left-radius",
      "-moz-border-radius-topleft",
      "border-top-left-radius",
      "-webkit-border-top-right-radius",
      "-moz-border-radius-topright",
      "border-top-right-radius",
      "-webkit-border-bottom-right-radius",
      "-moz-border-radius-bottomright",
      "border-bottom-right-radius",
      "-webkit-border-bottom-left-radius",
      "-moz-border-radius-bottomleft",
      "border-bottom-left-radius",
      "-webkit-border-image",
      "-moz-border-image",
      "-o-border-image",
      "border-image",
      "-webkit-border-image-source",
      "-moz-border-image-source",
      "-o-border-image-source",
      "border-image-source",
      "-webkit-border-image-slice",
      "-moz-border-image-slice",
      "-o-border-image-slice",
      "border-image-slice",
      "-webkit-border-image-width",
      "-moz-border-image-width",
      "-o-border-image-width",
      "border-image-width",
      "-webkit-border-image-outset",
      "-moz-border-image-outset",
      "-o-border-image-outset",
      "border-image-outset",
      "-webkit-border-image-repeat",
      "-moz-border-image-repeat",
      "-o-border-image-repeat",
      "border-image-repeat",
      "outline",
      "outline-width",
      "outline-style",
      "outline-color",
      "outline-offset",
      "background",
      "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader",
      "background-color",
      "background-image",
      "background-repeat",
      "background-attachment",
      "background-position",
      "background-position-x",
      "-ms-background-position-x",
      "background-position-y",
      "-ms-background-position-y",
      "-webkit-background-clip",
      "-moz-background-clip",
      "background-clip",
      "background-origin",
      "-webkit-background-size",
      "-moz-background-size",
      "-o-background-size",
      "background-size",
      "box-decoration-break",
      "-webkit-box-shadow",
      "-moz-box-shadow",
      "box-shadow",
      "filter:progid:DXImageTransform.Microsoft.gradient",
      "-ms-filter:\\'progid:DXImageTransform.Microsoft.gradient",
      "text-shadow",
      "font",
      "font-family",
      "font-size",
      "font-weight",
      "font-style",
      "font-variant",
      "font-size-adjust",
      "font-stretch",
      "font-effect",
      "font-emphasize",
      "font-emphasize-position",
      "font-emphasize-style",
      "font-smooth",
      "line-height"
    ]
  ]
}

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

[cxhan]

看到最后没忍住 ，笑出来了，旁边leader投来了疑惑的目光！！！