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