目录

参考文章

为什么需要审查样式代码

团队合作的时候,编写代码总会出现各种各样的问题,尤其是在样式的编写中,大量的css和scss代码书写中,或多或少会出现问题,这个时候在查找问题的来源的时候,总会浪费很多时间。

而且团队中的个人会编写出一些带有自己个人风格的样式代码,偶尔夹杂着一些自己写的一些小错误在其中,当时并未发现,之后随着时间的推移,代码库里的代码量的增多,在团队合作中,同事使用你的代码的时候或多或少的出现了问题,又或者是使用了错误的代码风格,导致给后期优化修改时带来了诸多不便。

这时候就需要一个可以检查出自己代码或者格式出现问题的工具了。跟js等代码一样,css也需要检查。当然,css检查代码的工具已经有很多出现了,不过我们这次呢,研究的是可以检查css和scss的stylelint。

审查有什么作用呢?审查是一个检查代码是否符合编程规范以及查找代码错误的过程,如果要做个比喻,那么它就是编程语言的拼写检查工具。代码审查可以帮助独立开发者更好的维护代码,但它更大的能力是帮助团队维护代码。

Stylelint 简介

Stylelint 是一个基于 Javascript 的代码审查工具,它易于扩展,支持最新的 CSS 语法,也理解类似 CSS 的语法。此外,因为它是基于 JavaScript,所以比起 Ruby 开发的 scss-lint 速度更快。

Stylelint 是一个强大和现代的 CSS 审查工具,有助于开发者推行统一的代码规范,避免样式错误。stylelint 由 PostCSS 提供技术支持,所以它也可以理解 PostCSS 解析的语法,比如 SCSS。

PostCSS 是一个使用 JS 解析样式的插件集合,它可以用来审查 CSS 代码,也可以增强 CSS 的语法(比如变量和混合宏),还支持未来的 CSS 语法、行内图片等等。PostCSS 的哲学是专注于处理一件事,并做到极致,目前它已经有了 200 多个插件,由于它们都是基于 JavaScript 编写的,所以运行速度非常快。

Stylelint 的作用

  • 捕获错误
    有些stylelint规则旨在找出明显的错误,其它的规则都是尽自己最大的努力捕捉更细微的错误。 还有一种规则使用了PostCSS的doiuse插件,用于检查你的浏览器是否支持此样式。另外一种则使用了css-colorguard插件用于提示颜色的相似性,以免造成你的混乱使用。
  • 强制执行最佳实践
    你可以花费一些时间在配置上,以保证绝对的一致性 – 你可以强制执行样式表属性的顺序,并为黑名单,白名单提供属性,值,函数还有单位。
  • 执行代码样式的约定
    stylelint具有自动执行代码样式的约定,所以你和你的队友无需主动设置。我们致力于使这些规则更加全面灵活。
  • 制定以及扩展一切
    配置是可扩展的,因此可以共享。至于插件,我们从ESLint了解了这一功能的价值性。如果你不喜欢 stylelint 的内置提示,你可以手工创建属于你自己的风格,甚至可以为你的组织进行创建。你还可以自定义用于提供警告信息的规则。使用stylelint的API,你可以创建文本编译器的插件,并进行测试使stylelint 融入到你的工作流的每个方面。