用 husky 和 lint-staged 构建代码检查工作流-阿里云开发者社区

用 husky 和 lint-staged 构建代码检查工作流

2022-11-10 187

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 一个项目如果涉及到多人协作，由于每个人代码的书写习惯和风格不太一样，如果没有统一的规范，那就会很乱，这对代码的可维护性大大降低。

640 (3).png

前言

一个项目如果涉及到多人协作，由于每个人代码的书写习惯和风格不太一样，如果没有统一的规范，那就会很乱，这对代码的可维护性大大降低。

所以现代工程有个一环节就是代码风格检查(Code Linting，下面以 Lint 简称)，来保障代码规范一致性

现在也有很多保障代码规范一致性，比如：ESLint、prettier、SCSSLint、JSONLint 等。比较全的可以见 github 官方的 Lint 工具列表^[1]

本文不会介绍每一个工具怎么用，而是介绍怎么把这些工具串起来，构建一个代码检查的工作流。

最简单的方法

最简单的方法就是自己每次在 commit 代码之前先处理一下，以 eslint 举例：

eslint src/**/*.js
git add .
git commit -m 'feat: 一个新 feature'

这种方法有两个致命的缺点：

如果检测工具多，需要多次处理。

很容易遗忘。

通过 scripts 来解决如果检测工具多，需要多次处理

scripts 就是 package.json 里的 scripts。

比如你同时需要用到 prettier 和 eslint，可以定制一个脚本，然后运行这个脚本之后再提交代码：

{
  "scripts": {
     "lint": "prettier --write & eslint src/**/*.js"
  }
}

然后每次提交代码前就只需要：

npm run lint
git add .
git commit -m 'feat: 一个新 feature'

通过 husky(哈士奇)来解决容易遗忘的问题

虽然咱们通过 scripts 来解决检查工具多的问题，但是还有一个容易遗忘怎么解呢？

解决方案就是通过 husky，原理实际上是通过 git hooks^[2] 来解决，husky 就是让 git hooks 用起来更容易的工具。

“
You can use it to lint your commit messages , run tests , lint code , etc... when you commit or push. Husky supports all Git hooks^[3].
”

这个是 husky 官网的一句话，用来描述 husky 可以做什么。

那到底怎么解决呢？接下来介绍一下 husky 的使用方式：

1. 安装

安装 husky

npm install husky --save-dev

启用 git hooks

npx husky install

执行完之后文件根目录会多一个 .husky 文件夹：

640 (4).png

在安装后自动启用 git hooks

npm set-script prepare "husky install"

然后你可以看到 package.json 里增加一个 script

// package.json
{
  "scripts": {
    "prepare": "husky install"
  }
}

“
注意一个点：yarn 安装是不支持 prepare 这个生命周期的，需要将 prepare 改成 postinstall。具体可以见官网^[4]
”

2. 创建一个 precommit hook

npx husky add .husky/pre-commit "npm run lint"
git add .husky/pre-commit

执行完之后在 .husky 目录下会多一个 pre-commit 的文件，里面的 npm run lint 就是这个 hook 要执行的命令，后续要改也可以直接改这个文件。

640 (5).png

这个时候 commit 就会先自动执行 npm run lint 了，然后才会 commit。

但是这样解决了以上的问题，当项目大的时候会遇到一些问题，比如每次 lint 是整个项目的文件，文件太多导致跑的时间过久，另外如果这个 lint 是在项目后期接入的话，可能 lint 命令会报很多错误，全量去改可能会有问题。

lint-stadge 只 lint 改动的

基于上面的痛点，lint-stadge 就出现了，它的解决方案就是只检查本次提交所修改(指 git 暂存区^[5]里的东西)的问题，这样每次 lint 量就比较小，而且是符合我们的需求的。

“
如果不知道暂存区的需要去复习一下 git 知识，简单来说就是 git add 或者 git commit -a 的那部分代码会先放到暂存区。
”

lint-staged 用法如下：

1. 安装

npm install -D lint-staged

2. 修改 package.json 配置

{
   "lint-staged": {
 "src/**/*.js": "npm run lint"
   }
}

3. 设置 precommit 为运行 lint-staged

在完成上面的配置之后，可以手动通过 npx lint-staged 来检查暂存区里面的文件。

手动是永远不会手动的，自动的方法就是将 npx lint-staged 设置到 hook 里。

npx husky add .husky/pre-commit "npx lint-staged"

或者直接去改 .husky 下面 precommit 的文件。

到现在我们的代码检查工作流就完成了。在 git commit 的时候就自动的回去帮我们跑检查脚本，而且还是只针对我们本次提交的代码进行检查。

参考配置

react + less 项目 lint-staged 的配置可以参考：

{
   "lint-staged": {
    "**/*.less": "stylelint --syntax less",
    "**/*.{js,jsx,ts,tsx}": "eslint --ext .js,.jsx,.ts,.tsx",
    "**/*.{js,jsx,tsx,ts,less,md,json}": [
      "prettier --write",
      "git add"
    ]
   }
}