CSScomb 是一款 CSS 代码样式格式化工具，你可以轻松地通过自定义配置让你的样式表更加美化和一致。它的主要特点是以指定顺序给 CSS 属性排序
安装
npm install csscomb --save-dev
使用
# 命令行
csscomb assets/css
# git bash
csscomb --tty-mode assets/css
配置
新建 .csscomb.json 配置文件并放置于项目根目录
该项目中有 多个预定义的配置可供选择：
- csscomb (默认配置)
- zen
- yandex (推荐)
推荐 yandex 配置，该配置仅处理属性顺序。 CSS 样式美化另外通过 Prettier 实现
自定义语法映射
默认情况下 CSScomb 仅通过对应的语法处理 *.css, *.less, *.sass and *.scss 文件。
你可以通过 syntax 配置自定义语法映射。比如通过 css 语法处理 *.wxss 文件。
{
"syntax": {
".wxss": "css"
}
}
lint-staged + CSScomb
通过 husky + lint-staged + CSScomb 实现在 Git 提交前进行 CSS 属性排序
其他细节请参考我的另一篇博客 《通过 husky + lint-staged 实现在 Git 提交前进行文件美化和代码校验》
{
"lint-staged": {
"src/**/*.wxss": [
"csscomb --tty-mode",
"prettier --parser css --write"
]
}
}
注意：lint-staged + CSScomb 时，必须以 TTY 模式运行命令
// CSScomb 源代码
if (options['tty-mode'] || process.stdin.isTTY) {
// 处理文件
processFiles(options._);
} else {
// 处理命令行标准输入输出
processSTDIN();
}
代码解析：
options['tty-mode'] => --tty-mode- 命令行执行情况下，尽管未指定
--tty-mode,process.stdin.isTTY仍然为true lint-staged + CSScomb情况下，process.stdin.isTTY === undefined, 未指定--tty-mode会错误地执行processSTDIN- 在
Git Bash中process.stdin.isTTY === undefined, 同上 - 所以配置中必须显示地指定 TTY 模式，否则会导致 CSScomb 任务一直在处理中，没有报错也无法中止（因为一直在等待标准输入）。
参考
CSScomb
欢迎关注我的微信公众号：乘风破浪的Coder
