在之前的文章《通过 pre-commit 处理提交时代码规范》中介绍了当我们进行代码提交时,会检测所有的代码格式规范 。
但是这样会存在两个问题:
1. 我们只修改了个别的文件,没有必要检测所有的文件代码格式;
2. 它只能给我们提示出对应的错误,我们还需要手动的进行代码修改;
那么想要处理这两个问题,就需要使用另外一个插件 lint-staged 。
lint-staged 可以让你当前的代码检查 只检查本次修改更新的代码,并在出现错误的时候,自动修复并且推送。
lint-staged 无需单独安装,我们生成项目时,vue-cli 已经帮助我们安装过了,所以我们直接使用就可以了。
1. 修改package.josn的配置
"lint-staged": {"src/**/*.{js,vue}": ["eslint --fix","git add"]
}
如上配置,每次它只会在你本地 commit 之前,校验你提交的内容是否符合你本地配置的eslint规则,校验会出现两种结果:
1. 如果符合规则:则会提交成功;
2. 如果不符合规则:它会自动执行 eslint --fix 尝试帮你自动修复,如果修复成功则会帮你把修复好的代码提交,如果失败,则会提示你错误,让你修好这个错误之后才能允许你提交代码;
2. 修改 .husky/pre-commit 文件
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"npx lint-staged
通过以上操作,再次执行提交代码,发现暂存区中不符合 ESlint 的内容,被自动修复。