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

前言

• 为了保证代码质量，大部分前端项目会在 git commit 时候进行 lint 校验。使用的是 husky 与lint-staged 两个包来实现。
• 在 2021 年 1 月 27 日，husky 迎来了 v5 的大版本升级，配置方式较上一版本有了比较大的变化。此后再按照原来的套路配置 husky 和 lint-staged，结果将是钩子校验无法生效，下面是 husky v8版本的实现方法。

实现步骤

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

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

2. 安装依赖

yarn/npm i

安装完依赖后，会自动运行npm run prepare，此时会在项目根目录下生成.husky目录
3. 添加 pre-commit git hook

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

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

. "$(dirname "$0")/_/husky.sh" 

npm run lint-staged

也就是在执行 git commit 前会先执行 pre-commit 脚本
4. 配置 lint-staged
在项目的 package.json 文件中添加相关命令、配置

   "scripts": { 
     "lint-staged": "lint-staged",
   },
   "lint-staged": {
    "**/*.less": "stylelint --syntax less",
    "**/*.{js,jsx,ts,tsx}": "npm run lint-staged:js",
    "**/*.{js,jsx,tsx,ts,less,md,json}": [
      "prettier --write"
    ]
  },
}

这样后续执行 pre-commit 脚本时，就会运行脚本里面的 npm run lint-staged，实现提交代码时只检测暂存区的文件，配置到此，用命令行进行代码提交时，便可以成功进行代码提交检查。