实现eslint/stylelint的 git提交时拦截校验

想要达到的效果:

  1. 在我们提交代码时,先自动使用eslint/stylelint的检查代码,并自动修复错误
  2. 如果修复不了在报错。并且报错后此次的commit不会提交
  3. 对老代码无影响,只校验git commit部分的代码

使用到的工具介绍

安装: npm i -D husky lint-staged

  1. husky
    1. 一个 git 钩子工具,在这个需求中我们主要使用到了 pre-commit 钩子。
    2. 通俗点来说,就是 husky 可以在你 commit 之前帮你做一些事情。
  1. lint-staged

    1. 在你提交的文件中,执行自定义的指令。(比如执行eslint —fix)


    此工具还可以用于其他git commit之前的校验,如commitlint等等

具体配置

  1. // package.json
  2. {
  3. "husky": {
  4. "hooks": {
  5. ...
  6. "pre-commit": "lint-staged" // pre-commit,提交前的钩子
  7. }
  8. },
  9. "lint-staged": {
  10. // 此处可以配置文件夹和文件类型的范围
  11. "src/**/*.{js,vue}": [
  12. "eslint --fix", // 先使用 eslint 进行自动修复
  13. "git add" // 通过的话执行 git
  14. ]
  15. "src/**/*.{html,vue,css,sass,scss}": [ // 同上,配置stylelint
  16. "stylelint --fix",
  17. "git add"
  18. ]
  19. },
  20. ...
  21. }