要解答这个疑问❓我们首先需要知道ESLint和Prettier是做什么的！！

什么是ESLint？

我们通过官网可知，ESLint是是在 ECMAScript/JavaScript 代码中识别和报告模式匹配的检查工具。它的目标是提供一个插件化的javascript代码检测工具,保证代码的一致性和避免错误。其使用 AST 去分析代码中的模式。

什么是Prettier？

也是查阅官网，Prettier是一个"有态度"的代码格式化工具，它支持大量编程语言，并几乎不需要设置参数。Prettier会按照配置其配置，将代码以统一固定的格式重新输出，其并不关心你格式化前的代码是什么样子的。

简单了解了ESLint和Prettier是什么之后，仍然没有办法解答，只用ESLint不好吗？让我们更深入的了解Prettier吧！

ESLint和Prettier的区别：

经过对Prettier官网Prettier vs. Linters的阅读得知：

ESLint/TSLint/stylelint这些工具都属于Linters。

Linters 有两类规则：Formatting Rules和Code-quality Rules。即格式化规则和代码质量规则。

Formatting rules（格式化规则），顾名思义，就是格式化代码，保证代码的一致性，如max-len, no-mixed-spaces-and-tabs, keyword-spacing, comma-style…

Code-quality rules（代码质量规则），保证代码的质量，避免报错，如no-unused-vars, no-extra-bind, no-implicit-globals, prefer-promise-reject-errors…

官网很明确的说明，

对于Code-quality rules相关的，Prettier 对这些规则没有任何帮助。它们也是 linter 提供的最重要的，因为它们可能会在您的代码中捕获真正的错误；

对于Formatting rules，Prettier 减轻了对这一整类规则的需求！ Prettier 将以一致的方式从头开始重新打印整个程序，因此程序员不可能再在那里犯错误了

这也正和前文提到的呼应，Prettier将代码以统一固定的格式重新输入，并且因为它不关心你原来的代码是什么，就算是坨屎，它也能给你格式化好。所以最后Prettier在本章节说道：

使用 Prettier 进行格式化，使用 linters 来捕捉错误！

进一步的了解之后，我们明白了Prettier的好处，但是还是没有解答我们的问题，既然ESLint也有Formatting Rules，也能进行格式化代码，为什么还要使用Prettier呢？为什么还会有Prettier呢？

为什么使用Prettier？

通过对Why Prettier? 的阅读，以及对Prettier的了解，我们知道Prettier仅仅是一个纯纯的代码格式化工具，并且万物皆可可视化。

对于格式化规则，它和ESLint这类不同的是：

ESLint是只有不符合某一个规则后，ESLIint才会进行格式化；

而Prettier是按照特定的格式，不管是否符合规则，全部都会进行格式化

这样说可能不太好理解，我们拿max-len举个🌰。

在ESLint中，

const {test1, test2, test3,test4} = obj;

const {test1,
test2,
    test3
    test4
} = obj;

这两种写法都符合max-len规则。

第二种写法虽然很🌶🐔，但并不会被ESLint修改。这也就会造成代码风格不统一，但如果使用Prettier，则这俩必须死一个，经过Prettier后，最后代码一定只有一种。

这也是前面提到的： Linters在不符合规则的时候才会格式化； Prettier是不管你符不符合规则，都会按照特定的规则格式化；

所以经过Prettier格式化后的代码，一定是风格相同的代码。

这样，我们在日常开发过程中，就不需要关注代码风格，因为无论怎么堆shi（不推荐，工具仅仅是作为兜底，良好的代码✍🏻习惯还是要在平时开发的时候注意📢，做优秀的打工人👷🏻‍♂️），最后的代码格式一定是一样的。

这里，好像能够解答我的问题了！但是我又看到了ESLint官网的：

你可以在 npmjs.com 搜索 “eslint-config” 使用别人创建好的配置。只有在你的配置文件中扩展了一个可分享的配置或者明确开启一个规则，ESLint 才会去校验你的代码。

ESLint没有找到适合的规则？创建自定义规则

我感觉我查的资料还是绕不过这里！还是没有说明Prettier一定需要！

接着整，接着看！！！

如何使用ESLint+Prettier进行代码格式化

这里，仅仅提供一下Prettier官网的思路

日常项目中，我们使用ESLint保证代码质量，使用Prettier保证代码风格统一。

首先我们通过对Integrating with Linters这一章节的阅读，我们可以知道：

通过使用这个配置，可以轻松关闭与 Prettier 冲突或不必要的规则：

eslint-config-prettier

顾名思义，关闭ESLint和Prettier冲突的代码格式化规则！

有一些插件可以让你像运行 linter 规则一样运行 Prettier：

eslint-plugin-prettier

这些插件能够在ESLint中实现Prettier功能

这样，ESLint就可以和Prettier一起无缝使用了。

还有一种思路，是使用

prettier-eslint

这个插件运行Prettier，然后执行eslint --fix，整套流程：

Code ➡️ prettier ➡️ eslint --fix ➡️

但这种方式会比仅仅运行Prettier慢得多，性能不好。

总结

写到这里，发现这篇儿更像是一个Prettier的介绍了。

我们知道了ESLint和Prettier各自的功能，各自的侧重点。

ESLint仅仅对 ECMAScript/JavaScript 进行检测；Prettier支持多种语言。
ESLint既能支持代码格式化，也能保证代码质量；Prettier仅仅是对代码进行格式化。
ESLint更加灵活，支持自定义规则（无限的可能性）；Prettier固执，设计之初就希望程序员不过多的关注依赖，所以导致灵活性不高，可配置项少（官网思想：如果觉得不够灵活，就不要用！！！）

目前接触到的项目，发现都是ESLint和Prettier结合；都是ESLint保证代码质量，Prettier保证代码风格统一。

虽然原来也有玩过，简单配过一个项目。但有了更深的了解后，接下来我会去真正的按照团队要求，真真切切的配置一套属于我们团队的统一规则方案！