husky 对代码质量和提交说明进行约束

108 阅读4分钟

1. 使用场景

多人协作开发一个项目的时候,代码风格和提交注释不统一规范的话会带来很多的麻烦,代码质量和风格(可以结合Prettier,用法一样)约束使用eslint,代码提交说明约束使用commitlint相关依赖

2. eslint配置

npm i eslint -D
npx eslint --init

选择只检查错误并且提示就可以 image.png

是否使用typescript image.png

运行环境可以按空格多选 image.png 结束之后会在根目录自动生成 .eslintrc.js 配置文件,如果需要一些额外的约束可以和团队成员一起制定

3. githooks

git的生命周期钩子,githooks就是在git执行commit、push、receive等操作时触发运行的脚本, githooks 默认保存在 .git/hooks 文件夹中

4. 新版本husky(7.0.1)新版本和旧版本配置天差地别

husky是一个操作githook的工具, Git 2.9可以通过core.hooksPath配置变量来更改脚本的目录, 新版本husky 以使用husky installgit hooks的目录指定为.husky/

npm install husky -D
npm set-script prepare "husky install" // npm 大于7 之后才有的命令,否则手动添加

这样就会在package.json里面添加一条命令:

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

prepare 属于 npm install 的生命周期, npm install 命令的生命周期会执行的脚本顺序: prepare > preinstall > install > postinstall

5. lint-staged

进行代码质量规范检查时,husky可以阻止不符合规范的commit,push等操作,git pre-commit钩子函数被调用时执行lint-staged,pre-commit 钩子在git commit 时就会触发。lint-staged对暂存区中有改动的文件根据ESLint 和 Prettier的规则进行检测,简单的格式错误会在提交检测时自动修复,代码低级bug错误会终止提交,提示报错位置。 执行npx husky add .husky/pre-commit "npx lint-staged"会在.husky下生成一个pre-commitshell文件:

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

npx lint-staged

package.json文件添加配置

"lint-staged": {
// 需要约束的代码文件可以根据自己项目修改
    "src/**/*.{ts,js,vue}": [
        "eslint --cache --fix"
    ]
},

提交测试

image.png

6. commit-msg

执行npm i @commitlint/cli @commitlint/config-conventional -D 安装对git提交说明内容的校验 和校验的规范,不符合提交说明格式的禁止提交。在根目录创建.commitlintrc.js配置文件

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

执行npx husky add .husky/commit-msg 'npx commitlint --edit "$1"'会在.husky下生成一个commit-msgshell文件(创建失败的话可以自己手动新建这个文件,复制下面的内容):

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

npx commitlint --edit "$1"

提交测试

image.png

7. 安装提交说明辅助

npm i commitizen -D
// 如果使用了第8步骤的自定义提交说明可以忽略此步骤 安装并初始化cz-conventional-changelog  
npx commitizen init cz-conventional-changelog --save-dev --save-exact //

package.json文件会自动添加配置

{
    "config": {
        "commitizen": {
            "path": "node_modules/cz-conventional-changelog"
        }
    }
}

提交测试

image.png

8. 自定义提交说明

使用自定义提交规范的话可以不用安装上面的@commitlint/config-conventionalcz-conventional-changelog依赖包

npm i commitlint-config-cz cz-customizable -D 
npm set-script commit "git add -A && git-cz" // npm 大于7 之后才有的命令,否则手动添加

这样就会在package.json里面添加一条命令:

{
  "scripts": {
    "commit": "git add -A && git-cz" 
  }
}

之后提交命令由git commit更改为git-cz,提交之前会自动执行 git add -A,

  • git add .:将文件的修改,文件的新建,添加到暂存区
  • git add -u:将文件的修改、文件的删除,添加到暂存区
  • git add -A:将文件的修改,文件的删除,文件的新建,添加到暂存区
  • git add * :将当前目录下所有文件添加到暂存区,包括文件的修改,文件的新建。(此命令类似于 "git add .",区别在于上面几个命令都会根据.gitignore做过滤,但是git add * 会忽略.gitignore把任何文件都加入(不包含删除掉的文件))

更改package.jsonconfig属性:

{
    "config": {
        "commitizen": {
            "path": "node_modules/cz-customizable"
        }
    }
}

更改.commitlintrc.js配置文件

module.exports = {
  extends: ["cz"]
};

创建.cz-config.js文件

'use strict'

module.exports = {
  types: [
    {
      value: "💪 wip",
      emoji: "💪",
      name: '💪  WIP:      开发中'
    },
    {
      value: "✨ feat",
      emoji: "✨",
      name: '✨  feat:     新功能'
    },
    {
      value: "🐛 fix",
      emoji: "🐛",
      name: '🐞  fix:      bug修复'
    },
    {
      value: "🛠 refactor",
       emoji: "🛠",
      name: '🛠  refactor: 代码重构,优化'
    },
    {
      value: "📚 docs",
      emoji: "📚",
      name: '📚  docs:     文档修改'
    },
    {
      value: "🏁 test",
      emoji: "🏁",
      name: '🏁  test:     添加或修改测试'
    },
    {
      value: "🗯 chore",
      emoji: "🗯 ",
      name: '🗯  chore:    不包含业务代码的更改,比如更新构建任务,包管理器'
    },
    {
      value: "💅 style",
      emoji: "💅",
      name: '💅  style:    代码风格,空白、格式、缺少分号等'
    },
    {
      value: "⏪ revert",
      emoji: "⏪",
      name: '⏪  revert:   恢复到提交'
    }
  ],
  scopes: [{ name: 'src/render/main' }, { name: '登录' },{ name: '通用功能' }],
  messages: {
    type: '选择一种你的提交类型(必填):',
    scope: '选择一个适用范围(可选):',
    // used if allowCustomScopes is true
    customScope: '此次提交适用范围(可选):',
    subject: '此次提交说明(必填):\n',
    body: '对于此次提交详细说明,使用"|"换行(可选):\n',
    breaking: '破坏性升级,如果发行大版本请添加说明,否则直接回车忽略 (可选):\n',
    footer: '关联关闭的issue,例如:#31, #34 (可选):\n',
    confirmCommit: '确定提交说明?'
  },
  allowCustomScopes: false,
  allowBreakingChanges: ['feat', 'fix']
}

提交测试

image.png