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

Posted 2022-11-28 萧然似我

前言

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

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

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

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

最简单的方法

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

eslint src/**/*.js

git add .

git commit -m 'feat: 一个新 feature'

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

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

2. 很容易遗忘。

通过 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. 安装

1. 安装 husky

npm install husky --save-dev

1. 启用 git hooks

npx husky install

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

image.png

1. 在安装后自动启用 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 要执行的命令，后续要改也可以直接改这个文件。

image.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"
    ]
   

总结

本文笔者没有去详细介绍每个 lint 工具的使用和配置，也没有直接给一个构建代码检查工作流的最佳实践，而是一步一步从最原始到使用 git hooks、husky、lint-staged 各种工具来推导出最后的方案。

因为我觉得如果不把每个工具用来解决什么问题，为什么需要它说清楚，而是直接给一个最佳实践的 SOP，这样会成为一个无脑 copy 的执行者，当哪天找不到这篇文章的时候自己可能无从下手了，但是当你知道了自己遇到什么问题，应该怎么去解决之后，自己也可以从 0 配置一份出来。

参考

• 用 husky 和 lint-staged 构建超溜的代码检查工作流^[6]

• husky 官网^[7]

参考资料

[1]

Lint 工具列表: https://github.com/collections/clean-code-linters

[2]

git hooks: https://git-scm.com/book/zh/v2/%E8%87%AA%E5%AE%9A%E4%B9%89-Git-Git-%E9%92%A9%E5%AD%90

[3]

all Git hooks: https://git-scm.com/docs/githooks

[4]

官网: https://typicode.github.io/husky/#/?id=yarn-2

[5]

git 暂存区: https://www.4e00.com/git-zh/1-introduction.html#-ReHMS4ux

[6]

用 husky 和 lint-staged 构建超溜的代码检查工作流: https://segmentfault.com/a/1190000009546913

[7]

husky 官网: https://typicode.github.io/husky/#/

推荐阅读

我的公众号能带来什么价值？(文末有送书规则，一定要看)

每个前端工程师都应该了解的图片知识(长文建议收藏)

为什么现在面试总是面试造火箭？