EditorConfig vs. Eslint vs. Prettier：值得全部使用吗？
EditorConfig vs. Eslint vs. Prettier: Is it worthwhile to use them all?
我正在尝试设置一些工具来帮助保持多个开发人员使用的代码库的一致性。 EditorConfig、ESlint、Prettier 有必要一起用吗？据我了解，EditorConfig 用于设置编码 styles/rules，ESlint 用于在代码不遵循规则时通过抛出警告来确保代码格式一致，prettier 用于根据规则自动格式化代码。但是，我相信您可以在 prettier 中自定义规则，这反过来又完成了 EditorConfig 的工作。这是真的？用于维护一致代码的最佳工具组合是什么？
根据我的经验，最好的组合是全部 3 个，原因如下：
EditorConfig：这有助于您的编辑器生成看起来像您的风格指南的代码。虽然这并不是实现您的目标所必需的，但如果您始终查看遵循相同编码风格的代码，那将是一件好事。否则，如果您没有 EditorConfig，当您输入时，您的编辑器将自动格式化为与代码库的其余部分不同的格式，这很容易混淆。当然，如果你设置了 prettier，它会在它进入你的代码库之前修复它，但是，你为什么要在编写它时以一种格式查看它，然后在你去的时候切换它承诺？最好保持一致。
Prettier：自动格式化你的代码。我喜欢在为提交暂存文件时将其设置为执行此操作，这样我实际上就不可能提交不符合我的风格指南的代码。
ESLint：那你为什么还要 linter？因为 ESLint 做的不仅仅是样式。当您声明不使用的变量，或引用未定义的事物时，它会出现，以及其他一些细节。因此，尽管与 prettier 之前的日子相比，它的作用有所减弱，但在项目中捕获其他错误仍然很有用。
希望对您有所帮助！
虽然我认为您显然需要 eslint 和 prettier，但实际上我认为至少在某些情况下您可以摆脱 editorconfig。
如果您的编辑器设置为使用 prettier 自动格式化代码，那么 prettier 和 editorconfig 之间的唯一区别是它们使用的规则。
例如 prettier 在某些情况下可能不会删除尾随的白色 space 或者它可能有一个无法更改的默认规则。
但是，如果您接受更漂亮的规则并且您的编辑器支持使用比我猜想更漂亮的自动格式，您可以删除 editorconfig。
这是来自@kevinBrownTech 的更清晰的回答。
when you use for example the VSCode extension for prettier, it
formats on save. It won't format while you're typing to match your prettier styles. For example, I use tabs, and without Editor
Config, VSCode defaults to spaces until I save, then it'll run
Prettier
总之，.editorconfig 的作用是配置你的editor，让你写的代码已经格式化，而Prettier会格式化您的已编写的代码，EsLint 确保您的代码符合其配置中设置的最佳实践或规则。
更漂亮
它删除了所有原始样式并确保所有输出的代码符合一致的样式。
- 它会在编写您的代码后更改您的代码。
- 例如
- 使用 VSCode 编辑器保存
- 像
prettier --write . 这样的 CLI
编辑器配置
EditorConfig 有助于为跨各种编辑器和 IDE 处理同一项目的多个开发人员保持一致的编码风格。
- 它在编写代码之前应用您的规则
- 例如
- 当您按 TAB 时，它会留下 4 个空格。
ESLint
ESLint 静态分析您的代码以快速发现问题。
- ESLint 在您的代码中发现问题
总结一下：
- EditorConfig 更改您的 编辑器设置。
- Prettier 使用您的规则更新您的代码以 重塑您的代码.
最后：
- 为了做同样的事情，他们有一些共同的特征。
- 我也同意@KevinBrownTech 使用其中的 3 个。尤其是当您与团队合作时。
想要深入研究的有用资源：
- Feross Aboukhadijeh: Write Perfect Code With Standard And ESLint - JSConf.Asia 2018
- https://standardjs.com/
另请参阅 React 框架的 repo：
我会使用 .editorconfig 和 ESLINT，但要避免使用 prettier - 它是一种自以为是的代码格式化程序并确保一致性（这是一件好事）但它可能有点过头了。
Code-Style 固执己见，我坚信最好的 code-style 是 你的团队或组织认同的风格 - 只是讨论一下，给大家一个有机会被听到，您将拥有更多快乐的开发人员。 Prettier 的问题在于，他们直截了当地将 THEIR 意见强加给你，并且没有给你关闭困扰你的东西的选项。他们缺少 configuration-options 并且他们可能永远不会添加它们，因为这违背了他们 options philosophy 想要“停止所有正在进行的关于样式的争论”的想法，这只有在每个开发人员都接受相同的样式时才会发生.我个人认为这是不可取的。首先人们是不同的，想要使用不同的造型。 Second People 使用不同的语言，而且 Prettier 的意见 显然 在某些方面（如 Java/JavaScript）比在其他方面（如 HTML）工作得更好。更漂亮 可以 通过配置解决所有这些问题，并且真正成为每个人都使用的格式化程序，但遗憾的是（imo）而不是想成为 唯一的格式化程序 他们想成为 one CODE STYLE。并不是说这一切都不好，但他们的愿景可能不适合你 - 如果你想自由决定你的代码如何看起来更好，请使用另一个格式化程序。
更漂亮的问题：
问题：print-width
Prettier 使用“print-width”设置（参见 Prettier options）来确保行在同一字符周围的某处结束。例如，这将分解太长的行，这是所有 code-formatters 所做的事情。 Prettier 以他自己固执己见的方式来做这件事。 div 的简短 HTML 示例，包含 2 个 Angular 指令、一些 classes 和一些可访问性属性：
<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”属性并且对整体结构更感兴趣。更漂亮的是：有了所有这些换行符，您可以在屏幕上放置大约 4 个元素！虽然对于这 4 个元素，每个属性本身都具有很高的可读性 ，但整体结构的可读性却付出了巨大的代价 。如果您对 4 个元素以上的元素感兴趣，则必须滚动 很多，这可能会令人难以置信地沮丧。对我来说 HTML（尤其是他们荒谬的推荐行长度仅为 80）用 prettier 格式化非常难以阅读和理解。
大多数其他格式化程序会采用不同的方式（或让您选择）并仅在必要时拆分行 ，因此您只有 2 行而不是 8 行。一切仍然是没有水平滚动可见（我认为我们都同意这是可怕的并且必须避免）。更好的是：一个明智的开发人员可以考虑在什么情况下阅读什么是重要的，并可以提出这样的解决方案：
- 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">
这可能是一个很好的中间立场。你只有 3 行，仍然可以看到大部分的整体结构，但属性的可读性也很好（尤其是 Angular / Style / ARIA 之间的拆分）。
问题：删除谨慎设置的换行符
Prettier 做的另一件事是 合并 你的行，删除你故意添加的换行符以提高可读性 - 假设你 总是 想要辅助功能标签在第二行 -> Prettier 不可能做到！如果两行组合在“print-width”之内，无论您想要什么，它都会将它们折叠成一行！
问题：格式跳转
很容易忘记您在代码中的位置。您正在编写三行代码，按下 auto-format 热键，然后突然完全丢失，因为文件已完全 re-formatted。这对所有格式化程序来说都是正确的，但没有其他是侵入性的，并且为三行代码添加了 15 个换行符！
什么时候用
只有在没有更好的选择时才使用 prettier。假设这是一个非常异构的环境，就像一个开源项目——世界各地的人们在不同的环境中工作，IDEs 在做同样的事情。在这样的环境中很难解释和执行更明智的 code-styling。对于这些情况，Prettier 是一个很好的解决方案，因为你不能在这种情况下取决于 IDE 设置，.editorconfig 有点受限。
但是对于您的典型工作项目（大约 5 个开发人员使用相同的操作系统和工具），有更好、更灵活的选择，尤其是格式化 HTML。 Editorconfig 是一个很好的起点。更好的是：如果你们都使用相同的工具，那么您只需签入您的项目格式化程序，每个人的 IDE 都会使用它。某些 IDE（例如 IntelliJ/Webstorm）也可以 import/export 您的格式化程序设置为其他 IDE 格式。
我正在尝试设置一些工具来帮助保持多个开发人员使用的代码库的一致性。 EditorConfig、ESlint、Prettier 有必要一起用吗？据我了解，EditorConfig 用于设置编码 styles/rules，ESlint 用于在代码不遵循规则时通过抛出警告来确保代码格式一致，prettier 用于根据规则自动格式化代码。但是，我相信您可以在 prettier 中自定义规则，这反过来又完成了 EditorConfig 的工作。这是真的？用于维护一致代码的最佳工具组合是什么？
根据我的经验，最好的组合是全部 3 个，原因如下：
EditorConfig：这有助于您的编辑器生成看起来像您的风格指南的代码。虽然这并不是实现您的目标所必需的，但如果您始终查看遵循相同编码风格的代码，那将是一件好事。否则，如果您没有 EditorConfig，当您输入时，您的编辑器将自动格式化为与代码库的其余部分不同的格式，这很容易混淆。当然，如果你设置了 prettier，它会在它进入你的代码库之前修复它，但是，你为什么要在编写它时以一种格式查看它，然后在你去的时候切换它承诺？最好保持一致。
Prettier：自动格式化你的代码。我喜欢在为提交暂存文件时将其设置为执行此操作，这样我实际上就不可能提交不符合我的风格指南的代码。
ESLint：那你为什么还要 linter？因为 ESLint 做的不仅仅是样式。当您声明不使用的变量，或引用未定义的事物时，它会出现，以及其他一些细节。因此，尽管与 prettier 之前的日子相比，它的作用有所减弱，但在项目中捕获其他错误仍然很有用。
希望对您有所帮助！
虽然我认为您显然需要 eslint 和 prettier，但实际上我认为至少在某些情况下您可以摆脱 editorconfig。
如果您的编辑器设置为使用 prettier 自动格式化代码，那么 prettier 和 editorconfig 之间的唯一区别是它们使用的规则。
例如 prettier 在某些情况下可能不会删除尾随的白色 space 或者它可能有一个无法更改的默认规则。
但是，如果您接受更漂亮的规则并且您的编辑器支持使用比我猜想更漂亮的自动格式，您可以删除 editorconfig。
这是来自@kevinBrownTech 的更清晰的回答。
when you use for example the VSCode extension for prettier, it formats on save. It won't format while you're typing to match your prettier styles. For example, I use tabs, and without Editor Config, VSCode defaults to spaces until I save, then it'll run Prettier
总之，.editorconfig 的作用是配置你的editor，让你写的代码已经格式化，而Prettier会格式化您的已编写的代码，EsLint 确保您的代码符合其配置中设置的最佳实践或规则。
更漂亮
它删除了所有原始样式并确保所有输出的代码符合一致的样式。
- 它会在编写您的代码后更改您的代码。
- 例如
- 使用 VSCode 编辑器保存
- 像
prettier --write . 这样的 CLI
编辑器配置
EditorConfig 有助于为跨各种编辑器和 IDE 处理同一项目的多个开发人员保持一致的编码风格。
- 它在编写代码之前应用您的规则
- 例如
- 当您按 TAB 时，它会留下 4 个空格。
- 例如
ESLint
ESLint 静态分析您的代码以快速发现问题。
- ESLint 在您的代码中发现问题
总结一下：
- EditorConfig 更改您的 编辑器设置。
- Prettier 使用您的规则更新您的代码以 重塑您的代码.
最后：
- 为了做同样的事情，他们有一些共同的特征。
- 我也同意@KevinBrownTech 使用其中的 3 个。尤其是当您与团队合作时。
想要深入研究的有用资源：
- Feross Aboukhadijeh: Write Perfect Code With Standard And ESLint - JSConf.Asia 2018
- https://standardjs.com/
另请参阅 React 框架的 repo：
我会使用 .editorconfig 和 ESLINT，但要避免使用 prettier - 它是一种自以为是的代码格式化程序并确保一致性（这是一件好事）但它可能有点过头了。
Code-Style 固执己见，我坚信最好的 code-style 是 你的团队或组织认同的风格 - 只是讨论一下，给大家一个有机会被听到，您将拥有更多快乐的开发人员。 Prettier 的问题在于，他们直截了当地将 THEIR 意见强加给你，并且没有给你关闭困扰你的东西的选项。他们缺少 configuration-options 并且他们可能永远不会添加它们，因为这违背了他们 options philosophy 想要“停止所有正在进行的关于样式的争论”的想法，这只有在每个开发人员都接受相同的样式时才会发生.我个人认为这是不可取的。首先人们是不同的，想要使用不同的造型。 Second People 使用不同的语言，而且 Prettier 的意见 显然 在某些方面（如 Java/JavaScript）比在其他方面（如 HTML）工作得更好。更漂亮 可以 通过配置解决所有这些问题，并且真正成为每个人都使用的格式化程序，但遗憾的是（imo）而不是想成为 唯一的格式化程序 他们想成为 one CODE STYLE。并不是说这一切都不好，但他们的愿景可能不适合你 - 如果你想自由决定你的代码如何看起来更好，请使用另一个格式化程序。
更漂亮的问题：
问题：print-width
Prettier 使用“print-width”设置（参见 Prettier options）来确保行在同一字符周围的某处结束。例如，这将分解太长的行，这是所有 code-formatters 所做的事情。 Prettier 以他自己固执己见的方式来做这件事。 div 的简短 HTML 示例，包含 2 个 Angular 指令、一些 classes 和一些可访问性属性：
<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”属性并且对整体结构更感兴趣。更漂亮的是：有了所有这些换行符，您可以在屏幕上放置大约 4 个元素！虽然对于这 4 个元素，每个属性本身都具有很高的可读性 ，但整体结构的可读性却付出了巨大的代价 。如果您对 4 个元素以上的元素感兴趣，则必须滚动 很多，这可能会令人难以置信地沮丧。对我来说 HTML（尤其是他们荒谬的推荐行长度仅为 80）用 prettier 格式化非常难以阅读和理解。
大多数其他格式化程序会采用不同的方式（或让您选择）并仅在必要时拆分行 ，因此您只有 2 行而不是 8 行。一切仍然是没有水平滚动可见（我认为我们都同意这是可怕的并且必须避免）。更好的是：一个明智的开发人员可以考虑在什么情况下阅读什么是重要的，并可以提出这样的解决方案：
- 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">
这可能是一个很好的中间立场。你只有 3 行，仍然可以看到大部分的整体结构，但属性的可读性也很好（尤其是 Angular / Style / ARIA 之间的拆分）。
问题：删除谨慎设置的换行符
Prettier 做的另一件事是 合并 你的行，删除你故意添加的换行符以提高可读性 - 假设你 总是 想要辅助功能标签在第二行 -> Prettier 不可能做到！如果两行组合在“print-width”之内，无论您想要什么，它都会将它们折叠成一行！
问题：格式跳转
很容易忘记您在代码中的位置。您正在编写三行代码，按下 auto-format 热键，然后突然完全丢失，因为文件已完全 re-formatted。这对所有格式化程序来说都是正确的，但没有其他是侵入性的，并且为三行代码添加了 15 个换行符！
什么时候用
只有在没有更好的选择时才使用 prettier。假设这是一个非常异构的环境，就像一个开源项目——世界各地的人们在不同的环境中工作，IDEs 在做同样的事情。在这样的环境中很难解释和执行更明智的 code-styling。对于这些情况，Prettier 是一个很好的解决方案，因为你不能在这种情况下取决于 IDE 设置，.editorconfig 有点受限。
但是对于您的典型工作项目（大约 5 个开发人员使用相同的操作系统和工具），有更好、更灵活的选择，尤其是格式化 HTML。 Editorconfig 是一个很好的起点。更好的是：如果你们都使用相同的工具，那么您只需签入您的项目格式化程序，每个人的 IDE 都会使用它。某些 IDE（例如 IntelliJ/Webstorm）也可以 import/export 您的格式化程序设置为其他 IDE 格式。