72

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

4

4 回答 4

115

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

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

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

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

希望有帮助!

于 2018-01-27T01:34:33.063 回答
7

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

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

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

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

于 2020-06-24T08:27:10.167 回答
3

更漂亮

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

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

编辑器配置

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

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

ESLint

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

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

总结一下:

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

最后:

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

对于想要深入研究的有用资源:

另请查看 React 框架的 repo:

在此处输入图像描述

于 2021-11-23T10:38:15.187 回答
0

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

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

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

于 2021-11-12T06:58:13.583 回答