ESLint 与 Prettier：代码库的大辩论

让我们面对现实：JavaScript 和 TypeScript 开发人员喜欢争论工具。

制表符还是空格？分号与否？现在，这个古老的（JavaScript 年代）问题：我应该使用 ESLint、Prettier 还是两者都使用？

这是一份友好的指南，可以帮助您理解这种疯狂，其中充满了幽默感和大量对开发人员友好的见解。

认识竞争者

ESLint：侦探

ESLint 是您出色的队友，他不仅会发现错误，还会主动提供有关您的代码风格的建议。

它是一个静态代码分析工具，可确保您的代码正常运行并且遵循规则（当然是您的规则）。

更漂亮：美容师

Prettier 就像那个朋友，他会整理你凌乱的头发，而不问你是否喜欢它。

这是固执己见、无情的，而且都是关于格式化你的代码以使其看起来干净和一致。

你可能不同意它的所有决定，但至少它是一致的！

他们做什么

功能 ESLint 更漂亮 标题>

Feature	ESLint	Prettier
Report code errors	Yes	No
Automatically fix code errors	Yes	No
Add custom rules/options	Yes	No
Formatting	Yes	Yes
Opinionated configurations	Optional	Yes

报告代码错误 是 否 自动修复代码错误 是 否 添加自定义规则/选项 是 否 格式 是 是 自以为是的配置 可选 是 表>

主要区别：

• ESLint 是大侦探福尔摩斯：它会捕获那些偷偷摸摸的未使用变量或意外的全局范围声明。
• Marie Kondo 更漂亮：它会整理你的代码，但不关心是否存在错误。

为什么 Prettier 存在

Prettier 的诞生是因为格式化辩论消耗了宝贵的时间和精力。

if关键字后面应该有空格吗？行长应该是 80 还是 100？ Prettier 说：“闭嘴，让我来处理。”

它以一致的方式重新打印您的整个代码库，使空格和选项卡上的自行车棚成为过去。

权衡？可配置性较低——你只能坚持 Prettier 认为最好的。 （剧透：通常没问题。）

但是 ESLint 也格式化......对吧？

是的，但事情是这样的：

• ESLint 的格式化规则可能与 Prettier 发生冲突。
• 在一个工具中维护代码质量规则和格式规则......很混乱。

ESLint 开发人员自己也承认，结合 linting 和格式化并不理想。

引入 Prettier：一个专用格式化程序，可以减轻 ESLint 肩上的格式化负担。

您应该同时使用两者吗？

黄金法则

使用 Prettier 进行格式化。使用 ESLint 来保证代码质量。

如何让他们打得好

1. 安装 eslint-config-prettier。这会禁用可能与 Prettier 冲突的 ESLint 格式规则。
2. 将其添加到您的 .eslintrc 配置中：

   {
     "extends": [
       "eslint:recommended",
       "plugin:prettier/recommended"
     ]
   }

1. 让 Prettier 格式化您的代码，让 ESLint 捕获真正的错误。

你还需要更漂亮吗？

如果您：

• 讨厌关于格式规则的长时间争论✓
• 希望整个团队保持一致的代码 ✓
• 使用高度固执己见的 ESLint 配置（如 Airbnb）并对它的格式感到满意 - 也许不是。

Prettier 在一致性至上的大型团队中表现出色。但如果您单独工作或者已经对 ESLint 的格式感到满意，那么您可能不需要它。

比较表：ESLint 与 Prettier

Aspect	ESLint	Prettier
Nature	A static code analysis tool and linter for JavaScript, focused on identifying code issues	A code formatter designed to make code more readable and consistent
Primary Purpose	Ensures code quality and detects potential bugs	Focuses purely on consistent code formatting
Configuration	Highly customizable; rules are defined in a .eslintrc config file	Minimal customization; enforces standard formatting rules with optional tweaks in .prettierrc.json
Integration	Works with popular IDEs, offering real-time feedback and auto-fixing of linting issues	Easily integrates with IDEs to format files automatically on save

最后的想法

• ESLint 是您代码的安全网。它可以捕获错误、实施最佳实践并确保质量。
• Pretty是你的和平守护者。它可以停止关于格式的争论，并使您的代码看起来整洁有序。

TL;DR

使用 Prettier 来格式化。使用 ESLint 来分析。如果您有疑问，请记住：工具的存在是为了让您的生活更轻松，而不是更困难。

选择最适合您的团队和您的理智的方法。

祝您编码愉快，愿您的 linting 和格式永远和谐！

---

我一直在开发一个超级方便的工具，叫做 LiveAPI。

它旨在让开发人员轻松编写 API 文档。

使用LiveAPI，您可以快速生成交互式API文档，允许用户直接从浏览器执行API。

如果您厌倦了为 API 手动创建文档，这个工具可能会让您的生活变得更轻松。

从 Lama2 到 LiveAPI：构建超级便捷的 API 文档（第二部分）

Hexmos 的 Athreya 又名 Maneshwar ・ 2024 年 12 月 14 日

#webdev #javascript ＃编程 #初学者

以上是ESLint 与 Prettier：代码库的大辩论的详细内容。更多信息请关注PHP中文网其他相关文章！