CommitLint

项目版本控制

项目版本号位于 package.json

{ 
   //...
  "version": "0.0.0",
  //...
}

如何升级

npm version prerelease #特别版本+1
npm version patch #修订版本+1
npm version minor #次版本号+1
npm version major #主版本号+1

变更日志

变更日志来自于git提交记录。前提是commit是按照标准来提交的，否则生成changelog并没有太大的意义

安装

npm i conventional-changelog-cli -d

加入运行脚本

"scripts": {
  "log": "conventional-changelog -p angular -i CHANGELOG.md -s -r 0 && git add CHANGELOG.md"
}
//-p angular 是载入模板，但官方文档中并没有找到模板在哪里配置，有哪些可选择的模板

生成

npm run log

husky

husky提供了一套git钩子，可以在执行git操作时执行一些逻辑

Husky (typicode.github.io)

安装

npm i husky -d

初始化

npx husky init
# 将会在项目根目录生成.husky目录，并初始化一些文件

添加钩子

在.husky下新建文件 pre-commit

echo "这里的shell语句将在commit之前执行"
npm run lint:eslint
#npm run ...
git add .

之后，每次执行git commit -m ”...“ 皆会触发该钩子

关于husky的命令

#停用
git commit -m "..." -n   # 跳过 Git 钩子
npx husky uninstall      #停用钩子，9版本无效，需降版本为^8.0
  
#启用
npx husky install  #用npx安装
#或者
# “script”：{"prepare": "husky"}
npm run prepare    # npm运行脚本 来启用

CommitLint

commitlint负责对提交代码时，格式的规范化

安装

npm i -d @commitlint/cli
npm i -d @commitlint/config-conventional
npm i -d @commitlint/types

项目根目录里添加配置项 commitlint.config.js

//commitlint.config.js
import type { UserConfig } from '@commitlint/types'
import { RuleConfigSeverity } from '@commitlint/types'

const Configuration: UserConfig = {
  extends: ['@commitlint/config-conventional'],
  parserPreset: 'cz-conventional-changelog',
  formatter: '@commitlint/format',
  rules: {
    'type-enum': [
      RuleConfigSeverity.Error,
      'always',
      [
        `feat`, // 新增功能
        `fix`, // 修复缺陷
        `docs`, // 文档变更
        `style`, // 代码格式
        `refactor`, // 代码重构
        `perf`, // 性能优化
        `test`, // 添加疏漏测试或已有测试改动
        `build`, //构建流程、外部依赖变更 (如升级 npm 包、修改打包配置等)
        `ci`, //修改 CI 配置、脚本
        `revert`, //回滚 commit
        `chore`, //对构建过程或辅助工具和库的更改 (不影响源文件)
        `wip`, //正在开发中
        `types` //类型定义文件修改
      ]
    ],
    'type-case': [RuleConfigSeverity.Disabled],
    'type-empty': [RuleConfigSeverity.Disabled],
    'scope-empty': [RuleConfigSeverity.Disabled],
    'scope-case': [RuleConfigSeverity.Disabled],
    'header-max-length': [RuleConfigSeverity.Error, 'always', 96],
    'header-min-length': [RuleConfigSeverity.Error, 'always', 10],
    'subject-max-length': [RuleConfigSeverity.Error, 'always', 72],
    'subject-min-length': [RuleConfigSeverity.Error, 'always', 5]
  },
  prompt: {
    //prompt依赖于适配器，当前为cz-commitlint，故不是每个字段都被使用
    settings: {},
    messages: {
      skip: '⤵️跳过',
      max: '最多 %d 个字符',
      min: '不少于 %d 个字符',
      emptyWarning: '不能为空',
      upperLimitWarning: '字符过多',
      lowerLimitWarning: '字符过少'
    },
    questions: {
      type: {
        description: '选择您要提交的变更类型',
        enum: {
          types: {
            description: '类型定义文件修改',
            title: 'Types',
            emoji: '🧩'
          },
          wip: {
            description: '还未完成的',
            title: 'Working In Progress',
            emoji: '⛏️'
          },
          feat: {
            description: '一个新特性',
            title: 'Features',
            emoji: '✨'
          },
          fix: {
            description: '一项问题修复',
            title: 'Bug Fixes',
            emoji: '🐛'
          },
          docs: {
            description: '仅文档变更',
            title: 'Documentation',
            emoji: '📚'
          },
          style: {
            description: '不影响代码含义的更改（空格、格式、缺少分号等）',
            title: 'Styles',
            emoji: '💎'
          },
          refactor: {
            description: '代码重构',
            title: 'Code Refactoring',
            emoji: '📦'
          },
          perf: {
            description: '性能优化',
            title: 'Performance Improvements',
            emoji: '🚀'
          },
          test: {
            description: '添加缺失的测试或更正现有测试',
            title: 'Tests',
            emoji: '🚨'
          },
          build: {
            description: '构建流程、外部依赖变更 (如升级 npm 包、修改打包配置等)',
            title: 'Builds',
            emoji: '🛠'
          },
          ci: {
            description: '更改CI配置文件和脚本',
            title: 'Continuous Integrations',
            emoji: '⚙️'
          },
          chore: {
            description: '对构建过程或辅助工具和库的更改 (不影响源文件)',
            title: 'Chores',
            emoji: '♻️'
          },
          revert: {
            description: '回滚 commit',
            title: 'Reverts',
            emoji: '🗑'
          }
        }
      },
      scope: {
        description: '此次变更的功能模块/功能是什么？'
      },
      subject: {
        description: '写一些简短的、变更描述'
      },
      body: {
        description: '提供更详细的变更说明'
      },
      isBreaking: {
        description: '是否包含有中断性、不兼容的变动？'
      },
      breaking: {
        description: '请输入不兼容变更的简短描述'
      },
      breakingBody: {
        description: '请输入对不兼容变更的详细描述或迁移方法'
      },
      isIssueAffected: {
        description: '此次修改是否解决了某个Issue？'
      },
      issuesBody: {
        description: '描述该Issue,链接或文本'
      },
      issues: {
        description: '添加问题引用（例如“Closes #123”、“Refactor #123”。）'
      }
    }
  }
}

export default Configuration

挂载到husky

.husky目录下新增文件 commit-msg

该钩子将会在 pre-commit 之后被执行

# commit-msg
echo "正在检查提交描述……"
npx --no-install commitlint --edit "$1"

至此，执行 git commit -m "..." 时，可以执行代码审查和提交审查两项工作了。

但是，为了让 git commit 更好用，我们可以交互式的填写commit内容

安装commitlint提示器

npm i -d @commitlint/cz-commitlint
#提示配置项在commitlint.config.js  Configuration.prompt
npm i -d commitizen

为commitizen安装适配器

//package.json 中添加
"script":{
    "commit":"npx cz"
},
"config": {
   "commitizen": {
     "path": "@commitlint/cz-commitlint" //除此还有很多可以换的 https://github.com/commitizen/cz-cli
   }
}

使用

npm run commit
# 会以交互模式来输入提交内容。完成后，则会执行git commit -m ”内容“， 后续就是git钩子相关的执行.....