Husky 和 Lint-staged 入门指南Husky 和 Lint-staged 入门指南在你不能再说你不会配置

Husky 和 Lint-staged 入门指南

在你不能再说你不会配置ESLint和prettier了一文中我们讲了如何去配置eslint prettier stylelint等工具, 在开发阶段把问题暴露出来,但这些并无法完全解决代码格式的问题, 还是会造成线上代码风格不一致得情况, 这个时候我们需要git提交代码时对项目代码进行检查与格式化.接下来开始

`husky`

先安装husky

pnpm add husky -D

然后执行初始化操作

npx husky install

如果出现下图错误

请自己查看下是否已完成git初始化

初始化完成之后就会发现项目根目录出现.husky目录

然后新增npm前置钩子

{
  "scripts": {
    // 会在安装 npm 依赖后自动执行
    "prepare": "husky install"
  }
}

然后添加 Husky 钩子，在终端执行如下命令:

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

此命令会生成

现在，当你执行 git commit 的时候，会首先执行 npm run lint脚本，通过 Lint 检查后才会正式提交代码记录。

不过在自己测试的时候,就会发现执行这个会进行全量代码检查,这样肯定不行, 毕竟有些老项目,全量检测风险太大而且效率也很低, 所以这个时候lint-staged就是用来解决上述全量扫描问题的，可以实现只对存入暂存区的文件进行 Lint 检查，大大提高了提交代码的效率

`lint-staged`

接下来安装lint-staged

pnpm i -D lint-staged

然后在 package.json中添加如下的配置:

{
 "lint-staged": {
        "**/*.{vue,js,jsx,tsx,ts}": [
            "npm run lint:script",
            "git add ."
        ],
        "**/*.{scss}": [
            "npm run lint:style",
            "git add ."
        ]
    }
}

然后在.husky/pre-commit脚本中，将原来的npm run lint换成如下脚本:

npx --no -- lint-staged

这样一配置, 就只会对新改动的文件进行代码风格检查了

commitlint

除了代码规范检查之后，Git 提交信息的规范也是不容忽视的一个环节，规范的 commit 信息能够方便团队协作和问题定位。首先我们来安装一下需要的工具库，执行如下的命令:

pnpm i commitlint @commitlint/cli @commitlint/config-conventional -D

接下来新建.commitlintrc.js：


// .commitlintrc.js
module.exports = {
  extends: ["@commitlint/config-conventional"]
};

一般我们直接使用@commitlint/config-conventional规范集就可以了，它所规定的 commit 信息一般由两个部分: type 和 subject 组成，结构如下:

feat: 添加新功能。
fix: 修复 Bug。
chore: 一些不影响功能的更改。
docs: 专指文档的修改。
perf: 性能方面的优化。
refactor: 代码重构。
test: 添加一些测试代码等等。

其他更多的参考官方文档

github.com/conventiona…

接下来执行命令将其与husky钩子函数结合

npx husky add .husky/commit-msg "npx --no-install commitlint -e $HUSKY_GIT_PARAMS"

Husky 和 Lint-staged 入门指南