如何在项目中使用prettier和eslint去规范项目的代码

213 阅读1分钟

prettier(git提交自动格式化)

让我们先安装,命令行yarn add --dev --exact prettier

然后让我们新建一个配置文件,通过命令行

echo {}> .prettierrc.json

image.png

默认配置,所以里面为空就行,后续想单独加配置可以添加

对于不需要格式化的文件,我们通过新建一个

.prettierignore配置文件用来解决

image.png

配置自动格式化

官网中推荐使用husky,那让我们先通过命令安装下

npx mrm@2 lint-staged

安装后让我们看下package.json

image.png

这里按照我这么配置就好了,左边的是需要格式化的文件类型,右边的是格式化脚本命令,可自行运行命令验证下

可通过修改任意的代码,然后通过git提交看下是否自动格式化

搭配eslint使用

为了能正常使用,我们需要做些配置,我这边用的react-create-app创建的项目,所以自带的eslint,就不用额外安装了,如果项目中没有,需要自己去安装下

现在安装eslint的依赖包 yarn add eslint-config-prettier

image.png

标注的地方添加上,这里是指用prettier的规则替代了一部分eslint的规则