EditorConfig vs. ESLint vs. Prettier：使用它们是否值得？

Question

EditorConfig vs. ESLint vs. Prettier：使用它们是否值得？

formattingeslintcode-formattingeditorconfigprettier

105

我正在尝试设置一些工具来帮助多个开发人员维护代码库的一致性。是否需要同时使用EditorConfig、ESLint和Prettier？

据我所知，EditorConfig用于设置编码风格/规则，ESLint用于确保代码按照规则进行格式化，如果代码不遵循规则会发出警告，而Prettier则基于规则自动格式化代码。然而，我相信您可以在Prettier中自定义规则，从而完成了EditorConfig的工作。这是真的吗？什么样的工具组合最适合用于维护一致的代码？

- PBandJen

5个回答

24

Prettier

Prettier会移除所有原本的样式，并确保所有输出的代码符合统一的风格。

它在代码编写完成后再对其进行更改。
例如：
- 通过 Visual Studio Code 编辑器保存
- 使用 CLI，如 prettier --write .

Editorconfig

EditorConfig 可以帮助多个开发人员在不同的编辑器和IDE上维护一致的编码样式。

它在编写代码之前应用你的规则，例如：

当你按下 TAB 时，它会留下四个空格。

ESLint

ESLint 静态分析你的代码，快速找出问题。

ESLint 在你的代码中查找问题。

总而言之：

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

最后：

它们有一些共同的特点，以便执行相同的操作。

我也同意KevinBrownTech的观点，使用这三个工具对于团队合作非常重要。

想深入了解的有用资源:

还可以查看 React 框架的存储库：

- Hasan Gökçe

10

我会使用EditorConfig（文件~/.editorconfig）和ESLint，但避免使用Prettier。它是一种有主见的代码格式化工具，可以确保一致性（这是一件好事），但可能有些过头。

代码风格是有主见的，我坚信最好的代码风格是你的团队或组织所认同的风格。只要讨论一下，并给每个人一个发表意见的机会，你就会拥有更多快乐的开发者。Prettier的问题在于他们强制性地将他们自己的观点强加给你，并且不提供关闭你不喜欢的功能的选项。他们缺乏配置选项，而且很可能永远不会添加，因为这与他们希望“停止所有关于代码风格的争论”的选项哲学相悖，而这只有在每个开发者都接受相同的代码风格时才能实现。

我个人认为这并不可取。首先，人们是不同的，他们想要使用不同的样式。其次，人们使用不同的语言，而Prettier的观点在某些语言（如Java/JavaScript）上明显比其他语言（如HTML）更好。

Prettier本可以通过配置来解决所有问题，并成为每个人都使用的格式化工具，但可惜的是（依我之见），他们不想成为“唯一的格式化工具”，而是想成为“唯一的代码风格”。我并不是说这完全是坏事，但他们的愿景可能并不适合你。如果你想自由决定你的代码看起来更好的方式，可以使用另一个格式化工具。

Prettier存在的问题*：

问题：移除有意设置的换行符

对我来说，Prettier最让人讨厌的事情就是将你的行合并起来，删除你为了提高可读性而故意添加的换行符 - 比如说你总是希望辅助功能标签在第二行 - 使用Prettier就无法实现！如果两行合并后长度不超过“print-width”，它们将被合并成一行，不管你想要什么！

问题：格式跳跃

在代码中很容易迷失方向。你写了三行代码，按下自动格式化的快捷键，突然完全迷失了，因为文件被完全重新格式化了。这对所有格式化工具来说都有一定的道理，但没有其他工具像它那样具有侵入性，并且为三行代码添加了大约15个换行符（见下一点）！

问题：打印宽度

Prettier使用“print-width”设置（参见Prettier选项），以确保行尾大致在相同的字符位置。例如，它会分割过长的行，这是所有代码格式化工具都会做的事情。Prettier以自己的主观方式进行处理。一个简短的HTML div，带有两个Angular指令，几个类和一些可访问性属性：

<div *ngIf="ability?.length > 0 && ! loading" tabindex="0" myCustomDirective class="col-lg responsive-input-wrapper d-flex align-items-center" role="navigation" aria-label="Primary">

现在，Prettier会将其格式化为这样：

<div
  ngIf="ability?.length > 0 && ! loading"
  tabindex="0"
  myCustomDirective
  class="col-lg responsive-input-wrapper d-flex align-items-center"
  role="navigation"
  aria-label="Primary"
>

那肯定对于自己来说更易读。不过有几点需要注意：在编辑HTML时，你很少关心所有的属性。通常你会有一个具体的目标。比如说你要给某个元素添加样式，那么你会扫描代码中的"class"属性，并更关注整体结构。

Prettier的问题在于：由于所有这些换行符，你的屏幕上可能只能容纳四个元素！虽然对于这四个元素来说，每个属性本身都非常易读，但是这对于整体结构的可读性来说代价太大了！

如果你对超过这四个元素感兴趣，你将不得不频繁滚动屏幕，这可能非常令人沮丧。对我来说，使用Prettier格式化的HTML（尤其是他们荒谬的推荐行长只有80个字符）非常难以阅读和理解。

大多数其他格式化程序会以不同的方式处理（或让您选择），并且仅在必要时拆分行，因此您只有两行而不是八行。所有内容仍然可见，无需水平滚动（我认为我们都同意这是可怕的，必须避免）。更好的是：一个明智的开发人员可以考虑在什么上下文中阅读什么重要，并提出一个保持相关内容在一行上的解决方案（例如，Angular属性和指令始终在第一行等）。

这可能看起来像这样：

<div *ngIf="ability?.length > 0 && ! loading"  myCustomDirective
     class="col-lg responsive-input-wrapper d-flex align-items-center"
     tabindex="0" role="navigation" aria-label="Primary">

这似乎是一个很好的折中方案。你只有三行代码，仍然可以看到整体结构的大部分，但属性的可读性也很高（尤其是在 Angular / Style / ARIA 之间的分割）。

然而，使用 Prettier 是不可能做到这一点的，因为它会折叠你有意的换行（参见问题1），或者将每个属性都写在新的一行上，即使这三行代码都可以适应打印宽度（问题3）。 何时使用它 只有在没有更好的选择时才使用 Prettier。比如说，在一个非常异质化的环境中，比如一个开源项目——来自世界各地、使用不同环境和 IDE 的人们共同工作。在这种环境中，很难解释和强制执行更合理的代码风格。Prettier 是这些情况下的一个很好的解决方案，因为在这种情况下，你不能依赖 IDE 的设置，而 .editorconfig 的功能又有限。

但对于你们这种有五个开发人员使用类似IDE和工具的典型工作项目来说，有更好、更灵活的选择，尤其是在格式化HTML方面。Editorconfig是一个很好的起点。更好的是：如果大家都使用相同的工具，你可以将项目格式化程序提交到版本控制中，每个人的IDE都会使用它。一些IDE（例如IntelliJ IDEA和WebStorm）还可以导入/导出你的格式化设置到其他IDE格式。

底线是：在HTML或其他标记语言中远离prettier。它很难阅读和维护，并且为了增加属性的可读性而牺牲了整体结构的可读性，而这些属性在99%的情况下都是无关紧要的（我个人认为）。

- Mario B

10

我认为需要同时使用ESLint和Prettier，但在某些情况下，可以考虑不使用EditorConfig。

如果您已经设置了编辑器以使用prettier自动格式化代码，则prettier和EditorConfig之间唯一的区别是它们使用的规则。

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

但是，如果您满意Prettier的规则，并且您的编辑器支持使用Prettier进行自动格式化，那么可以删除EditorConfig。

- apieceofbart

7

这是来自KevinBrownTech的更清晰的回答 from KevinBrownTech。

例如，当您使用Visual Studio Code prettier扩展时，它会在保存时格式化。它不会在您输入时进行格式化以匹配您的Prettier样式。例如，我使用制表符，如果没有EditorConfig，Visual Studio Code默认为空格，直到我保存，然后它将运行Prettier。

总之，.editorconfig的作用是配置您的编辑器，使您编写的代码已经格式化，而Prettier将格式化您已经编写的代码，ESLint确保您的代码符合其配置中设置的最佳实践或规则。

- Chris Josh

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- KevinBrownTech · Accepted Answer

根据我的经验，最好的组合是三者全部使用，原因如下：

EditorConfig：它可以帮助你的编辑器在编写代码时制定符合您的样式指南的代码格式。虽然这不是实现您目标的必要条件，但是如果您总是看着遵循相同编码样式的代码，那会很不错。否则，如果您没有设置EditorConfig，则在输入代码时，您的编辑器将自动按照与其余代码库不同的方式进行格式化，这是令人困惑的。当然，如果您已经设置了Prettier，它会在代码进入代码库之前修复它，但是为什么在编写代码时要以一种格式查看它，然后在提交时更改呢？最好保持一致。

Prettier：自动格式化您的代码。我喜欢把它设置为在暂存文件时进行格式化，这样我就无法提交不符合我的样式指南的代码。

ESLint：那么为什么还需要一个linter？因为ESLint不仅关注样式，还能检测出声明但未使用的变量或引用未定义的东西等其他问题。因此，尽管在Prettier问世之前它的作用有所减弱，但在项目中仍然有用，可以捕捉其他错误。