前端工程化--husky

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第6天，点击查看活动详情

前言：一般企业开发都有一套代码规则，同样提交代码也可以有一些规则，今天我将用husky和lint-staged来制定一套提交代码时的规则。

安装

pnpm add lint-staged -D
pnpm dlx husky-init && pnpm install

例子

1.在package.json中加入以下代码:

 "lint-staged": {
  "src/**/*.{js,json,vue}": [
   "eslint --fix"
  ]
 }

• "src/**/*.{js,json,vue}" :表示src下面的所有js、json、vue都会被检测

2.pnpm dlx husky-init && pnpm install指令执行后会生成如下文件

• pre-commit:提交代码到git缓存区时的钩子,一般可以用npx lint-staged来对代码进行校验,将npm test用npx lint-staged来代替.

npx lint-staged测试

1.在src中新建一个index.js的文件

a

2.在bash中执行:npx lint-staged

提交信息校验

1.编写我们的信息校验规则,新建一个commitValide.js

const chalk = require('chalk')
const msgPath = process.argv[2]
const msg = require('fs')
  .readFileSync(msgPath, 'utf-8')
  .trim()//获取提交信息

const commitRE = /^(revert: )?(feat|fix|docs|dx|style|refactor|perf|test|workflow|build|ci|chore|types|wip|release|build time)(\(.+\))?: .{1,50}/

if (!commitRE.test(msg)) {
  console.log()
  console.error(
    `  ${chalk.bgRed.white(' ERROR ')} ${chalk.red(
      `无效的提交消息格式`
    )}\n\n` +
    chalk.red(
      `  自动生成更新日志需要正确的提交消息格式 例如:\n`
    ) +
    `  ${chalk.yellow('type(XXXXX):空格需求号_XXXXXXXXXXXXX')}\n` +
    `  ${chalk.green('feat(模块名): v6.2.8_提交信息简短的描述')}\n` +
    `  ${chalk.green('fix(模块名): #106308 禅道里的 bug 标题')}\n`
  )
  process.exit(1)
}

• process.exit(1):结束进程并告诉husky提交信息有错 2.执行如下指令

npx husky add .husky/commit-msg 'node commitValide.js $*'

• 会生成一个shell脚本.husky/commit-msg

3.执行git命令去提交信息:

效果图