【问题标题】:EditorConfig vs. Eslint vs. Prettier: Is it worthwhile to use them all?EditorConfig vs. Eslint vs. Prettier:值得全部使用吗?
【发布时间】:2021-10-11 12:00:49
【问题描述】:

我正在尝试设置一些工具来帮助保持多个开发人员使用的代码库的一致性。有必要同时使用 EditorConfig、ESlint 和 Prettier 吗?据我了解,EditorConfig 用于设置编码样式/规则,ESlint 用于确保代码格式一致,如果代码不遵循规则则抛出警告,prettier 用于根据规则自动格式化代码。但是,我相信您可以在 prettier 中自定义规则,这反过来完成了 EditorConfig 的工作。这是真的?用于保持代码一致性的最佳工具组合是什么?

【问题讨论】:

    标签: formatting eslint code-formatting editorconfig prettier


    【解决方案1】:

    根据我的经验,最好的组合是全部 3,原因如下:

    EditorConfig:这有助于您的编辑器生成看起来像您的风格指南的代码。虽然这对于实现您的目标并不是绝对必要的,但如果您总是查看遵循相同编码风格的代码,那就太好了。否则,如果您没有 EditorConfig,当您键入时,您的编辑器的自动格式将与代码库的其余部分不同,这会令人困惑。当然,如果你设置了更漂亮的,它会在它进入你的代码库之前修复它,但是,你为什么要在编写它时以一种格式查看它,然后在你去的时候让它切换承诺?最好保持一致。

    更漂亮:自动格式化您的代码。当我为提交暂存文件时,我喜欢将其设置为执行此操作,这样我在物理上就不可能提交与我的样式指南不匹配的代码。

    ESLint:那你为什么还要一个 linter?因为 ESLint 不仅仅是风格。当您声明不使用的变量或引用未定义的内容时,它就会出现,以及其他一些细节。因此,虽然它的作用与以前更漂亮的日子相比有所减少,但在项目中捕获其他错误仍然很有用。

    希望有帮助!

    【讨论】:

    • 感谢@KevinBrownTech 的帮助回复!对于更漂亮,你知道是否有可能阻止更漂亮的基于每个逗号分解超过最大字符的函数(例如,对于超时或嵌套函数超过字符限制,更漂亮会将其分解为 3 个单独的行)
    • 你将不得不增加printWidth:prettier.io/docs/en/options.html#print-width
    • 我不明白为什么我应该同时使用 EditorConfig 和 Prettier。也可以使用 Prettier 在 IDE 中格式化代码。您也可以将 EditorConfig 集成到您的 CI 工具链中,因此不需要 Prettier。能详细解释一下吗?
    • 我支持@laprof 的评论。不明白为什么不直接使用 Prettier。可以使用更清晰的解释。
    • @laprof,例如,当您使用更漂亮的 VSCode 扩展时,它会在保存时格式化。在您键入以匹配您更漂亮的样式时,它不会格式化。例如,我使用制表符,并且没有编辑器配置,VSCode 默认为空格,直到我保存,然后它将运行 Prettier。正如我在答案中解释的那样,这并不重要,但保持一致性很好。你完全可以不用 Editor Config,但出于这个原因,我更喜欢拥有它。
    【解决方案2】:

    虽然我认为很明显你需要 eslint 和 prettier,但实际上我认为至少在某些情况下你可以摆脱 editorconfig。

    如果您将编辑器设置为使用 prettier 自动格式化代码,那么 prettier 和 editorconfig 之间的唯一区别就是它们使用的规则。

    例如,prettier 在某些情况下可能不会删除尾随空格,或者它可能具有无法更改的默认规则。

    但是,如果您对更漂亮的规则感到满意,并且您的编辑器支持使用更漂亮的自动格式化,我猜您可以删除 editorconfig。

    【讨论】:

      【解决方案3】:

      这是来自@kevinBrownTech 的更清晰的回答。

      例如,当您使用更漂亮的 VSCode 扩展时,它 保存时的格式在您输入时不会格式化以匹配您更漂亮的样式。例如,我使用选项卡,并且没有编辑器 配置,VSCode默认为空格,直到我保存,然后它会运行 更漂亮

      总之,.editorconfig 的作用是配置您的编辑器,以便您编写的代码已经格式化,而 Prettier 将格式化您的已经编写的代码。

      【讨论】:

        【解决方案4】:

        更漂亮

        它去除了所有原始样式并确保所有输出的代码符合一致的样式。

        • 它会在编写您的代码之后更改您的代码。
        • 例如
          • 使用 VSCode 编辑器保存时
          • 使用 CLI,例如 prettier --write .

        编辑器配置

        EditorConfig 有助于为跨各种编辑器和 IDE 处理同一项目的多个开发人员保持一致的编码风格。

        • 在编写代码之前应用您的规则
          • 例如
            • 当您按 TAB 时,它会留下 4 个空格。

        ESLint

        ESLint 静态分析您的代码以快速发现问题。

        • ESLint 在你的代码中发现问题

        总结一下:

        • EditorConfig 更改您的编辑器设置
        • Prettier 使用您的规则更新您的代码,以重塑您的代码

        最后:

        • 为了做同样的事情,它们有一些共同的特征。
        • 我也同意@KevinBrownTech 使用其中的 3 个。尤其是当您与团队合作时。

        对想要深入了解的有用资源:

        另请查看 React 框架的 repo:

        【讨论】:

          猜你喜欢
          • 2019-11-16
          • 2022-08-18
          • 2016-05-27
          • 2021-10-26
          • 2018-11-26
          • 1970-01-01
          • 2018-04-01
          • 1970-01-01
          相关资源
          最近更新 更多