前端团队规范——husky + lint-staged 构建代码检查工作流（兼容Sourcetree）

前言

为了保证代码质量，大部分前端项目会在 git commit 时候进行 lint 校验。使用的是 husky 与lint-staged 两个包来实现。

在 2021 年 1 月 27 日，husky 迎来了 v5 的大版本升级，配置方式较上一版本有了比较大的变化。此后再按照原来的套路配置 husky 和 lint-staged，结果将是钩子校验无法生效，下面是 husky v8版本的实现方法。

其他规范可参考以下：

• 前端团队规范——vue项目强制限制node版本
• 前端团队规范——统一代码风格 ESLint + Prettier

实现步骤

1、在项目的 package.json 文件中添加相关依赖、命令

{


   "scripts": { 

     "prepare": "husky install" 
   },

   "devDependencies": {
     "husky": "^8.0.3",
     "lint-staged": "^13.2.3",
   },
}

2、安装依赖

npm i

安装完依赖后，会自动运行npm run prepare，此时会在项目根目录下生成.husky目录

3、添加 pre-commit git hook

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

可以发现 .husky 目录下新增了 pre-commit 脚本，内容如下：

#!/bin/sh 
. "$(dirname "$0")/_/husky.sh" 

npm run lint-staged

也就是在执行 git commit 前会先执行 pre-commit 脚本

4、配置 lint-staged

在项目的 package.json 文件中添加相关命令、配置

{


   "scripts": { 

     "lint-staged": "lint-staged",
   },

   "lint-staged": {
     "*.{js,vue}": [
       "eslint"
     ]
   },
}

这样后续执行 pre-commit 脚本时，就会运行脚本里面的 npm run lint-staged，实现提交代码时只检测暂存区的文件。

配置到此，用命令行进行代码提交时，便可以成功进行代码提交检查。但是对于 Mac 电脑使用 Sourcetree 工具的同学来说，是无法成功进行代码提交检查的，可能会报错 .husky/pre-commit: line 4: npm: command not found 下面给出相应的解决方案

Mac 兼容 Sourcetree

根据 husky github 上的 issue，解决方案是需要修改 scripts 里面的 prepare 命令

Mac 兼容 Sourcetree 的 issue

把 "prepare": "husky install" 修改成 "prepare": "husky install && echo 'PATH=$PATH:'$PATH >> .husky/_/husky.sh" ，运行 npm run prepare 后在 Mac 上可以成功使用 Sourcetree 提交代码，但是新的问题来了，那就是在 Windows 上的 Sourcetree 没办法使用了，为了兼容两端，用一个脚本来区分系统，根据系统执行不同的命令，具体实现如下：

1、 修改 package.json 中的 prepare 命令

{


  "prepare": "node prepare-husky.mjs",
  "prepare-husky-win": "husky install"
  "prepare-husky-mac": "husky install && echo 'PATH=$PATH:'$PATH >> .husky/_/husky.sh",
}

2、 在项目的根目录下创建prepare-husky.mjs文件

import os from 'os';
import { series } from 'async';
import { exec } from 'child_process';

// windows、Linux平台
if (os.type() == 'Windows_NT' || os.type() == 'Linux') {
  series([() => exec('npm run prepare-husky-win')]);
}
// Mac平台
if (os.type() == 'Darwin') {
  series([() => exec('npm run prepare-husky-mac')]);
}

3、 最后，运行npm run prepare

完整的package.json

{
   "scripts": { 
     "lint-staged": "lint-staged",
     "prepare": "node prepare-husky.mjs",
     "prepare-husky-win": "husky install"
     "prepare-husky-mac": "husky install && echo 'PATH=$PATH:'$PATH >> .husky/_/husky.sh",
   },
   "devDependencies": {
     "husky": "^8.0.3",
     "lint-staged": "^13.2.3",
   },
   "lint-staged": {
     "*.{js,vue}": [
       "eslint"
     ]
   },
}