Prettier 和 ESLint

ESLint

ESLint 是一个 JavaScript 代码检查工具，根据给定的规则，它包括两方面作用：

1. 对代码的排版风格进行 formatter，比如行尾逗号、对象跨行展示、字符串单双引号等
2. 对不符合编程规范的「低质量」代码给出提示或进行修复，比如是否用了不严格等于、是否用 var、是否有声明但未被使用的变量等

Prettier

见名知义，prettier 是 pretty 的比较式，所以 Prettier 是一个 formatter，它所做的事也就是上面 ESLint 的作用 1，当然，formatter 的对象不仅仅只有 JavaScript，包括前端相关的各种格式（TypeScript、Vue、JSX、Angular、HTML、CSS、SCSS、Markdown 等）的文件。到此，人们自然会想，既然在 JavaScript 上相较于 Prettier，ESLint 的功能只多不少，那 Prettier 存在的意义是什么？诚然，ESLint 提供了丰富的配置以支持 format 出各种不同排版风格的代码，但是多的选择也就意味着排版风格的多样性，这在调和上也造成更多困难，而且即便是对同一单个规则，最后符合这个规则的排版格式也可能有多种，而这些多样性在一个以保证代码可维护性至上的多人团队中存在的必要性是否定的。Prettier 就是致力于减少那些 ESLint 无法减少的多样性的一个存在。

Prettier is an opinionated code formatter

上面是 Prettier 介绍 Prettier 为何物时的第一句话。opinionated 是灵魂，正是靠着 opinionated，多样性才会减少，一个团队里所有的代码风格的 consistentancy 才得以保证。opinionated 的体现在于，Prettier 只提供了远少于 ESLint 在 formatter 方面提供的十来个规则，这样一来在排版风格上可供讨论的内容大大减少。就好像两个人为一件微不足道的事争执不休，这时来了一个权威的人制止了他们，并让他们无条件的达成了统一，至于是什么样的统一并不重要，重要的是，统一就行了。

如何 integrate Prettier 和 ESLint

在知晓 Prettier 的作用后，我们打算专门让 Prettier 做 formatter 的事，ESLint 只做保证编程规范的事。那么需要将 ESLint 与 formatter 相关的规则全部 disabled 掉（因为可能会与 prettier 相关的 rule 冲突），然后依次执行 prettier --write 和 eslint --fix 或者将 prettier 的 rules 扩展到 eslint 的 rules 中，这样只需执行 eslint --fix。