webstorm中使用csscomb格式化代码

因为个人编写css样式时，比较喜欢将同一个容器的样式连在一起书写，但是webstorm和phpstorm默认的代码格式化工具，都会粗暴的将所有代码打散成一句一行。如下：

//希望格式化后的代码样式
.box1 {
  width: 100px; height: 200px; background: red;
}
//而不是像下面这样
.box2 {
  width: 100px;
  height: 200px;
  background: red;
}

因此，我们就需要借助一些外部的CSS代码格式化工具，csscomb是其中比较知名的一款。csscomb不仅可以实现与编辑器一样的代码格式化效果，而且还会帮我们对样式代码重新排序，一般推荐的CSS样式书写顺序为：

1.位置属性(position, top, right, z-index, display, float等)
2.大小(width, height, padding, margin)
3.文字系列(font, line-height, letter-spacing, color- text-align等)
4.背景(background, border等)
5.其他(animation, transition等)

当然，不同的公司或团队会有自己的一些个性化的缩进、排序等方面的要求，此时借助csscomb可以帮助我们很好的完成此项工作。

接下来，我们讲解如何在webstorm/phpstorm中安装并使用csscomb样式格式化工具。

一、安装csscomb

在终端中使用命令：npm install -g csscomb

当然使用npm的前提是你的电脑安装了node运行环境。

二、在webstorm或者phpstorm中引入外部工具

【文件】-》【设置】打开设置面板，【工具】-》【外部工具】

点击【+】号，弹出创建面板，对照填入以下信息：

名称：CSScomb 
程序：C:\Users\你当前的系统用户名\AppData\Roaming\npm\csscomb.cmd
实参：$FilePath$ -v -t
工作目录：$FileDir$

默认全局安装csscomb之后，程序位置即为：C:\Users\你当前的系统用户名\AppData\Roaming\npm\csscomb.cmd，如果你使用的是开发依赖等，则需手动设置程序存放的目录。

三、配置csscomb

添加完外部程序后，我们还需要创建一个.csscomb.json文件，作为.csscomb的配置文件，可以放置在项目的任意位置：以下是我自己配置的一份文件，大家可参考使用

{
  "remove-empty-rulesets": true,
  "always-semicolon": true,  // 总是显示分号
  "color-case": "lower", // 十六进制颜色统一，可选值'lower'全部小写；'upper'全部大写
  "block-indent": "  ", // 代码块缩进，可以是数字或字符串与空白和制表符等
  "color-shorthand": true, // 十六进制颜色缩写与否
  "element-case": "lower", // 选择器元素统一，可选值'lower'全部小写；'upper'全部大写
  "eof-newline": true, // 文件结束后添换行
  "leading-zero": false, // 是否需要小数点前的0
  "quotes": "single",  // 引号风格，可选值'single'单引号，'double'双引号
  "remove-empty-rulesets": true,  // 是否移除空规则集，为true时，如：'a{  }'这样的空规则集将被移除
  "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": " ", // 选择器之后的规则
  "space-before-selector-delimiter": "", // 选择器之前的规则
  "space-before-closing-brace": "\n", // '}'  之后的规则
  "strip-spaces": true,  // 是否修剪尾随的空格
  "indent": "tab", // 将缩进设置为制表符
  "tab-size": 4, //  // 缩进大小，也可以改为true
  "unitless-zero": true,  // 是否移除0后的单位值，比如'0px'格式化为'0'
  "vendor-prefix-align": true, // 是否对齐属性和值中的前缀
  "lines-between-rulesets": 0, // 规则与规则之间的换行数
  "sort-order": [
    [
      "content",
      "z-index",
      "position",
      "float",
      "top",
      "right",
      "bottom",
      "left",
      "overflow",
      "overflow-x",
      "overflow-y",
      "-ms-overflow-x",
      "-ms-overflow-y",
      "display",
      "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",
      "border",
      "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",
      "-webkit-box-sizing",
      "-moz-box-sizing",
      "box-sizing",
      "line-height",
      "text-align",
      "-webkit-text-align-last",
      "-moz-text-align-last",
      "-ms-text-align-last",
      "text-align-last",
      "background",
      "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader",
      "background-attachment",
      "background-color",
      "background-image",
      "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",
      "background-repeat",
      "color",
      "opacity",
      "font",
      "font-style",
      "font-variant",
      "font-weight",
      "font-size",
      "font-family",
      "font-size-adjust",
      "font-stretch",
      "font-effect",
      "font-emphasize",
      "font-emphasize-position",
      "font-emphasize-style",
      "font-smooth",
      "vertical-align",
      "white-space",
      "-ms-word-wrap",
      "word-wrap",
      "word-break",
      "-ms-word-break",
      "cursor",
      "-webkit-transform",
      "-moz-transform",
      "-ms-transform",
      "-o-transform",
      "transform",
      "-webkit-transform-origin",
      "-moz-transform-origin",
      "-ms-transform-origin",
      "-o-transform-origin",
      "transform-origin",
      "-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-box-shadow",
      "-moz-box-shadow",
      "box-shadow",
      "filter:progid:DXImageTransform.Microsoft.gradient",
      "-ms-filter:\\'progid:DXImageTransform.Microsoft.gradient",
      "text-shadow",
      "visibility",
      "clear",
      "clip",
      "zoom",
      "flex-direction",
      "flex-order",
      "flex-pack",
      "flex-align",
      "table-layout",
      "empty-cells",
      "caption-side",
      "border-spacing",
      "border-collapse",
      "list-style",
      "list-style-position",
      "list-style-type",
      "list-style-image",
      "quotes",
      "counter-reset",
      "counter-increment",
      "resize",
      "-webkit-user-select",
      "-moz-user-select",
      "-ms-user-select",
      "user-select",
      "nav-index",
      "nav-up",
      "nav-right",
      "nav-down",
      "nav-left",
      "-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-decoration",
      "text-emphasis",
      "text-emphasis-color",
      "text-emphasis-style",
      "text-emphasis-position",
      "text-indent",
      "-ms-text-justify",
      "text-justify",
      "letter-spacing",
      "word-spacing",
      "-ms-writing-mode",
      "text-outline",
      "text-transform",
      "text-wrap",
      "text-overflow",
      "-ms-text-overflow",
      "text-overflow-ellipsis",
      "text-overflow-mode",
      "-moz-tab-size",
      "-o-tab-size",
      "tab-size",
      "-webkit-hyphens",
      "-moz-hyphens",
      "hyphens",
      "pointer-events",
      "filter:progid:DXImageTransform.Microsoft.Alpha(Opacity",
      "-ms-filter:\\'progid:DXImageTransform.Microsoft.Alpha",
      "-ms-interpolation-mode",
      "outline",
      "outline-width",
      "outline-style",
      "outline-color",
      "outline-offset",
      "box-decoration-break"
    ]
  ]
}

【注意】：在使用此配置文件时，请手动删除所有注释，在json文件中，不允许存在注释信息，且属性和属性值都需使用双引号包括。

将此配置文件放置在项目的目录下，然后在我们需要格式化的代码上，鼠标右键：选择【外部工具】-》【csscomb】即可完成对代码的格式化。

当然，你也可以根据自己的需求，对配置文件进行修改。以达到自己想要实现的自定义代码格式化效果。如果你想在node、vue等其他代码中使用csscomb，可查看csscomb的github地址（https://github.com/csscomb/csscomb.js）进行查看。