Prettier + Stylelint:编写非常干净的 CSS(或者,保持干净的代码是一个双工具游戏)

Avatar of Chris Coyier
Chris Coyier

DigitalOcean 为您旅程的每个阶段提供云产品。 立即开始使用 价值 200 美元的免费积分!

拥有一个完全符合一组代码风格指南的整个代码库,这真是太好了。 所有文件都使用相同的缩进,相同的引号样式,相同的间距和换行规则,甚至包括零值处理方式和关键帧命名方式等细微之处。

这似乎是一个很高的要求,但现在比以往任何时候都更容易。 我认为这已经成为一个双工具的游戏

  1. 一个工具可以自动修复易于修复的问题
  2. 一个工具可以警告更难修复的问题

一半的战斗:Prettier

也称为“请帮我修复”

据我所知,Prettier 是一个相当新的项目,它于 2017 年 1 月首次亮相。 现在到了 2017 年的最后季度,似乎每个人都在使用它。 他们称它为“有主见代码格式化器”

主要思想:在保存文档时,各种代码格式化会自动进行。 这真是一个美妙的事情。 缩进和间距得到纠正。 引号变得一致。 分号被添加。

对您的代码库运行 Prettier 一次,那些充满代码格式化杂乱的混乱提交将不复存在。(如果您在意,您可以考虑创建一个临时的 Git 用户,这样就不会看起来一个用户提交的代码行数比另一个用户多很多。)仅仅这一点就是一个非常不错的优势。 它使查看提交变得容易多了,并节省了大量繁琐的工作。

正如这篇文章所建议的那样,Prettier 只是半场战斗。 您会注意到 Prettier 只支持少量选项。 事实上,我敢肯定它刚推出时根本没有配置。 确实有主见。

它支持的内容是易于修复的,不需要任何人类脑力。 不小心使用双引号(Ugh,肌肉记忆),而您的样式指南是单引号? 砰的一声 - 在保存时更改。

还有一些其他可能的问题不容易修复。 例如,您使用了一个无效的 #HEX 代码。 您可能不希望计算机猜测您的意思。 最好是将其直观地标记为错误,以便您进行修复。

这就是接下来要介绍的内容。

另一半的战斗:Stylelint

也称为“让我知道问题,以便我可以修复它们”

Stylelint 正是如此。 事实上,在上面那个 GIF 中,您看到 Prettier 在做它的事情,您看到了一些红色圆点和红色轮廓在我的 Sublime Text 编辑器中。 那不是 Prettier 告诉我它要修复什么(Prettier 不显示任何错误,它只是修复它能修复的东西)。 那是 Stylelint 运行它的代码分析并向我显示这些错误。

Prettier 支持 10 条规则,而Stylelint 支持150 条规则 存在标准配置,但您也可以在这里根据自己的需要进行细粒度配置,并按照自己的意愿进行配置。 David Clark 去年在 CSS-Tricks 上写过关于它的文章

有了这些警告,您可以快速手动修复它们。 这变得相当自然。

让一切都运转起来

这些工具可在多种代码编辑器中使用。

这些是 Prettier 编辑器集成。 在所有这些之中,可能涵盖了 96% 的网页开发人员。

很容易想到“我只需要将它安装到我的代码编辑器中,它就会工作!” 我每次都会这样想。 让这些工具工作也是一个两部分的游戏。

  1. 安装代码编辑器插件。
  2. 执行 npm/yarn 安装操作。 这些是基于节点的工具。 这并不意味着您的项目需要在生产中与节点有任何关系,这是一个本地开发依赖项。

这些是刻意分开的。 这些工具的核心是分析您的代码并找出要修复问题的代码。 这是通过其他工具可以调用的 API 进行的。 这意味着这些工具不需要被重写和移植到新的环境中,相反,新的环境调用与其他人相同的 API,并执行它需要执行的操作。

上面是 Sublime Text 中一个简陋的项目,安装了 Prettier 和 Stylelint。 请注意 `package.json` 显示我们已安装工具,并且我列出了我的“包”,以便您可以看到我已经安装了 Sublime Text 插件 jsPrettier。 您也可以看到那里的点文件,它们配置了两个工具的规则。

不要让“js”部分误导您。 您可以将此设置用于 WordPress 网站的 CSS。 您的项目是什么并不重要。

变得更高级

这里肯定可以升级。 例如

  • 您可以考虑配置 Stylelint 以忽略 Prettier 修复的问题。 它们反正会被修复,所以为什么还要费心查看错误。
  • 您可以考虑更新您的部署流程,以便在发现 Stylelint 问题时停止。 有时候,Stylelint 向您显示的错误实际上会导致问题,因此它不应该进入生产环境。
  • 我们主要讨论了 CSS,但 JavaScript arguably 甚至更重要(Prettier 也支持)。 ES Lint 可能是在这里的方法。 也有一些工具,如 Rubocop 用于 Ruby,我相信几乎所有语言都有代码分析器。

相关