在回答这个问题之前，我们先搞清楚什么ESlint和prettier分别是用来解决什么问题的？
1. 什么是ESlint
根据官方文档介绍，ESLint 是一个根据方案识别并报告 ECMAScript/JavaScript 代码问题的工具，其目的是使代码风格更加一致并避免错误。
ESlint完全是插件式的，每个规则都是一个插件，你可以在运行时添加更多插件，也可以添加社区插件、配置和解析器来扩展 ESLint 的功能。
2. 什么是Prettier
官方说Prettier，是一个opinionated的代码格式工具，opinionated我理解就是：如果想用它就得遵循它的规范。我们可以看到，其实Prettier提供的可配置规则很少，这也许就是它opinionated的地方，提供太多，大家都有自己的想法，反倒最后代码风格各式各样，就显得不opinionated。
要搞清楚用了ESlint，为什么还要使用Prettier，我们得分析一下两者的区别。
3. ESlint和Prettier的区别
Prettier官网，将Prettier和Linters做了对比，根据介绍，我们可以知道ESLint/TSLint/stylelint等都属于Linters，它们分为两大类：
1）格式规则：例如：max-len、no-mixed-spaces-and-tabs、keyword-spacing、comma-style…
2）代码质量规则：例如 no-unused-vars、no-extra-bind、no-implicit-globals、prefer-promise-reject-errors...
Prettier 减轻了对格式规则类别的需求， Prettier 将以一致的方式从头开始重新打印整个程序，因此程序员不可能再在格式上犯错。
但是，Prettier 对代码质量规则类别没有任何帮助，这是 linter 提供的最重要的功能，因为它们会真正捕获代码中的错误。
总的来说，使用 Prettier 进行格式化，使用 linter 捕获错误。
读到这里你可能会疑问，ESlint不是支持了格式规则么，为什么我还需要用Prettier，这里就涉及它们的底层原理了。
例如，格式规则max-len，ESlint会校验该规则，如果你在项目中设置了该规则，它会提示你，但不会autofix，而Prettier就不一样，一行命令，它就能把你的代码全都变成一个风格。
这张图是ESlint的issue，有人提过max-len不能autofix这个问题，不过官方回答：不会针对max-len提供新功能，如果有需要，可以尝试写一个插件。
但是ESlint不仅仅只有这个规则如此，还有其他格式规则也不会自行修复，如果需要一个个新增插件，那Prettier不失为一种好的选择。
大家可以试试 no-mixed-spaces-and-tabs 这个格式规则，如果是spaces导致的错误，能自动修复，tabs后的错误，不能自动修复。
大家还可以去研究一下，Prettier和ESlint在格式规则这一块的实现原理有什么不同，为什么很多规则Prettier都能自动修复，但是ESlint官方却不提供这个功能呢？
综上，在项目中安装Prettier还是有其价值的，正如Prettier官方推荐的做法，我们可以用Prettier统一代码风格，用ESlint统一代码质量。
4. 如何安装Prettier
具体的安装教程，官方文档已经说的非常清楚，我只是搬运过来。
4.1 安装
第一步
安装Prettier依赖包：
npm install --save-dev --save-exact prettier
# or
yarn add --dev --exact prettier
# or
pnpm add --save-dev --save-exact prettier
--save-exact的作用，就是固定依赖包的版本。
第二步
创建一个空的配置文件.prettierrc。可以直接创建文件，也可以使用命令：
node --eval "fs.writeFileSync('.prettierrc','{}\n')"
第三步
创建.prettierignore文件，配置不需要格式化的文件信息。例如
# Ignore artifacts:
build
coverage
提示1：如果项目中存在.gitignore和.eslintignore，请基于.gitignore和.eslintignore创建.prettierignore文件
提示2：如果你的项目不想格式化html文件，可以加上 *.html
经过上面三步，Prettier就安装完成了，这个时候可以执行命令，格式化所有文件。
npx prettier . --write
# or
yarn prettier . --write
# or
pnpm exec prettier . --write
以上命令会格式化所有文件，如果项目比较大，可能需要等待一会儿。我们可以在--write后指定具体的路径，也可以在.prettierignore里面忽略不想要格式化的文件。
如果设置了CI，我们可以运行以下命令，确保每个人都运行了Prettier。这可以避免合并冲突和其他协作问题。
npx prettier . --check
--check和--write类似，但--check仅检查文件是否已经格式化，而不是覆盖它们。
4.2 如何与ESlint
如果项目中使用了ESlint，可以安装eslint-config-prettier 插件，确保ESlint和Prettier更好的配合。这个插件会关闭不必要或可能与Prettier产生冲突的ESlint规则。
同样的，如果项目中有使用Stylelint，可以安装stylelint-config-prettier
4.3 Git hooks
除了用命令行运行Prettier、通过CI检查，或者通过编辑器运行Prettier外，我们还可以把Prettier作为pre-coomit钩子运行。这可以确保你提交的代码都是已经格式化后的。
我们执行以下步骤，以确保每次提交前都会运行Prettier：
第一步
安装husky和lint-staged：
# 使用npm
npm install --save-dev husky lint-staged
npx husky install
npm pkg set scripts.prepare="husky install"
npx husky add .husky/pre-commit "npx lint-staged"
# 使用yarn
yarn add --dev husky lint-staged
npx husky install
npm pkg set scripts.prepare="husky install"
npx husky add .husky/pre-commit "npx lint-staged"
# 使用pnpm
pnpm add --save-dev husky lint-staged
pnpm exec husky install
npm pkg set scripts.prepare="husky install"
pnpm exec husky add .husky/pre-commit "pnpm exec lint-staged"
第二步
将以下内容添加到 package.json
{
"lint-staged": {
"**/*": "prettier --write --ignore-unknown"
}
}
注意：如果使用了ESlint，确保lint-staged在Prettier之前运行ESlint。
更新信息可以查看Pre-commit Hook
