VScode的 csscomb怎么配置和使用

每个人写css样式的时候可能习惯都不大一样，碰到团队开发就很难受。即使只是个人开发者，写样式时总要时时保证所有规范都一样也很困难。这个时候，就需要有个格式化工具，来帮我们处理这一部分工作。

html和js都有比较多的格式化工具，而且VScode本身也自带格式化选项（快捷键Shift+Alt+A），但是css的使用起来却并不是那么愉快。于是便找到了今天我们要聊到的这一个工具插件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这款插件就可以很好的满足这个需求，做到完全的自定义格式化。

CSScomb插件的安装及配置

直接在VScode的扩展里搜索CSScomb，然后点击安装即可

 然后打开setting，添加如下配置。这个是我自己用的配置，大家也可以按照自己的需求在csscomb.preset：{}自定义，或者使用官方的格式，如"csscomb.preset": "yandex"

  // csscomb设置为保存时为css排序
  "csscomb.formatOnSave": true,
  // 可以使用使用自定义排序风格, 或者使用官方推荐的三个: csscomb、yandex、zen
  "csscomb.preset": {
    "remove-empty-rulesets": true,
    "always-semicolon": true,
    "color-case": "upper",
    "block-indent": "  ",
    "color-shorthand": false,
    "element-case": "lower",
    "eof-newline": true,
    "leading-zero": false,
    "quotes": "single",
    "sort-order-fallback": "abc",
    "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",
    "tab-size": true
  }