husky + lint-staged + commitlint + commitizen

一、husky

1.1自动安装

  1. npx husky-init && npm install       # npm
  2. npx husky-init && yarn              # Yarn 1
  3. yarn dlx husky-init --yarn2 && yarn # Yarn 2+
  4. pnpm dlx husky-init && pnpm install # pnpm

1.2 手动安装

  • 安装husky npm install husky --save-dev
  • 启用 Git 挂钩 npx husky install
  • 要在安装后自动启用 Git 挂钩，请编辑package.json
    • npm set-script prepare "husky install"
    • package.json会添加一条命令
      1. // package.json
      2. {
      3. "scripts": {
      4. "prepare": "husky install"
      5. }
      6. }

npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"'

二、lint-staged

2.1 安装

npm i lint-staged -D

2.2 配置lint-staged

  1. {
  2.   "name": "My project",
  3.   "version": "0.1.0",
  4.   "scripts": {
  5.     "my-custom-script": "linter --arg1 --arg2",
  6.     "lint-staged:js": "eslint --ext --fix .js,.jsx,.ts,.tsx",
  7.   },
  8.   "lint-staged": {
  9.     "**/*.less": "stylelint --syntax less",
  10.     "**/*.{js,jsx,ts,tsx}": "npm run lint-staged:js",
  11.     "**/*.{js,jsx,tsx,ts,md,json}": [
  12.       "prettier --write"
  13.     ]
  14.   },
  15. }

2.3 创建hook

npx husky add .husky/pre-commit "npx lint-staged"

三、commitlint

3.1安装

yarn add commitlint @commitlint/config-conventional -D
or
npm i commitlint @commitlint/config-conventional -D

3.2 配置

  1. module.exports = {
  2.   extends: ['@commitlint/config-conventional'],
  3. };

3.3 创建hook

npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"'

四、commitizen


  • 4.1 安装交互式工具（commitizen）

    1. # 全局安装：
    2. npm install -g commitizen
    3. # 或 本地安装： 
    4. npm install --save-dev commitizen

    4.2 安装适配器（cz-conventional-changelog）

全局安装：npm install -g cz-conventional-changelog
创建 ~/.czrc 文件，写入如何内容{ "path": "cz-conventional-changelog" }

本地安装： npm install --save-dev cz-conventional-changelog
在package.json中添加配置：

  1. "config": {
  2.   "commitizen": {
  3.     "path": "cz-conventional-changelog"
  4.   }
  5. }

此时，提交commit过程如下：

  • git add .
  • git cz 或 cz

4.5 自定义提交规范(1)

npm i -D commitlint-config-cz cz-customizable

  • 变更commitlint.config.js

    1. module.exports = {
    2. extends: ['cz']
    3. };

  • 新增.cz-config.js

    • https://github.com/leoforfree/cz-customizable/blob/master/cz-config-EXAMPLE.js
      1. 'use strict'
      2. module.exports = {
      3. types: [
      4. { value: '✨新增', name: '新增:    新的内容' },
      5. { value: '🐛修复', name: '修复:    修复一个Bug' },
      6. { value: '📝文档', name: '文档:    变更的只有文档' },
      7. { value: '💄格式', name: '格式:    空格, 分号等格式修复' },
      8. { value: '♻️重构', name: '重构:    代码重构，注意和特性、修复区分开' },
      9. { value: '⚡️性能', name: '性能:    提升性能' },
      10. { value: '✅测试', name: '测试:    添加一个测试' },
      11. { value: '🔧工具', name: '工具:    开发工具变动(构建、脚手架工具等)' },
      12. { value: '⏪回滚', name: '回滚:    代码回退' }
      13. ],
      14. scopes: [
      15. { name: 'leetcode' },
      16. { name: 'javascript' },
      17. { name: 'typescript' },
      18. { name: 'Vue' },
      19. { name: 'node' }
      20. ],
      21. // it needs to match the value for field type. Eg.: 'fix'
      22. /*  scopeOverrides: {
      23. fix: [
      24.  {name: 'merge'},
      25.  {name: 'style'},
      26.  {name: 'e2eTest'},
      27.  {name: 'unitTest'}
      28. ]
      29. },  */
      30. // override the messages, defaults are as follows
      31. messages: {
      32. type: '选择一种你的提交类型:',
      33. scope: '选择一个scope (可选):',
      34. // used if allowCustomScopes is true
      35. customScope: 'Denote the SCOPE of this change:',
      36. subject: '短说明:\n',
      37. body: '长说明，使用"|"换行(可选)：\n',
      38. breaking: '非兼容性说明 (可选):\n',
      39. footer: '关联关闭的issue，例如：#31, #34(可选):\n',
      40. confirmCommit: '确定提交说明?(yes/no)'
      41. },
      42. allowCustomScopes: true,
      43. allowBreakingChanges: ['特性', '修复'],
      44. // limit subject length
      45. subjectLimit: 100
      46. }

  • package.json 中,将原来commit配置,变更为自定义配置

    1. "config": {
    2. "commitizen": { // not needed for standlone usage
    3.   "path": "node_modules/cz-customizable"
    4. },
    5. }

    4.6 自定义提交规范(2)

  • 新建脚本 ```json const chalk = require(‘chalk’) const msgPath = process.env.GIT_PARAMS const msg = require(‘fs’).readFileSync(msgPath, ‘utf-8’).trim() const commitRE = /^(revert: )?(feat|fix|polish|docs|style|refactor|perf|test|workflow|ci|chore|types|build)((.+))?: .{1,50}/

if (!commitRE.test(msg)) { console.log() console.error( ${chalk.bgRed.white(' ERROR ')} ${chalk.red(invalid commit message format.)}\n\n + chalk.red(Proper commit message format is required for automated changelog generation. Examples:\n\n) + ${chalk.green(feat(compiler): add ‘comments’ option)}\n + ${chalk.green(fix(v-model): handle events on blur (close #28))}\n\n + chalk.red(See .github/COMMIT_CONVENTION.md for more details.\n) + chalk.red(You can also use ${chalk.cyan(npm run commit)} to interactively generate a commit message.\n) ) process.exit(1) }

  2. - 创建hook
  4. `npx husky add .husky/commit-msg node ./scripts/verify-commit-msg.js`
  5. <a name="Dd6aw"></a>
  6. ## 五、conventional-changelog
  7. <a name="DRMiv"></a>
  8. ### 5.1 conventional-changelog-cli
  10. - 安装 `npm install -g conventional-changelog-cli`
  11. - 使用 `conventional-changelog -p angular -i CHANGELOG.md -s`<br />该命令会在CHANGELOG.md文件头部添加上次tag之后的commit信息
  12. <a name="NmKhW"></a>
  13. ### 5.2 [standard-version](https://github.com/conventional-changelog/standard-version)
  15. - 安装 `npm i standard-version -D`
  16. - Add an [npm runscript](https://docs.npmjs.com/cli/run-script) to your `package.json`:
  17. ```json
  18. {
  19.   "scripts": {     
  20.     "release": "standard-version"   
  21.   } 
  22. }
  • 首次发布

    • npm run script

      • npm run release — —first-release

    • global bin

      • standard-version —first-release

    • npx npx

      • standard-version —first-release

参考资料