前端规范工具之husky与lint-staged

团队日常开发中为了统一编码规范，我们经常会用到eslint工具，统一配置校验规则后执行eslint就可以对代码就行检查，但是这样会有代码一些问题：

每次检查都对全量代码进行检查，浪费时间
每次需要手动执行命令、依赖于开发人员的主观能动性，可能大多数时候会跳过检查直接提交

husky和lint-staged介绍的两个工具就是解决这两个问题的

husky

Git 本身是可以配置很多hook的、可以打开项目下的 .git/hooks 看到很多文件，比如：

pre-commit：在提交前运行，用于检查代码格式、运行测试等。
prepare-commit-msg：在生成默认提交信息后、编辑器启动前运行，可用于动态修改提交信息。
commit-msg：在提交信息编辑完成后运行，用于验证提交信息格式。
post-commit：提交完成后运行，常用于通知或记录提交信息。
pre-push：在推送代码前运行，可用于验证推送内容。所有hook参考官网但是这些文件保存在本地，更改之后只有当前电脑生效、无法同步到同事之间，这个时候husky就登场了

介绍husky

husky 参考官网介绍 Husky 增强了你的提交和更多功能 🐶 woof！在提交或推送时自动检查你的提交消息、代码并运行测试。而且它可以植入代码中，使你配置的hook保存，更多功能可以参考这里

引入husky

首先需要安装husky，用npm、yarn、pnpm都可以、这里使用yarn

csharp 复制代码

yarn add husky -D

然后初始化

csharp 复制代码

npx husky init

运行完之后我们可以看到项目中多了个.husky文件夹，文件夹内部有一个pre-commit和 _

_ 下面是husky运行所需脚本，该文件不会提交到git仓库，每次运行husky命令自动生成
pre-commit文件即我们要执行的hook

我们将pre-commit文件原内容删除改为

arduino 复制代码

npm run lint

并在package.json中配置lint命令

json 复制代码

"lint": "eslint",

这时候我们更改一个文件，然后commit、可以看到eslint 命令正常执行了，只有eslint不报错才能正常提交

lint-staged

前面我们已经配置好了在commit时候自动执行eslint检查代码，解决了手动执行eslint的问题，lint-staged就是解决另一个每次提交全量校验的问题

介绍lint-staged

lint-staged 只针对暂存的 git 文件运行格式化器和代码检查器等任务，即只对你git add后的文件运行命令，更多内容

引入lint-staged

一样的我们需要安装

csharp 复制代码

yarn add lint-staged -D

然后我们在package.json 中增加

css 复制代码

"lint-staged": {
  "*.{js,jsx,ts,tsx,vue,md,html,css,json}": [
    "eslint --fix"
  ]
}

这时候我们只要执行npx lint-staged就可以看到eslint朝着我们期望的方式执行了，不用npx执行的话我们也可以把这个命令放到package.json中

json 复制代码

"lint-staged": "lint-staged"

然后我们只需把pre-commit文件中的内容换成

arduino 复制代码

npm run lint-staged

这样我们每次提交有js、css等文件时候就会对该文件执行eslint检查了，最后我们需要将.husky中的pre-commit文件上传

团队共享

做到这一步如果换台电脑clone仓库安装后提交会发现其并没有生效，因为我们只提交了pre-commit，.husky/_下面的文件并没有提交、这个文件会在每次运行husky命令的时候生成，我们只需要将他加入npm scripts命令中即可

json 复制代码

  "scripts": {
    ...
    "prepare": "husky"
  },

这样每次我们在安装完之后就会自动生成husky/_下的内容

结合prettier使用

prettier和eslint 在我们项目中一个用于风格检查、一个用于错误检查，eslint错误检查这部分的错误往往需要手工更改、但是prettier风格检查这部分往往可以自动调整，比如间距、空格这类的我们可以在eslint前运行prettier --write将代码格式化之后再交给eslint就可以做到

css 复制代码

"lint-staged": {
  "*.{js,jsx,ts,tsx,vue,md,html,css,json}": [
    "prettier --write",
    "eslint --fix"
  ]
}

最后

本文介绍了将通过husky和lint-staged的集成、使得我们自动化代码检查，如果开发中确定是在不要lint的部分我们可以再commit命令后加-n参数跳过检查