在VScode中使用CSScomb

网上有很多类似的文章，我读了之后感觉不清晰，在家里安装时候顺便记录一下。

CSScomb主要是给CSS分类的，顺带排一下序，安装完插件后要配置一下，插件支持的框架很多。这篇文章主要讲如何配置。

请确保你已经进入到这步

image.png

"csscomb.formatOnSave": true 保存文件时自动运行插件

"csscomb.preset" 就是分类、排序的设定了，可以参考官方给出的三种。也可以单独建立一个json文件放在项目中，这里选择配置在编辑器里。

https://github.com/csscomb/csscomb.js/tree/dev/config 地址

我选的是csscomb.json 只复制"sort-order"即可

image.png

每个数组代表一种分类，出现的次序代表顺序，可以自由改动

image.png

其余的配置是跟格式相关的。推荐如下配置 效果为

image.png

配置如下

   "exclude": [
        ".git/**",
        "node_modules/**",
        "bower_components/**"
    ],
    "always-semicolon": true,
    "block-indent": "  ",
    "color-case": "lower",
    "color-shorthand": true,
    "element-case": "lower",
    "eof-newline": true,
    "leading-zero": false,
    "lines-between-rulesets": 1,
    "quotes": "single",
    "remove-empty-rulesets": true,
    "space-after-colon": " ",
    "space-after-combinator": " ",
    "space-after-opening-brace": "\n",
    "space-after-selector-delimiter": "\n",
    "space-before-closing-brace": "\n",
    "space-before-colon": "",
    "space-before-combinator": " ",
    "space-before-opening-brace": " ",
    "space-before-selector-delimiter": "",
    "space-between-declarations": "\n",
    "strip-spaces": true,
    "unitless-zero": true,
    "vendor-prefix-align": true,

image.png

"lines-between-rulesets": 1, 不同的分类下面加一个空行
"space-between-declarations": "\n", 每个样式后面换一样
colon 代表:
brace 括号

Tips:
当你发现高度不对时，不对齐时，看看自己是不是用了inline-block，解决的终极办法是要么不用，要么父元素设置font-size为0.