前端代码提交规范校验

开发过程中经常会出现代码不规范导致的问题，在这里整理一下代码提交规范的相关内容。

commitlint

commitlint GitHub

commitlint检查提交消息是否符合传统的提交格式。

type(scope?): subject  #scope is optional; multiple scopes are supported (current delimiter options: "/", "\" and ",")

1. type：本次提交类型
2. scope：本次提交的作用域
   1. 支持多个作用域
   2. 多个作用域使用 / \ ,进行分隔
3. subject：本次的提交title，尽可能用简洁的文字表达本次提交的核心信息

根据commitlint-config常规（基于Angular约定），常见type可以是：

• build
• chore
• ci
• docs
• feat
• fix
• perf
• refactor
• revert
• style
• test

当然也可以根据自己的需求进行配置修改。例如可以新增 merge 类型用于分支合并时。

使用方法

windows

1. 安装依赖

pnpm install --save-dev @commitlint/config-conventional @commitlint/cli

2. 新建.commitlintrc.cjs文件

// 在这里配置commitlint的规则，在提交时验证提交信息是否符合这里的规则
module.exports = {
  // 继承的commitlint规则
  extends: ["@commitlint/config-conventional"],
  // 定义规则 数字 0 | 1 | 2 表示处理级别 0-忽略 1-警告 2-丢弃
  rules: {
    "header-max-length": [2, "always", 108],
    "subject-empty": [2, "never"],
    "body-leading-blank": [2, "always"],
    "footer-leading-blank": [1, "always"],
    "type-empty": [2, "never"],
    // type 类型定义，表示 git 提交的 type 必须在以下类型范围内
    "type-enum": [
      2,
      "always",
      [
        "feat", // 新功能 feature
        "fix", // 修复 bug
        "docs", // 文档注释
        "style", // 代码格式(不影响代码运行的变动)
        "refactor", // 重构(既不增加新功能，也不是修复bug)
        "perf", // 性能优化
        "test", // 增加测试
        "chore", // 构建过程或辅助工具的变动
        "revert", // 回退
        "build", // 打包
      ],
    ],
    // subject 大小写不做校验
    "subject-case": [0],
  },
};

3. 安装husky对commit前的lint添加消息钩子

pnpm install husky --save-dev

4. 激活消息钩子

npx husky install

5. 添加钩子

npx husky add .husky/commit-msg  'npx --no -- commitlint --edit ${1}'

6. commit进行测试

git commit -m 'a'

 我的提交信息是 a，不符合信息校验规则，就提交失败了。

git commit -m 'fix: 修复部分问题'

 可以看到已经提交成功了。

到现在就可以实现提交信息的校验了。

lint-staged

Lint-staged GitHub

lint-staged用于给暂存区的代码进行lint，否则的话每次修改代码之后都会对全部的文件进行lint。

“对暂存的git文件运行linters，不要让💩 滑入您的代码库！”。

使用lint-staged的目的

在提交代码之前运行Linting更有意义。通过这样做，可以确保没有错误进入存储库并强制执行代码样式。但是，在整个项目上运行lint过程是缓慢的，并且lint结果可能无关紧要。最终，我们只想整理将要提交的文件。

此项目包含一个脚本，该脚本将运行任意shell任务，并以暂存文件列表作为参数，通过指定的glob模式进行筛选。

使用

1. 安装依赖

pnpm install --save-dev lint-staged

2. 新建配置文件 .lintstagedrc.cjs

module.exports = {
  "*.{js,jsx,ts,tsx}": ["eslint --fix", "prettier --write"],
  "{!(package)*.json,*.code-snippets,.!(browserslist)*rc}": [
    "prettier --write--parser json",
  ],
  "package.json": ["prettier --write"],
  "*.vue": ["eslint --fix", "prettier --write", "stylelint --fix"],
  "*.{scss,less,styl,html}": ["stylelint --fix", "prettier --write"],
  "*.md": ["prettier --write"],
};

3. .husky下创建pre-commit

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

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

npx lint-staged

4. 配置完成后进行测试

git add .
git commit -m 'msg'

 上图是一个错误示例，就像前面提到的commitlint，这里的提交信息不符合规范，所以提交失败了。

git commit -m 'feat(lint-staged): 提交时只对暂存区进行lint'

这是一个正确提交信息的示例。

如果确保自己的代码没有任何问题，但是还是没有通过lint-staged，可以添加 --no-verify 

方便提交代码的工具

concurrently - npm

cz-conventional-changelog - npm

commitizen - npm

pnpm install -g concurrently
pnpm install -g commitizen cz-conventional-changelog

在package.json中添加script

"commit": "git pull && git add -A && git-cz && git push"

在package.json中添加commitizen配置

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

修改代码运行pnpm run commit，之后根据终端提示来操作即可。