CSScomb: 规范 CSS 属性顺序

·  阅读 799
CSScomb: 规范 CSS 属性顺序

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 Bashprocess.stdin.isTTY === undefined, 同上
  • 所以配置中必须显示地指定 TTY 模式,否则会导致 CSScomb 任务一直在处理中,没有报错也无法中止(因为一直在等待标准输入)。

参考

CSScomb


欢迎关注我的微信公众号:乘风破浪的Coder

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改