husky

配置 - 硅谷甄选

我们已经集成好了我们代码校验工具 eslint，prettier，stylelint，但是需要每次手动的去执行命令才会格式化我们的代码。

我们想要强制让开发人员按照代码规范来提交。

要做到这件事情，就需要利用 husky 在代码提交之前触发git hook(git在客户端的钩子)，然后执行pnpm run format来自动的格式化我们的代码。

安装husky

pnpm install -D husky

执行

npx husky-init

会在根目录下生成个一个 .husky 目录，在这个目录下面会有一个 pre-commit 文件，这个文件里面的命令在我们执行 commit 的时候就会执行

在.husky/pre-commit文件添加如下命令：

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"
pnpm run format

当我们对代码进行 commit 操作的时候，就会执行命令，对代码进行格式化，然后再提交。

---

默认进行的是全量检查，存在耗时问题，历史遗留问题。

所以，要只看暂存区的代码（自己的代码），需要暂存区 eslint 校验。

lint-staged 配置

1. 安装

pnpm i lint-staged -D

2. 配置 package.json

{
  // ... 省略 ...
  "lint-staged": {
    "*.{js,ts,vue}": [
      "eslint --fix"
    ]
  }
}

{
  "scripts": {
    // ... 省略 ...
    "lint-staged": "lint-staged"
  }
}

3. 修改 .husky/pre-commit 文件

pnpm lint-staged

配置 - 仿问卷星

husky

git-hook

安装依赖

npm install husky -save-dev

参考文档 https://github.com/typicode/husky 增加三个 pre-commit 命令

npm run lint
npm run format
git add .

可以故意制造一个错误：定义一个未使用变量（eslint 配置文件 rules 增加 'no-unused-vars': 'error',）

然后执行 git commit 试试

commit-lint

参考文档 https://github.com/conventional-changelog/commitlint#getting-started 安装设置即可

commit 规则查看 node_modules/@commitlint/config-conventional （在 commitlint.config.js 中有配置）

尝试 git commit -m "test" 会失败，再尝试 git commit -m "chore: commit lint" 会成功