Warren's

利用 commitlint 校验提交的 commit 信息

每次提交包含 header、body、footer； header 包含 type scope subject(就是描述) ，默认只处理 type 和 subject 必填

官网open in new window

  1. 安装包 npm install @commitlint/cli @commitlint/config-conventional -D

  2. 创建文件 echo "module.exports = {extends: ['@commitlint/config-conventional']}" > commitlint.config.js 这个 js 文件采用的不是 es6 语法，如果报错，修改语法即可

  3. 可以自定义 rules

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

  /* ====== 自定义校验 STRT ====== */
  rules: {
    "check fix": [2, "always"],
  },
  plugins: [
    {
      rules: {
        "check fix": ({ type, subject }) => {
          let pass = true;
          if (type === "fix") {
            pass = /^\[#\d+].+/.test(subject);
          }
          return [pass, "输入的fix格式不正确【fix: [#12345]描述】"];
        },
      },
    },
  ],
  /* ====== 自定义校验 END ====== */

  rules: {
    /**
     * key:[0, 'always', 'value']
     * key 可以是 type-enum,type-case 等
     * 数组第1个值 0 表示 disable(该规则不启用) 1 表示 warning 2 error
     * 数组第2个值 always 或 never
     * 数组第3个值 value 就为和 key 对应的值
     */
    /* 提交类型  参考 提交规范 */
    "type-enum": [ 2, "always",
      // 这里的规则会替换默认规则
      ["build",
        "feat",  // 新功能开发
        "fix",   // 修复相关bug
        "style",  // 样式调整
        "perf",  // 优化性能提升相关
        "refactor",  // 重构代码
        "config", // 修改配置相关
        "docs", // 文档相关
        "chore",  // 其它杂项
        "revert", // 回滚代码
        "test", 
        "ci",
      ],
    ],
    "subject-min-length": [2, "always", 2],
    "subject-max-length": [2, "always", 60],
    "header-max-length": [2, "always", 72],
    "subject-case": [
      // 输入内容格式
      2,
      "always",
      [
        "lower-case", // default
        "upper-case", // UPPERCASE
        "camel-case", // camelCase
        "kebab-case", // kebab-case
        "pascal-case", // PascalCase
        "sentence-case", // Sentence case
        "snake-case", // snake_case
        "start-case", // Start Case
      ],
    ],
  },
};

接入 husky 做本地检测

husky 支持所有的 git Hooks 操作，阻止不符合的 commit 和 push (https://github.com/typicode/husky)

  1. npm install husky -D （安装 husky 安装 8 以上的 记得先删除以前的 husky 因为使用方式已经不一样了 8 以上是会创建一个单独的 .husky 文件夹）
  2. npm pkg set scripts.prepare="husky install" 修改 package.json
  3. npm run prepare

husky install // 生成 .husky 文件夹

多人合作时，务必执行 npm pkg set scripts.prepare="husky install" 保证可以生成钩子，并启用

  1. 添加钩子 npx husky add .husky/commit-msg "npx --no -- commitlint --edit ${1}"

也就是在 husky 文件夹下生成 commit-msg 文件 参考 https://commitlint.js.org/#/guides-local-setup?id=install-husky

  1. 团队协作，其它成员，拉取代码后 运行一次 npm install

接入 husky 和 lint-staged 对暂存文件检测

https://github.com/okonet/lint-staged

lint-staged 的作用是对暂存文件检测

  1. 安装 npm install --save-dev lint-staged

  2. package.json 添加

"scripts": {
    "lint-staged": "lint-staged", // v10.0.0 以后 不用加  git add 了  因为已经自动集成了
}
  1. 创建 .lintstagedrc 文件
{
  "*.{vue,js,jsx,cjs,mjs,ts,tsx,cts,mts}": "eslint --fix"
}
  1. 添加 pre-commit npx husky add .husky/pre-commit "npm run lint-staged"

创建可选 commit 命令(作用不大，可以不用安装)

参考 https://www.npmjs.com/package/git-cz

安装

# 方式一
npm install -g commitizen git-cz
commitizen init git-cz --save-dev --save-exact
git cz # 执行
# 如果报错 尝试先 git add . 再执行 cz

# 方式二
npm install -g git-cz
git-cz # 执行

添加配置 changelog.config.js

module.exports = {
  disableEmoji: false,
  format: "{type}{scope}: {emoji}{subject}",
  list: [
    "test",
    "feat",
    "fix",
    "chore",
    "docs",
    "refactor",
    "style",
    "ci",
    "perf",
  ],
  maxMessageLength: 64,
  minMessageLength: 3,
  // questions: ['type', 'scope', 'subject', 'body', 'breaking', 'issues', 'lerna'],
  questions: ["type", "subject"],
  scopes: [],
  types: {
    chore: {
      description: "Build process or auxiliary tool changes",
      emoji: "🤖",
      value: "chore",
    },
    ci: {
      description: "CI related changes",
      emoji: "🎡",
      value: "ci",
    },
    docs: {
      description: "Documentation only changes",
      emoji: "✏️",
      value: "docs",
    },
    feat: {
      description: "A new feature",
      emoji: "🎸",
      value: "feat",
    },
    fix: {
      description: "A bug fix",
      emoji: "🐛",
      value: "fix",
    },
    perf: {
      description: "A code change that improves performance",
      emoji: "⚡️",
      value: "perf",
    },
    refactor: {
      description: "A code change that neither fixes a bug or adds a feature",
      emoji: "💡",
      value: "refactor",
    },
    release: {
      description: "Create a release commit",
      emoji: "🏹",
      value: "release",
    },
    style: {
      description: "Markup, white-space, formatting, missing semi-colons...",
      emoji: "💄",
      value: "style",
    },
    test: {
      description: "Adding missing tests",
      emoji: "💍",
      value: "test",
    },
    messages: {
      type: "Select the type of change that you're committing:",
      customScope: "Select the scope this component affects:",
      subject: "Write a short, imperative mood description of the change:\n",
      body: "Provide a longer description of the change:\n ",
      breaking: "List any breaking changes:\n",
      footer: "Issues this commit closes, e.g #123:",
      confirmCommit: "The packages that this commit has affected\n",
    },
  },
};

安装 git-commit-plugin vscode 插件

https://marketplace.visualstudio.com/items?itemName=redjue.git-commit-plugin

ctrl + shift + p 输入 show git commit template

选择一个 type 再选择 Subject 输入备注信息； 再选择 Complete 结果会汇总到 vscode 的 commit 信息输入框

Last Updated:
Contributors: Warren