依赖安装

npm install -D commitizen cz-conventional-changelog @commitlint/config-conventional @commitlint/cli commitlint-config-cz cz-customizable husky lint-staged

初始化husky

初始化

npx husky

在husky目录下新建钩子文件

pre-commit提交注释前

npx lint-staged

commit-msg

npx commitlint --edit

配置文件

package.json

"script": {
    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
    "format": "prettier --write src/",
    "prepare": "husky",
    "commit": "git-cz"
}

"config": { 
    "commitizen": {
        "path": "node_modules/cz-customizable" 
    },
    "cz-customizable": {
        "config": ".cz-config.cjs"
    }
},
"lint-staged": {
    "*.{vue,js,ts,cjs}": [
        "prettier --write",
         "eslint --fix"
       ],
    "*.{css,scss,less,json,md,yaml}": "prettier --write"
}

commitlint.config.cjs

在项目根目录下新增 commitlint.config.js 文件

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

.cz-config.cjs

在项目根目录下新增 .cz-config.js 文件，配置自定义commmit提示语

/** @type {import("cz-customizable").Options} */
module.exports = {
  // type 类型（定义之后，可通过上下键选择）
  types: [
    { value: 'feat', name: 'feat: 新增功能' },
    { value: 'fix', name: 'fix: 修复 bug' },
    { value: 'docs', name: 'docs: 文档变更' },
    { value: 'style', name: 'style: 代码格式（不影响功能，例如空格、分号等格式修正）' },
    { value: 'refactor', name: 'refactor: 代码重构（不包括 bug 修复、功能新增）' },
    { value: 'perf', name: 'perf: 性能优化' },
    { value: 'test', name: 'test: 添加、修改测试用例' },
    { value: 'build', name: 'build: 构建流程、外部依赖变更（如升级 npm 包、修改 webpack 配置等）' },
    { value: 'ci', name: 'ci: 修改 CI 配置、脚本' },
    { value: 'chore', name: 'chore: 对构建过程或辅助工具和库的更改（不影响源文件、测试用例）' },
    { value: 'revert', name: 'revert: 回滚 commit' }
  ],
  // scope 类型（定义之后，可通过上下键选择）
  scopes: [
    { value: 'components', name: '组件相关' },
    { value: 'hooks', name: 'hook 相关' },
    { value: 'utils', name: 'utils 相关' },
    { value: 'ui', name: '对 三方ui库 的调整' },
    { value: 'styles', name: '样式相关' },
    { value: 'deps', name: '项目依赖' },
    { value: 'auth', name: '对 auth 修改' },
    { value: 'other', name: '其他修改' },
    // 如果选择 custom，后面会让你再输入一个自定义的 scope。也可以不设置此项，把后面的 allowCustomScopes 设置为 true
    { value: 'custom', name: '以上都不是？我要自定义' }
  ],
  // 交互提示信息
  messages: {
    type: '确保本次提交遵循 Angular 规范！\n选择你要提交的类型：',
    scope: '\n选择一个 scope（可选）：', // 选择 scope: custom 时会出下面的提示 customScope: '请输入自定义的 scope：',
    subject: '填写简短精炼的变更描述：\n',
    body: '填写更加详细的变更描述（可选）。使用 "|" 换行：\n',
    breaking: '列举非兼容性重大的变更（可选）：\n',
    footer: '列举出所有变更的 ISSUES CLOSED（可选）。 例如: #31, #34：\n',
    confirmCommit: '确认提交？'
  },
  allowCustomScopes: true,
  // 设置只有 type 选择了 feat 或 fix，才询问 breaking message
  allowBreakingChanges: ['feat', 'fix'],
  // 跳过要询问的步骤
  // skipQuestions: ['body', 'footer'],
  // subjectLimit: 100, // subject 限制长度
  // breaklineChar: '|' // 换行符，支持 body 和 footer
  // footerPrefix : 'ISSUES CLOSED:'
}

.prettier.json

{
  "$schema": "https://json.schemastore.org/prettierrc",
  "semi": false,
  "tabWidth": 2,
  "singleQuote": true,
  "printWidth": 100,
  "trailingComma": "none"
}