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 // 使用制表符进行缩进}
}
标签:box,flex,align,配置,ms,webkit,CSScomb,font
From: https://www.cnblogs.com/trmbh12/p/18034910