拥有一个完全符合一组代码风格指南的整个代码库,这真是太好了。 所有文件都使用相同的缩进,相同的引号样式,相同的间距和换行规则,甚至包括零值处理方式和关键帧命名方式等细微之处。
这似乎是一个很高的要求,但现在比以往任何时候都更容易。 我认为这已经成为一个双工具的游戏
- 一个工具可以自动修复易于修复的问题
- 一个工具可以警告更难修复的问题
一半的战斗: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 上写过关于它的文章。

有了这些警告,您可以快速手动修复它们。 这变得相当自然。
让一切都运转起来
这些工具可在多种代码编辑器中使用。

很容易想到“我只需要将它安装到我的代码编辑器中,它就会工作!” 我每次都会这样想。 让这些工具工作也是一个两部分的游戏。
- 安装代码编辑器插件。
- 执行 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,我相信几乎所有语言都有代码分析器。
相关
- Stylelint 共同创建者 David Clark 介绍 Stylelint
- Ashley Nolan 关于 Stylelint,其中包含一些有趣的历史和数据
- Stoyan Stefanov 关于整合 Stylelint 和 TextMate
- 执行 CSS 语法样式
- Artem Sapegin 关于为什么机器人应该为我们格式化代码
- 章节 来自 SurviveJS 关于代码格式化的内容。
- Mrm: 命令行工具,可帮助您保持开源项目的配置同步
有人有在 Visual Studio 2015 中使用它的技巧吗? 我可以在 JS 文件中看到上下文菜单,但不能在 CSS/SASS 文件中看到。
Visual Studio 扩展是 Mads Kristensen 编写的第三方扩展,他也是 Web Essentials 系列 VS 插件的负责人。据我所知,它只支持使用 Prettier 格式化 JS。
您也可以将 stylefmt 与 stylelint 一起使用,而不是 Prettier,因为它以 stylelint 期望的方式格式化 css。 它也遵循相同的规则。
这是一个很棒的看法! 在过去几个月里,stylelint 团队一直在考虑类似的方法。
为了帮助大家识别哪些 stylelint 规则可以检测到这些更难修复的问题,我们最近将 大型规则列表 分成了三个类别。
潜在错误.
限制语言特性.
风格问题.
“潜在错误”规则包括那些检测以下问题的规则:
重复项,例如
no-duplicate-selectors
和declaration-block-no-duplicate-properties
等。覆盖,例如
declaration-block-no-shorthand-property-overrides
和no-descending-specificity
等。无效的标准 CSS 语法,例如
color-no-invalid-hex
和keyframe-declaration-no-important
等。“限制语言特性”规则可用于:
禁止特定的值、单位、@规则和运算符,例如
declaration-property-value-whitelist
、unit-whitelist
、at-rule-blacklist
和selector-attribute-operator-whitelist
等。限制选择器的特异性和数量,例如
selector-max-specificity
、selector-max-class
、selector-max-combinators
等。强制选择器和自定义属性的模式,例如
selector-class-pattern
、selector-id-pattern
和custom-property-pattern
等。正如您所见,这两类规则检测的是更难修复的问题,需要人类大脑才能解决。
我们最近在 stylelint 中添加了
--fix
选项,并且目前正在将其推广到 stylelint 的 风格规则 中。这意味着 stylelint 可以(或很快就可以)自动修复许多易修复的问题,这些问题不需要任何人类大脑参与。(在 规则列表 中查找“(Autofixable)”标签以查看已支持的内容,并查看 CHANGELOG 以了解即将推出的内容。)我们是 stylelint 和 prettier 的忠实粉丝,并且 使用 prettier 来格式化 stylelint 的所有 JavaScript 代码。它满足了我们的格式化需求,特别是在 限制行长 时。我们在 stylelint 中添加了对
--fix
的支持,因为 stylelint 和 prettier 在格式化用例上略有不同。stylelint 是无意见的,可以配置为 支持各种风格约定。属性的顺序就是一个很好的例子,说明没有一两种占主导地位的约定。 stylelint-order 插件(支持--fix
选项)非常可配置,可用于 lint 和修复多种排序约定。stylelint(如文章中所述)擅长警告更难修复的问题。现在,它可以像 prettier 一样,自动修复一些易修复的问题。
用户可以选择最适合其特定格式化需求的工具。这意味着可能需要同时使用 stylelint 和 prettier 来格式化。例如,您可以使用 stylelint-order 插件 自动格式化属性的顺序,然后让 prettier 根据行长格式化样式表。同样,您可以使用 stylelint 来格式化空行数量(使用
*-empty-line-before
规则),然后将其他格式化工作交给 prettier 处理。或者,您可以先运行 prettier,然后使用 stylelint 微调格式 - 实际上有一个专门的工具,名为 prettier-stylelint,可以帮助您做到这一点。我们最近发布了一个新的配置,名为
stylelint-config-recommended
。此配置仅开启“潜在错误”规则,如果您想将 stylelint 与 prettier(或任何其他 CSS 格式化程序)一起使用,它是一个理想的起点。文章中提到的 standard 配置 在 recommended 配置的基础上构建,并开启了 60 多个风格规则,并具有合理的默认值。如果您想使用 stylelint 的--fix
选项(或如果您喜欢手动格式化代码),这是一个理想的配置。在使用任何一个配置时,我们建议您添加(并根据您的特定需求进行配置)一些 限制语言特性 的规则,因为这些规则可以真正帮助 CSS 代码库变得更加一致!
这与 Brackets 的 Beautify 相似吗?
时机正好,我正在考虑将 prettier 融入我们的项目,我们已经有了 stylelint
作为 CSSComb 的维护者,我必须推荐它作为替代方案 :)
查看 https://github.com/hugomrdias/prettier-stylelint 以轻松集成 prettier 和 stylelint。
希望它能帮到你
我为自己创建了这个工具,用于修复 prettier 输出中我不喜欢的一些内容,而 stylelint 可以修复这些内容。
Stylelint 正在移植 stylefmt 修复,因此随着时间的推移,它将能够修复更多内容。
prettier-stylelint 还包含一个 stylelint 配置,用于禁用冲突的规则,并与 vscode prettier 扩展集成。
有人同时尝试过 Stylelint 和 Sass-Lint 吗?我一直对 sass-lint 很满意,但我对 Stylelint 比它有什么优势很感兴趣。