如何实现pnpm commit拦截

首先需要在package.json中下载这几个包

执行命令参照http://typicode.github.io/husky/get-started.html

npx husky init

就会在项目的根目录出现这几个文件

TypeScript 复制代码
// pre-commit
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

echo 'husky: pre-commit'
pnpm lint && pnpm spellcheck
TypeScript 复制代码
//commit-msg
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

echo 'husky: commit'
# 用来检测commmit msg是否符合规范,意思是用commitlint来执行校验,就是通过commitlint.config.cjs的细则来进行校验
npx commitlint --edit $1

然后在package.json中添加config

之后在项目根目录新建文件

这里的内容是摘抄https://cz-git.qbb.sh/zh/config/

如上的图片中使用的js,但是因为兼容原因使用cjs

TypeScript 复制代码
module.exports = {
  // 添加规则配置
  extends: ['@commitlint/config-conventional'],
  rules: {
    // @see: https://commitlint.js.org/#/reference-rules
  },
  prompt: {
    alias: { fd: 'docs: fix typos' },
    messages: {
      type: '选择你要提交的类型 :',
      scope: '选择一个提交范围(可选):',
      customScope: '请输入自定义的提交范围 :',
      subject: '填写简短精炼的变更描述 :\n',
      body: '填写更加详细的变更描述(可选)。使用 "|" 换行 :\n',
      breaking: '列举非兼容性重大的变更(可选)。使用 "|" 换行 :\n',
      footerPrefixesSelect: '选择关联issue前缀(可选):',
      customFooterPrefix: '输入自定义issue前缀 :',
      footer: '列举关联issue (可选) 例如: #31, #I3244 :\n',
      confirmCommit: '是否提交或修改commit ?'
    },
    types: [
      { value: 'feat', name: 'feat:     新增功能 | A new feature' },
      { value: 'fix', name: 'fix:      修复缺陷 | A bug fix' },
      { value: 'docs', name: 'docs:     文档更新 | Documentation only changes' },
      { value: 'style', name: 'style:    代码格式 | Changes that do not affect the meaning of the code' },
      { value: 'refactor', name: 'refactor: 代码重构 | A code change that neither fixes a bug nor adds a feature' },
      { value: 'perf', name: 'perf:     性能提升 | A code change that improves performance' },
      { value: 'test', name: 'test:     测试相关 | Adding missing tests or correcting existing tests' },
      { value: 'build', name: 'build:    构建相关 | Changes that affect the build system or external dependencies' },
      { value: 'ci', name: 'ci:       持续集成 | Changes to our CI configuration files and scripts' },
      { value: 'revert', name: 'revert:   回退代码 | Revert to a commit' },
      { value: 'chore', name: 'chore:    其他修改 | Other changes that do not modify src or test files' }
    ],
    useEmoji: false,
    emojiAlign: 'center',
    useAI: false,
    aiNumber: 1,
    themeColorCode: '',
    scopes: [],
    allowCustomScopes: true,
    allowEmptyScopes: true,
    customScopesAlign: 'bottom',
    customScopesAlias: 'custom',
    emptyScopesAlias: 'empty',
    upperCaseSubject: null,
    markBreakingChangeMode: false,
    allowBreakingChanges: ['feat', 'fix'],
    breaklineNumber: 100,
    breaklineChar: '|',
    skipQuestions: [],
    issuePrefixes: [
      // 如果使用 gitee 作为开发管理
      { value: 'link', name: 'link:     链接 ISSUES 进行中' },
      { value: 'closed', name: 'closed:   标记 ISSUES 已完成' }
    ],
    customIssuePrefixAlign: 'top',
    emptyIssuePrefixAlias: 'skip',
    customIssuePrefixAlias: 'custom',
    allowCustomIssuePrefix: true,
    allowEmptyIssuePrefix: true,
    confirmColorize: true,
    scopeOverrides: undefined,
    defaultBody: '',
    defaultIssues: '',
    defaultScope: '',
    defaultSubject: ''
  }
}

然后配合package.json这里的脚本使用,这里的脚本内容是

配合下载commit相关的包

TypeScript 复制代码
  "devDependencies": {
    "eslint": "9.1.0",
    "@eslint/js": "9.1.0",
    "typescript": "5.5.2",
    "typescript-eslint": "7.14.1",
    "cspell": "8.9.1",
    "stylelint": "16.6.1",
    "husky": "9.0.11",
    "commitlint": "19.3.0",
    "cz-git": "1.9.3",
    "commitizen": "4.3.0",
    "@commitlint/config-conventional": "19.2.2"
  }

如有不完整的地方欢迎大家的反馈,我会悉心听取不断补足

相关推荐
暮冬十七6 天前
[特殊字符] Vue3 项目最佳实践:组件命名、目录结构与类型规范指南
前端·前端架构·vue3项目搭建
是罐装可乐2 个月前
前端架构知识体系:Source Map 的用法和全面解析
前端·映射·前端架构·代码安全·源码地图·source-map
jllws18 个月前
数据类设计_图片类设计之4_规则类图形混合算法(前端架构)
c++·计算机图形学·前端架构·数据类设计
Wang's Blog2 年前
前端架构: 脚手架通用框架封装之添加测试框架(教程六)
前端·前端架构·前端脚手架
Wang's Blog2 年前
前端架构: 脚手架命令行交互核心实现之inquirer和readline的应用教程
前端·脚手架·前端架构
Wang's Blog2 年前
前端架构: 脚手架包管理工具之lerna的全流程开发教程
前端·脚手架·前端架构
Wang's Blog2 年前
React18源码: reconcliler启动过程
前端·react.js·前端架构
Wang's Blog2 年前
React18源码: schedule任务调度messageChannel
前端·react.js·前端架构
超级架构师2 年前
【Angular开发】Angular中的高级组件
javascript·ecmascript·前端开发·angular·angular.js·前端架构