前端工程化(一)：使用Husky和lint-staged配置Git hook

但凡项目质量要求高会涉及到代码质量管理的问题,如何自动化检查代码质量。

git hook

git能在特定的重要动作发生时触发自定义脚本,这种钩子分为两种:一者是客户端的,另外一种就是服务端的。利用git hook,我们可以在提交之前运行脚本,但是脚本需要放在.git/hooks目录下面,团队协作中直接使用脚本是不利于团队内推广的。所以我们需要使用husky来解决这个问题。

安装husky

npm install husky --save-dev

如何使用

编辑package.json > prepare,然后运行一次:

npm set-script prepare "husky install"
npm run prepare

接着添加一个hook:

npx husky add .husky/pre-commit "npm test"
git add .husky/pre-commit

这样husky的配置就初步完成了。但是我们会发现,脚本执行的范围会是所有文件,随着项目体积的增加,文件数量会变得很多,全部走一遍脚本会很耗时间,这时候就需要lint-staged来限制脚本执行的范围,我们只执行在提交的代码上,不管其他未操作过的文件。

安装lint-staged

npx mrm@2 lint-staged

命令行执行这个脚本以后,就会在package.json默认生成一下类似内容:

{
  "lint-staged": {
    "*.{vue,js,jsx,cjs,mjs,ts,tsx,cts,mts}": "eslint --cache --fix",
    "*.{js,css,md}": "prettier --write"
  }
}

同时.husky文件下的pre-commit文件内容也会发生改变。
这样我们就完成提交的脚本操作了。