2024.06 git提交前校验

• 安装校验工具

image-20240625200200058.png

husky是一个用于设置git hooks的工具，执行自定义的脚本程序

@commitlint/cli是一个命令行工具，用于校验git提交信息是否符合规范

@commitlint/config-conventional是一个配置，用来配置提交规范，结合上一个工具一起使用

npm i husky @commitlint/cli @commitlint/config-conventional -D

• 配置package.json scripts

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

• 生成.husky文件夹，会生成以下文件

npm run prepare

• 在.husky文件夹下新建commit-msg文件，不要带后缀名，否则规则会不生效

• 修改commit-msg文件的内容，下面这些

# 告诉系统该脚本应该使用哪个解释器来执行
#!/bin/sh
# $0是当前脚本的路径
# dirname用于获取这个路径的目录部分
# 这里获取到的是.husky/commit-msg
# /husky.sh 环境脚本路径，相对于上一步得到的目录，husky使用这个脚本来设置一些环境变量和执行必须要的初始化操作
. "$(dirname "$0")/_/husky.sh"

# 执行commitlint检查
npx --no-install commitlint --edit "$1"

• 项目根目录下新建commitlintrc.cjs，提交信息必须以下面type-enum中的一种开头提交

module.exports = {
  extends: ['@commitlint/config-conventional'],
  rules: {
    'type-enum': [
      2,
      'always',
      [
        'feat', // 新功能（feature）
        'fix', // 修补bug
        'perf', //性能优化
        'docs', // 文档（documentation）
        'style', // 格式（不影响代码运行的变动）
        'refactor', // 重构（即不是新增功能，也不是修改bug的代码变动）
        'test', // 增加测试
        'revert', // 回滚
        'config', // 构建过程或辅助工具的变动
        'chore', // 其他改动
        'build', //构建配置修改
        'ci', //CI配置修改
        'Chores' //其他更新
      ]
    ],
    'subject-full-stop': [0, 'never'],
    'subject-case': [0, 'never']
  }
}

以下是两次带feat提交和不带feat提交的两个场景的测试

image-20240625201501622.png

收藏下这篇文章关于代码格式校验和代码提交很全

不使用husky，使用lint-staged

lint-staged是一个在git暂存文件上运行的校验工具，只会对暂存区的文件（变更的文件）进行校验

package.json配置

配置项解释：当暂存区文件改变时，*.{js,ts,vue}匹配.js .ts .vue结尾的文件[ "eslint --fix", "git add" ]当这些文件有变更后，会依次执行eslint --fix git add的命令，这种配置的好处是它会自动校验并修复代码中的格式问题

 "gitHooks": {
     // 提交之前进行进行代码检查和修复
    "pre-commit": "lint-staged",
    // 针对提交信息的校验
    "commit-msg": "commitlint --config .commitlintrc.js -e -V"
  },
  "lint-staged": {
     
    "*.{js,ts,vue}": [
      "eslint --fix",
      "git add"
    ],
    "src/**/*.{vue,css,sass,scss}": [
      "stylelint --fix",
      "git add"
    ]
  }