使用 husky、lint-staged、commitlint 构建前端工作流

[maomao1996]

使用 husky、lint-staged、commitlint 构建前端工作流

作用

可以帮助我们在 commit 前，对代码和 commit messages 进行 lint

介绍

• husky 是一个 Git Hooks 工具，让你操作 Git Hooks 变得更容易
• lint-staged 可以只对 git 暂存文件运行 lint 从而提高速度
• commitlint 检查 git commit messages 是否符合规范
• commitizen 获得有关提交消息格式的即时反馈，并提示您输入必填字段。

安装

yarn add -D husky lint-staged @commitlint/cli @commitlint/config-conventional commitizen cz-conventional-changelog

使用

• package.json

{
  "...": "...",
  "scripts": {
    "commit": "git-cz"
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged",
      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
    }
  },
  "lint-staged": {
    "src/**/*.{js,ts,tsx}": ["eslint --fix", "prettier --write", "git add"]
  },
  "config": {
    "commitizen": {
      "path": "cz-conventional-changelog"
    }
  }
}

• 根目录创建 commitlint.config.js

module.exports = {
  extends: ['@commitlint/config-conventional']
}

@commitlint/config-conventional type 说明

type	含义
feat	新功能
fix	修复 bug
docs	修改文档
style	代码格式修改
refactor	重构（即不是新增功能，也不是修复 bug）
perf	更改代码以提高性能
test	增加测试
build	构建过程或辅助工具的变动
ci	修改项目持续集成流程
chore	其他类型的提交
revert	恢复上一次提交