Prettier有哪些ESLint无法实现的规则？为何要使用它？

如前所述，Prettier负责代码格式化，ESLint负责代码风格。前者可自动完成所有格式化操作，配置后能在保存文件时自动格式化，从此无需担心代码格式问题。由于Prettier具有高度主见性，仅支持少量配置。
而ESLint并非用于自动修复代码风格问题，它主要用于提示代码异味。

你提到的没错，上述观点里“ESLint并非用于自动修复代码风格问题”的表述并不准确——ESLint确实能处理不少样式类问题，比如行长度、缩进、换行风格等，而且Prettier的多数配置项，ESLint也有对应的替代规则。

已经用了ESLint，为什么还要加Prettier？ #

• 定位差异：ESLint的核心是代码质量检测，比如未定义变量、潜在逻辑bug、不符合最佳实践的写法，样式规则只是附加功能；而Prettier是专门为代码排版格式化而生，它的存在就是为了彻底解决团队内部的格式分歧。
• 无争议的格式标准：ESLint的样式规则有大量可配置项，不同团队可能调出完全不同的格式；但Prettier是“主见式”工具，它的规则几乎不需要额外配置，所有使用Prettier的团队都会输出一致的代码格式，从根源上避免格式争论。
• 格式化的全面性与效率：Prettier能覆盖更多细节场景，比如对象属性换行、箭头函数括号处理、模板字符串缩进等，它会一次性完成所有格式化操作；而ESLint的样式修复可能需要多次执行，且部分场景的处理精度不如Prettier。
• 减少规则维护成本：只用ESLint做样式需要手动维护大量规则，还容易出现规则冲突；配合Prettier时，可以用专门的配置关闭ESLint中与Prettier冲突的规则，让两者各司其职，降低维护负担。

Prettier独有的样式强制规则例子 #

• 对象属性的统一换行与尾逗号：当对象属性过多超出单行长度时，Prettier会自动将每个属性单独换行，且强制添加尾逗号，这个逻辑是内置无需配置的；ESLint需要手动开启多个规则才能实现类似效果，且无法做到完全统一的处理。
• 箭头函数参数括号的智能处理：当箭头函数只有单个普通参数时，自动移除多余括号；如果参数是解构语法或带类型注解，则自动保留括号，这个判断逻辑是Prettier内置的，ESLint需要单独配置arrow-parens规则来指定行为。
• 模板字符串的自动换行与缩进对齐：当模板字符串内容过长时，Prettier会自动拆分到多行，并保持内容与模板标签的缩进对齐，ESLint的相关规则很难实现这么精准的自动格式化。
• 数组元素的统一换行：数组元素数量较多或内容过长时，Prettier会自动将每个元素单独换行并添加尾逗号，确保格式一致；ESLint需要配置array-element-newline等规则，且灵活性和统一度不如Prettier。

内容的提问来源于stack exchange，提问作者JGleason