背景
项目中如果同时使用了 eslint 和 prettier 的时候，无可避免的是两者会有冲突，而且冲突还是大面积的，如何避免两者打架呢？
一个原则：既然eslint负责项目的质量问题，prettier负责的是格式问题，那我们就应该充分信任prettier，把格式问题交给prettier，如果有一些比较重要的格式需要重点关注，我们可以在eslint的config中新增规则覆盖prettier规则即可
如何避免冲突 ？
如果手动屏蔽冲突，难免非常麻烦且不能解决所有的冲突，显然，我们遇到的问题，所有人都会遇到，是否有比较成熟的插件可以替我们做这个事呢？
答案显示是：有的！比如 eslint-config-prettier, 如果想让prettier的规则提示像eslint那样标红提示，则可以通过 eslint-plugin-prettier 插件设置
如何配置？
1. 确保项目及编辑器中已下载eslint和prettier
2. 安装eslint-config-prettier
pnpm add eslint-config-prettier
3. 在eslint的配置文件中添加如下配置
module.export ={
extends: [
// 其它规则
prettier, // 一定要注意prettier的优先级，最下面的最高优先级执行
]
}
4. 在vscode中开启自动使用prettier格式化，或者Shift + Option + F一键格式化
另外，eslint本身也在逐步完善中，据悉官方在6.0版本开始逐渐放弃样式相关规则，也相信不久的以后我们将无需面对这个问题
常见问题
即使按如上方式配置了，但是有时候还是不生效，那么可能的原因如下：
- eslint版本问题
- prettier是否安装
- prettier的规则被其它更高优先级的规则覆盖，因此在extends中，prettier要放在
最后一个选项中 - 编辑器比如vscode更新缓慢还未加载完全，此时我们可以
Command + Shift + P，然后输入reload window重启vscode
另外，闲来无事还可以逛逛本人其他专栏，如果能帮到你我也非常开心😋
《Webpack配置从基础到高阶系列专栏》文章推荐
《重学JavaScript系列专栏》其它文章推荐：
- 发布订阅者模式原来是这样 “搞事情” 的！
- script 和 async 和 defer到底啥区别？
- TypeScript类型体操之Partial、Required、Pick、Omit、Readonly
- 你家3岁小孩也能看懂的防抖和节流
- 手动模拟实现call、apply和bind方法---call和apply方法实现
- 手写call、apply、bind方法---bind方法实现
《手撕源码系列专栏》文章推荐
