创建一个项目
新建一个文件夹，这里以demo为例
执行 npm init，一路回车，创建一个项目
新建一个index.js文件，存放测试用的代码
文件目录如下
在项目里面使用 Prettier
执行 npm install --save-dev --save-exact prettier 安装
安装好了之后，如下
然后在index文件里面写一段代码
这里使用了单引号，其次没有加分号，这些都是 prettier 不允许的
为了校验及修复以上的代码问题，需要执行prettier的命令修复以上问题
// npx prettier 自带的命令
// index.js 需要格式化的文件
// --write 直接写入修复
npx prettier index.js --write
执行了上面的修复命令之后，就可以看到，代码被修复了
以上的格式化规则都是prettier自带的，我们也可以自定义自己的规则，或者想覆盖它自带的规则
自定义prettier规则
在项目里面新建一个 .prettierrc 文件
自定义了一个允许单引号的规则
然后我们再次修改index文件为
然后执行修复命令 npx prettier index.js --write
可以看到结果为
这次只加了分号，单引号没有被修改。说明我们自定义的规则覆盖了默认的规则。
prettier忽略文件
.prettierignore
有时候有些文件不需要格式化，因此可以将文件的名字写入这个文件，prettier格式化的时候就会忽略这个文件了
在项目里面使用 ESLint
注意安装的版本，版本不同可能配置文件的名字不同，不然会导致不可用
安装 npm install eslint@8 --save-dev
修改index文件为
执行检查命令 npx eslint index.js
输出四个error 一个是语法问题 下面三个是风格问题(分号太多了被检测到了)
通过 npx eslint index.js --fix
可以看到只剩一个语法的error，风格的问题被修复了
index文件变成了如下
自定义ESLint规则
.eslintrc.js
新建一个.eslintrc.js文件
这个新建了一个风格的规则，不允许出现双引号
修改index文件为
执行检查命令
npx eslint index.js
可以看到输出了双引号的警告。风格类的规则可以通过 --fix直接修复
npx eslint index.js --fix
tips： 一般情况下，eslint我们是用来代码质量检测和修复的，风格类的检测由prettier实现，因此尽量避免使用eslint进行风格检测。
eslint忽略文件
.eslintignore
新建 .eslintignore 文件
不需要eslint检查的文件都可以放进去
命令行执行总结
安装完以上两个插件之后，文件夹的目录如上
以上两个文件，一个是JSON文件，一个是JS文件，建议使用JS文件，因为JSON文件不能添加注释
配合VS code编辑器使用
用命令行去执行代码的检测非常麻烦，操作繁琐，因次可以配合编辑器使用，在代码保存的时候进行代码的检测和修复。
安装Prettier插件
在编辑器的扩展里面安装Prettier插件
安装成功之后可以在文件的右下角看到，表明当前文件可以执行prettier格式化，因此只要配置编辑器保存自动格式化就行
如何配置编辑器的配置文件
找到左下角的设置，点击一下
继续点击设置 打开设置界面
按照 工作区 --> 文本编辑器 --> 格式化 --> 找到右边的格式化配置，勾选就可
当然点击右上角的设置 也可以直接打开设置JSON文件settings.json
刚才的设置的json就在这里
以上设置成功之后，修改index文件为如下
这里还没有保存，保存之后就会启动prettier的格式化
格式化之后的代码如下，可以看到
自动添加了双引号和尾部的分号
以上prettier配合编辑器 就完成了代码的格式化
总结一下
- 编辑器安装prettier插件
- 编辑器设置代码保存自动格式化
- 修改代码，保存修改
- 格式化完成
编辑器格式化会检索项目里面的配置文件，按照配置文件格式化，如果没有配置文件，会按照默认的规则格式化文件
安装ESlint插件
在安装ESLint插件之前，先把
编辑器的保存自动化关闭，不让prettier格式化生效
编辑器安装ESLint插件
在settings.json文件中，执行保存自动修复，且只修复eslint的报错
返回index修改，修改index文件为如下
这里可以看到代码还没有保存，但是eslint已经出现警告提示
当我们执行保存时，会修复eslint的风格的警告，如下
可以看到上面只剩一个语法类的警告，这个需要自己修改代码。
以上就是eslint执行代码修复的过程
总结
- 关闭编辑器的保存自动格式化
- 编辑器安装eslint插件
- 编辑器配置保存自动修复eslint的报错
- 保存代码 eslint自动修复
以上就整个过程
ESLint和Prettier 风格冲突解决方案
ESLint虽然主要是执行语法检测，但是里面也有一部分的风格检测，当和Prettier一起使用的时候，就不可避免的会有风格冲突的时候
解决方案参考另一篇文章juejin.cn/post/759832…
