【译】antfu博客:为什么我不用Prettier

·  阅读 10240
【译】antfu博客:为什么我不用Prettier

我写这篇文章已经开始过很多次了,但是从来没有发布过。我没有办法找到一个合适的方式来表达我对Prettier的立场。但是这一次,我想我应该尽力地解释一下,为以后做准备做参考。

首先,我并不反对使用Prettier。实际上,我喜欢它

我喜欢Prettier

Prettier是一个很棒的工具,它帮我节省了很多时间。我感谢努力让Prettier成为可能的维护者和贡献者,他们为社区中简洁明了的代码的表现奠定了良好的基础。我不得不承认这个标题起得有点标题党。我经常在交互式文档和playground演示场的项目中使用Prettier,例如VueUseUnoCSS。我喜欢它的一点是它对许多语言支持开箱即用。集成Prettier的时间成本不到5分钟,我就可以通过Prettier来美化项目代码。

但是,为什么不呢?

如果你曾经浏览过我的开源项目,可能会发现我很少使用Prettier来格式化我的项目源代码。在这篇文章中,我会解释我做出这个决定的原因:

它是固执的

Prettier将自己介绍描述为“一个固执己见的代码格式化工具”

固执己见本质上意味着它并不适用于每一个人。Prettier做了很多硬编码的决定来提供一个最小的配置接口。这使得它非常易于使用(这一点非常好!),并且跨项目的代码保持一致。但是,另一方面,这也意味着您正在失去对代码外观进行细粒度调整的能力。

尽管我喜欢Prettier的大部分配置项决定,不过当你发现一些你不想要的配置并且没有解决方法时,它有时会让你心烦意乱。

换行的烦恼

让我很头疼的主要事情是基于代码长度的自动换行或不换行。Prettier有一个printwidth配置项,它限制每一行以适配一定的宽度(默认配置下,它是80字符)。让代码适应一个屏幕并避免界面水平滚动是很棒的。

但是,我经常发现它会降低可读性和损害git的代码对比。

@patak_dev最近在 PR 审查中提出了一个例子:

image.png

image.png

有时,当您在JavaScript中修改字符串文本时,可能会使该行比 printwidth配置的值长了一点点,Prettier会强制进行换行。它打破了内联差异并使代码变更难以审查。想一下在另一个代码合并请求中,我们可能会将字符串缩短一点,然后Prettier会将这些行自动美化回一行。行数变化的来回会产生很多不必要的麻烦。

真正的痛点是,这种行为不是配置可选的。开发者不能完全禁用它#3468)。增加printwidth配置的长度只会延迟这种情况,并且会影响你未触及的其他文件。

下图显示了另一个示例:

image.png

左边是输入代码,右边是Prettier的输出。它遵循的规则过于严格,实际上使代码更难阅读和修改,违背了让代码更具可读性的最初目标。(printWidth配置为42是为了演示例子而配置的,printWidth可以配置为任意值。)

同样,不好的一点是,这是强制性的。你可以做的唯一解决方法是使用// @prettier-ignore,对我来说,这首先失去了使用Prettier的意义。我并不是因为这个来批评Prettier。只是他们的意见观念不符合我的需要。

与 ESLint 混淆

Prettier作为代码格式化工具,只关注代码格式而不会去关注代码逻辑。因而我们看到,在项目中同时使用 ESLint 和 Prettier 来检查代码是很常见的。如果你自己配置过它们,你可能会注意到它们之间有一些功能是重叠的 -- ESLint 也可以用来格式化代码。通常的做法是使用eslint-config-prettier在 ESLint 中禁用这些重复的规则。

对我来说,这种方法造成了很多混乱:

image.png

另一方面,ESLint 也可以像 Prettier 一样进行代码格式化 -- eslint 有更多的配置选择自由。

备选方案

ESLint 对我来说是确保代码质量必不可少的。由于 ESLint 能够进行代码格式化,所以对我来说最好的选择是一次配置好 eslint,可以多次复用配置。因此我花了一些时间配置我的 ESLint 并将其设置为配置预设。

@antfu/eslint-config

事实证明,设置配置也可以非常少:

npm i -D @antfu/eslint-config
复制代码
// .eslintrc
{
  "extends": "@antfu"
}
复制代码

这就是你所需要的配置。@antfu/eslint-config的工作方式与Prettier类似,但尊重你在何时打破界限修改配置的选择,并提供了许多代码格式化的最佳实践。哦,当然,@antfu/eslint-config是针对我的需求实现的,也很固执。但也许,它可能是你创建自己的eslint-config版本的一个很好的参考。

总结

这篇文章只是在解释我的个人经历和观点。当然,你可以持有不同的看法,完全不需要同意我的看法。工具有不同的目的和重点,工具没有好坏之分。这只是在正确的情况下使用正确的工具。在不需要最大可定制性的用途中,我仍然是 Prettier 的快乐用户,并继续将 ESLint 专门用于项目源代码。

希望这可以让我自己清楚,也许会给你一些见解。干杯!

原文链接

antfu.me/posts/why-n…

收藏成功!
已添加到「」, 点击更改