git hooks怎么在我们项目中植入（pre-commit）

目的

我们代码中虽然安装了eslint和prettier等优化代码的措施，但是开发过程中，防止出现将格式或者使用上由明显问题的代码推送到仓库，我们需要采取一些措施来阻止代码被提交

方案

市面上已有成熟的方案

1. pre-commit
2. husky (相对来说，有更全面的git hooks存在，不只是有pre-commit，还会有pre-push等钩子)
   • 官方描述：在提交或推送时，自动化 检查提交信息、检查代码 和 运行测试

方案一：pre-commit

1. 安装

npm i -D pre-commit

2. 使用，就很方便，我们直接在package.json中配置如下pre-commit配置项，它的值就是 以scripts中命令的key为数组，这样我们在git commit执行的时候，就会预先执行里面添加的命令

"scripts": {
    "start": "node scripts/start.js",
    "build": "node scripts/build.js",
    "test": "node scripts/test.js",
    "server": "cd server && npm run start",
    "lint": "eslint . --color",
    "fix:lint": "eslint . --fix",
    "format:check": "prettier --check \"./**/*.{js,ts,tsx,json}\"",
    "format:fix": "prettier --write \"./**/*.{js,ts,tsx,json}\""
  },
"pre-commit": [
    "lint",
    "format:check"
  ]

方案二：husky

按照官网，提供的安装步骤就可以了，它会执行husky init 帮我们自动化搞好pre-commit的配置文件，在.husky目录中的pre-commit，这里你可以添加

npm run lint
npm run format:check

执行时机是同pre-commit方案一样的

一般大家在使用husky的时候，都会跟着lint-staged一起用

什么是lint-staged ? 官网
官网描述： 在提交代码之前运行Linting更有意义。通过这样做，您可以确保没有错误进入存储库并强制执行代码风格。但是在整个项目上运行lint过程很慢，lint结果可能无关紧要。最终，您只想提取将提交的文件。
此项目包含一个脚本，该脚本将使用一系列暂存文件作为参数运行任意shell任务，并通过指定的glob模式进行筛选。

意思就是，我们在执行lint类似功能的脚本，不会再全量执行所有文件，而是只会把当前暂存到git的暂存区（git add执行之后）的文件作为参数执行，是不是觉得很nice，不用跑那么久了

看大家个人兴趣挑选两种方式

我本人使用的是方案一，所有的工具没有好坏，只有是否合适自己当前即可。

然后我没有把lint-staged加入到项目中，后续也会加进去，等我实在受不了执行时间的话，哈哈哈哈哈

写到最后

如果博主该文帮到大家更好的理解了工程化上面使用到的一些辅助工具，那就给博主点个顺手的赞咯，在这里统一感谢大家啦！