【前端必会】让ESLint与Prettier一起玩耍

背景

上回说到ESlint和Prettier可能会有规则上的冲突，解决的办法有多种，好比不用Prettier

1. 不用Prettier也是一种选择
2. 配置相同的规则
3. 我们选择一种可以共存的方式
   
   可以参考这篇文章 https://www.jianshu.com/p/be27685feeee

安装

npm install eslint-plugin-prettier eslint-config-prettier --save-dev

格式化后发现还是使用了eslint的规则，



为什么呢？

装个谷歌的标准试试

npm install eslint-config-google --save-dev

{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": ["google", "prettier"],
  "plugins": ["prettier"],
  "overrides": [],
  "parserOptions": {
    "ecmaVersion": "latest",
    "sourceType": "module"
  },
  "rules": {
    "quotes":["error","single"]
    "prettier/prettier": "error"
  }
}

还是一样，提示必须使用单引号

原来eslint-config-prettier只是一个配置，这个配置被rules里的覆盖了，所以eslint的时候，使用了最终的规则，所以在这里我们不配置rules

{
 "env": {
   "browser": true,
   "es2021": true
 },
 "extends": ["google", "prettier"],
 "plugins": ["prettier"],
 "overrides": [],
 "parserOptions": {
   "ecmaVersion": "latest",
   "sourceType": "module"
 },
 "rules": {
   "prettier/prettier": "error"
 }
}

这回不报错了，由于prettier在extends中是最后一个，所以它的配置也会是优先级最高的

那么我们改一下代码，再试一下eslint的时候如果有文件是没有被格式化的会怎么样



（其实工具已经自动帮我们验证了），但是执行命令的时候针对的可以是整个项目目录

使用的单引号的时候会报错，prettier也会把错误的格式以eslint的方式打印出来

结果也是我们想要的。

总结

1. eslint与prettier已经可以相对愉快的玩耍了。
2. 总的来说，prettier提供了2个包来与eslint整合，config与插件
3. 配置一定要放到extends的最后一个
4. 如果还有特殊情况，把2边配置成相同的值应该可以解决一些特定的问题（备选方案）
5. eslint-config-prettier 只是配置，只是配置，只是配置