前端项目git提交规范配置

项目规范管理

目的

为了使团队多人协作更加的规范，所以需要每次在 git 提交的时候，做一次硬性规范提交，规范 git 的提交信息

使用`commitizen`规范git提交(交互式提交 + 自定义提示文案 + Commit规范)

安装依赖

shell 复制代码

  pnpm install -D commitizen cz-conventional-changelog @commitlint/config-conventional @commitlint/cli commitlint-config-cz cz-customizable

配置package.json

json 复制代码

{
  "scripts": {
    "commit:comment": "引导设置规范化的提交信息",
    "commit": "git-cz"
  },
  "config": {
    "commitizen": {
      "path": "node_modules/cz-customizable"
    },
    "cz-customizable": {
      // 若项目配置了type: "module", 就需要修改配置文件的后缀名为cjs, 并添加这个配置
      "config": ".cz-config.cjs"
    }
  }
}

新增配置文件commitlint.config.js

js 复制代码

module.exports = {
  extends: ['@commitlint/config-conventional', 'cz'],
  rules: {
    'type-enum': [
      2,
      'always',
      [
        'feature', // 新功能（feature）
        'bug', // 此项特别针对bug号，用于向测试反馈bug列表的bug修改情况
        'fix', // 修补bug
        'ui', // 更新 ui
        'docs', // 文档（documentation）
        'style', // 格式（不影响代码运行的变动）
        'perf', // 性能优化
        'release', // 发布
        'deploy', // 部署
        'refactor', // 重构（即不是新增功能，也不是修改bug的代码变动）
        'test', // 增加测试
        'chore', // 构建过程或辅助工具的变动
        'revert', // feat(pencil): add 'graphiteWidth' option (撤销之前的commit)
        'merge', // 合并分支， 例如： merge（前端页面）： feature-xxxx修改线程地址
        'build', // 打包
      ],
    ],
    // <type> 格式 小写
    'type-case': [2, 'always', 'lower-case'],
    // <type> 不能为空
    'type-empty': [2, 'never'],
    // <scope> 范围不能为空
    'scope-empty': [2, 'never'],
    // <scope> 范围格式
    'scope-case': [0],
    // <scope> 枚举范围
    'scope-enum': [1, 'always'],
    // <subject> 主要 message 不能为空
    'subject-empty': [2, 'never'],
    // <subject> 以什么为结束标志，禁用
    'subject-full-stop': [0, 'never'],
    // <subject> 格式，禁用
    'subject-case': [0, 'never'],
    // <body> 以空行开头
    'body-leading-blank': [1, 'always'],
    'header-max-length': [0, 'always', 72],
  },
}

添加自定义提示.cz-config.cjs

js 复制代码

module.exports = {
  types: [
    { value: 'feature', name: '✨ Features |   增加新功能' },
    { value: 'bug', name: '🐛 Bug Fixes | 测试反馈bug列表中的bug号' },
    { value: 'fix', name: '🐛 Bug Fixes | 修复bug' },
    { value: 'ui', name: '💄 UI| 更新UI' },
    { value: 'docs', name: '📝 Documentation |文档变更' },
    { value: 'style', name: '💄 Styles | 风格(不影响代码运行的变动)' },
    { value: 'perf', name: '⚡Performance Improvements | 性能优化' },
    { value: 'refactor', name: '♻ Code Refactoring |重构(既不是增加feature，也不是修复bug)' },
    { value: 'release', name: 'release:  发布' },
    { value: 'deploy', name: '🚀 Chore |部署' },
    { value: 'test', name: '✅ Tests |增加测试' },
    { value: 'chore', name: '🚀 Chore |构建过程或辅助工具的变动(更改配置文件)' },
    { value: 'revert', name: '⏪ Revert | 回退回退' },
    { value: 'build', name: '📦‍ Build System |打包' },
  ],
  // override the messages, defaults are as follows
  messages: {
    type: '请选择提交类型:',
    customScope: '请输入您修改的范围(可选):',
    subject: '请简要描述提交 message (必填):',
    body: '请输入详细描述(可选，待优化去除，跳过即可):',
    footer: '请输入要关闭的issue(待优化去除，跳过即可):',
    confirmCommit: '确认使用以上信息提交？(y/n/e/h)',
  },
  // 要是同一个git下有多个项目文件家， 可以打开注释选择git要操作的项目
  // scopes: [{ name: 'h5' }, { name: 'manage'}],
  allowCustomScopes: true,
  skipQuestions: ['body', 'footer'],
  subjectLimit: 72,
}

使用`prettier`格式化代码

安装

pnpm add --save-dev --save-exact prettier
创建.prettierrc文件，并添加如下配置, 具体配置可以查看官网

json 复制代码

{
  "semi": false,
  "tabWidth": 2,
  "useTabs": false,
  "singleQuote": true,
  "printWidth": 150
}

使用`husky`及`lint-staged`再提交代码时格式化代码

安装(注意：这里与prettier官网的给出的示例不太一致，建议看husky官网进行配置)
shell 复制代码
```
 pnpm add --save-dev husky lint-staged
 pnpm exec husky init
 npm pkg set scripts.prepare="husky"
```
在package.json添加如下配置

json 复制代码

{
  "lint-staged": {
    "**/*": "prettier --write --ignore-unknown"
  }
}

在.husky新建pre-commit文件，并添加如下配置

shell 复制代码

  echo "🚀 pre-commit"
  echo "npx --no-install lint-staged"
  npx --no-install lint-staged

在.husky新建commit-msg文件，并添加如下配置

shell 复制代码

  echo "🚀 commit-msg"
  echo "npx --no-install commitlint --edit \"$1\""
  npx --no-install commitlint --edit "$1"

完结

在git add后执行pnpm run commit命令根据提示输入commit信息即可。

前端项目git提交规范配置

项目规范管理

目的

使用commitizen规范git提交(交互式提交 + 自定义提示文案 + Commit规范)

使用prettier格式化代码

使用husky及lint-staged再提交代码时格式化代码

完结

使用`commitizen`规范git提交(交互式提交 + 自定义提示文案 + Commit规范)

使用`prettier`格式化代码

使用`husky`及`lint-staged`再提交代码时格式化代码