项目基建（四）Husky+Lint-staged+Commitlint-KLCode

代码提交规范

Husky + lint-staged：自动触发代码检查规范
commitlint：git commit规范

什么是git hook

git hook，是git 生命周期中执行的事件，也就是常说的 Git 钩子。

什么是husky

husky 是一个 Git Hook 工具，可以在git 生命周期在一些事件中，执行脚本或命令。通常关注 pre-commit 和 commit-msg钩子

.husky 目录默认会直接上传到仓库，并 git pull 时同步给所有开发者本地，前提是安装了husky

以下代码能保证都自动安装husky，方便开发者 husky配置统一

yarn set script prepare "husky install"

scripts:{
   "prepare": "husky install",
 },

什么是lint-staged

lint-staged 是一个专为 ‌**Git 暂存区（staged files）**‌ 设计的代码检查工具，通过在提交（commit）前仅对已暂存的文件运行代码规范检查（如 ESLint、Prettier），解决全量检查的效率问题，确保提交代码的质量与一致性‌

pre-commit，是对当前需要 commit 的文件（暂存区文件）进行校验、格式化等，而不是对全局文件校验

lint-staged的作用

精准检查范围
- lint-staged是文件过滤器，可以保证，检查的文件是暂存区文件
自动化修复与提交
- 与Eslint 结合，自动修复代码格式
- 可配置多种检查命令
Git 钩子集成
- 与 ‌husky‌ 结合，在 pre-commit 钩子中触发检查流程，阻止不符合规范的代码进入仓库‌

husky、lint-staged安装

执行命令

yarn add husky lint-staged -D

修改package.json配置

//一般常用的是 pre-commit 时 进行代码保存、格式化代码，与lint-staged 结合用
 scripts:{
   "prepare": "husky install",//9.0后改为 
 },
 //不同类型后缀文件执行不同指令
 "lint-staged": {
    "*.{js,ts,tsx,jsx}": [
      "eslint --ext .js,.ts,.jsx,.tsx --fix", //校验扩展名
      "prettier --write"
    ],
    "*.{html,md}": [
      "prettier --write"
    ],
    "*.{css,less,scss}": [
      "stylelint --fix",
      "prettier --write"
    ]
  }

husky创建pre-commit 钩子

pre-commit 钩子，主要用于触发 npx lint-staged 命令，执行代码检查

如果 husky: < 6.0.0 ，需要在package.json加上这部分代码


 "husky": {
    "hooks": {
       "pre-commit": "lint-staged"
    }
  },

6.x-8.x,需要在.husky pre-commit 文件配置

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

npx lint-staged

9.0.1

npx lint-staged

npm 和npx 的区别

NPM 负责资源管理，NPX 专注命令执行

1. 命令执行方式

‌NPM：
- 需先在项目中安装包，再通过 npm run <script> 或全局命令调用‌36。
- 示例：npm install webpack → webpack build‌。
‌NPX：
- 自动检查本地是否安装包：
  - ‌已安装‌ → 直接执行（优先使用项目本地包）。
  - ‌未安装‌ → 临时下载并执行（默认不保留包文件）‌

2.适用场景

NPM 适用场景：
- 长期依赖管理（如项目所需的 react、lodash）‌36。
- 运行预定义的脚本命令（如 npm start、npm test）‌67。
NPX 适用场景：
- ‌一次性命令工具‌（如脚手架 create-next-app、测试工具 jest）‌24。
- ‌避免全局安装‌（如临时使用特定版本的 webpack）‌

husky各版本变更

husky 6.0.0 版本前后，做了什么原理上的变更？

husky 6.0.0，替换了git配置文件（.git/config）的脚本目录路径，即：将.git/config 中的 core.hooksPath值改为.husky，从默认.git/hooks目录改为.husky 目录，且该目录会提交到远程仓库

https://zhuanlan.zhihu.com/p/366786798

8.x VS 9.x：

更便捷的husky init
echo "npm test" > .husky/pre-commit 创建文件
husky.sh 无用化 #1365

扩展：了解husky 6.x版本以前、6.x版本、8.x版本、9.x版本的改变

GitHub - typicode/husky-4-to-8: Quickly migrate your hooks from husky v4 to husky@latest

Release v8.0.0 · typicode/husky · GitHub

Release v9.0.1 · typicode/husky · GitHub

commitlint安装

http://itcan.cn/2022/09/21/commitlint-husky/

Getting started | commitlint

执行安装命令

yarn add @commitlint/cli @commitlint/config-conventional -D

创建配置文件

commitlint.config.ts

module.exports = {
  extends: ["@commitlint/config-conventional"],
  rules: {
    'custom-rule': [2, 'always'],
  },
  plugins: [
    {
      rules: {
        'custom-rule': ({ raw }) => {
          const msg = raw.replace(/\n/g, '')
          return [
            /^\[[A-Za-z]+:[\d]+\].+$/s.test(msg),
            'Your Commit Msg is NOT Correct!\nPlease Input Like This:\n[type:0000]some message',
          ]
        },
      },
    },
  ],
}

husky创建commit-msg 钩子

commit-msg 钩子，主要用于校验提交信息的格式问题