CSScomb配置 + Prettier实现css格式统一

1.问题

在配置使用CSScomb时，
无论是使用官方提供的 "yandex" ，会出现所有项均顶头显示

链接yandex.json

还是在网上找的一些配置，无法忽略一些无需配置的文件，且不能按我的需求：比如像width，height等必须在background-color的前面这些

2.解决

参考了一下yandex.json的代码，将二者一结合就成了！！！

  // csscomb为css排序
  // csscomb 保存时,为css排序
  "csscomb.formatOnSave": true,
  // 使用自定义排序风格, 官方推荐的三个: csscomb、yandex、zen
  "csscomb.preset": {
    "exclude": [
      // 排除指定文件或文件夹下的 CSS 文件
      ".git/**",
      "node_modules/**",
      "bower_components/**"
    ],
    "sort-order": [
      // 定义 CSS 属性的排序规则
      [
        // 第一个排序规则：定位属性
        "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"
      ],
      [
        // 第五个排序规则：其他属性
        // 这里是一些与文本、样式和效果相关的属性，以及一些兼容性的属性
      ],
      [
        // 第六个排序规则：字体属性
        "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"
      ]
    ],
    "remove-empty-rulesets": true, // 移除空的 CSS 规则集
    "always-semicolon": true, // 总是在声明末尾添加分号
    "color-case": "upper", // 颜色值转换为大写
    "block-indent": "  ", // 块级元素的缩进为两个空格
    "color-shorthand": false, // 不使用颜色值的简写形式
    "element-case": "lower", // HTML 元素选择器转换为小写
    "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 // 使用制表符进行缩进}
  }

3.补充

我发现了一个非常坑的事情，就是在我html的