问题描述
作为一名前端开发 eslint和prettier应该都不陌生
简单来说
- eslint 规范了代码的使用方式和代码风格，避免了使用方式的错误和简单统一风格
- 而prettier则是单纯用于规范风格的
之前的项目一直都只用了eslint没用prettier，感觉也没什么不妥；
但今天碰到个两个都用的项目，不知道是不是以前的开发都不开eslint的，代码拉下来满页的报错，点保存我直接原地爆炸，代码格式自动修复后又变回去了，怎么改都不行
原因其实就是eslint的自动修复先执行了，然后prettier的自动修复又把eslint格式化的代码又改了，然后eslint就会报错；其实就是两者的配置规则冲突了
解决方案
解决方案一：关了！别用prettier！烦！
-
解决方案二
修改其一的配置
我们可以看到prettier的官网上对prettier的介绍
Prettier is an opinionated code formatter；从这里可以大概感受到prettier的配置并不好改；反正我在官网翻来翻去只看到一些比较基本的规则修改；相反eslint的可配置规则就比较丰富了，因此我们可以考虑修改eslint规则来和prettier统一，eslint规则的修改在类似于
.eslintrc.js的文件里，下面修改了我项目里与prettier冲突的规则；其中rules的key表示规则名，
error表示规则模式，有offwarnerror三个等级，也可以用0 12替换，其中error等级就会阻塞运行
后来发现，其实有比较简单的修改方式，就是使用eslint-plugin-prettier插件
先安装
npm install --save-dev eslint-plugin-prettier然后修改eslint的配置
"extends": ['自己的eslint配置包', "prettier"]，将prettier放在最后，因为后面的配置项会覆盖前面的；-
然后修改rules，表示将prettier的规则配置写入eslint，这样将报错源统一为eslint，具体可以看官网
module.exports = { extends: ['xxxxConfig', 'prettier'], rules: { 'prettier/prettier': 'error', }, };
