Cao Note

外观

Husky 与 Commit 规范 ​

Husky ​

Husky 让 Git Hooks 配置变得简单。

安装 ​

bash
npm install -D husky
npx husky init

# 生成 .husky/ 目录和 pre-commit 钩子
npm install -D husky
npx husky init

# 生成 .husky/ 目录和 pre-commit 钩子

常用 Hooks ​

bash
# .husky/pre-commit — 提交前检查
npx lint-staged

# .husky/commit-msg — 提交信息规范
npx --no -- commitlint --edit $1

# .husky/pre-push — 推送前运行测试
npm run test
# .husky/pre-commit — 提交前检查
npx lint-staged

# .husky/commit-msg — 提交信息规范
npx --no -- commitlint --edit $1

# .husky/pre-push — 推送前运行测试
npm run test

VS Code 中 Husky 不生效 ​

bash
# 确保 .husky 目录中的文件有可执行权限
chmod +x .husky/pre-commit
chmod +x .husky/commit-msg
# 确保 .husky 目录中的文件有可执行权限
chmod +x .husky/pre-commit
chmod +x .husky/commit-msg

lint-staged ​

只对暂存区的文件运行 lint，避免全量检查。

js
// .lintstagedrc.js 或 package.json
export default {
  '*.{js,jsx,ts,tsx,vue}': ['eslint --fix', 'prettier --write'],
  '*.{css,scss,json,md}': ['prettier --write'],
  '*.vue': ['eslint --fix', 'prettier --write'],
}
// .lintstagedrc.js 或 package.json
export default {
  '*.{js,jsx,ts,tsx,vue}': ['eslint --fix', 'prettier --write'],
  '*.{css,scss,json,md}': ['prettier --write'],
  '*.vue': ['eslint --fix', 'prettier --write'],
}

commitlint ​

安装 ​

bash
npm install -D @commitlint/cli @commitlint/config-conventional
npm install -D @commitlint/cli @commitlint/config-conventional

配置 ​

bash
echo "export default { extends: ['@commitlint/config-conventional'] }" > commitlint.config.js
echo "export default { extends: ['@commitlint/config-conventional'] }" > commitlint.config.js

Conventional Commits 规范 ​

<type>(<scope>): <description>

[body]

[footer]
<type>(<scope>): <description>

[body]

[footer]

type 类型 ​

type含义语义化版本
feat新功能minor
fix修复 Bugpatch
docs文档变更-
style代码格式调整-
refactor重构-
perf性能优化patch
test测试相关-
chore构建/工具变更-
ciCI/CD 变更-
revert回退-
types类型定义变更-

示例 ​

feat(auth): add login API
fix(button): resolve click event not firing in Safari
docs(readme): update installation guide
refactor(utils): split large helper into smaller functions
perf(render): reduce unnecessary re-renders by 50%
feat(auth): add login API
fix(button): resolve click event not firing in Safari
docs(readme): update installation guide
refactor(utils): split large helper into smaller functions
perf(render): reduce unnecessary re-renders by 50%

完整配置流程 ​

bash
# 1. 安装依赖
npm install -D husky lint-staged @commitlint/cli @commitlint/config-conventional

# 2. 初始化 Husky
npx husky init

# 3. 配置 pre-commit hook
echo "npx lint-staged" > .husky/pre-commit

# 4. 配置 commit-msg hook
echo "npx --no -- commitlint --edit \$1" > .husky/commit-msg

# 5. 配置 lint-staged（package.json）
# 1. 安装依赖
npm install -D husky lint-staged @commitlint/cli @commitlint/config-conventional

# 2. 初始化 Husky
npx husky init

# 3. 配置 pre-commit hook
echo "npx lint-staged" > .husky/pre-commit

# 4. 配置 commit-msg hook
echo "npx --no -- commitlint --edit \$1" > .husky/commit-msg

# 5. 配置 lint-staged（package.json）
json
// package.json
{
  "lint-staged": {
    "*.{ts,tsx,vue}": ["eslint --fix", "prettier --write"],
    "*.{css,scss,json,md}": ["prettier --write"]
  }
}
// package.json
{
  "lint-staged": {
    "*.{ts,tsx,vue}": ["eslint --fix", "prettier --write"],
    "*.{css,scss,json,md}": ["prettier --write"]
  }
}

commitizen（交互式提交） ​

bash
npm install -D commitizen cz-conventional-changelog
npm install -D commitizen cz-conventional-changelog
json
// package.json
{
  "config": {
    "commitizen": {
      "path": "cz-conventional-changelog"
    }
  },
  "scripts": {
    "commit": "cz"
  }
}
// package.json
{
  "config": {
    "commitizen": {
      "path": "cz-conventional-changelog"
    }
  },
  "scripts": {
    "commit": "cz"
  }
}

然后使用 npm run commit 代替 git commit 交互式填写。

Copyright © 2024-present xiaocao