CSC

Appearance

git规范拦截 ​

TIP

再代码提交前做规范拦截，提高代码质量

husky ​

TIP

husky: Modern native Git hooks made easy(现代原生Git挂钩变得很容易)

安装：

bash
yarn add husky -D

使用再package.json文件中使用如下；

json
{
 "husky": {
    "hooks": {
      "pre-commit": "XXXXXX", // commit 之前的钩子
      "commit-msg": "XXXXXXX", // commit 时的钩子
      "pre-push": "XXXXXXX" // push 之前的钩子
    }
  }
}

eslint未修复拦截 ​

安装lint-staged:

TIP

Run linters against staged git files and don't let 💩 slip into your code base!(对暂存的git文件运行测试器，不要让💩溜进你的代码库!)

bash
# 官网： https://github.com/okonet/lint-staged 这边只介绍怎么配置git拦截不具体说怎么使用
yarn add lint-staged -D

使用再package.json中配置：

json
{
  "lint-staged": {
    "*.{js,jsx,vue}": [
      "eslint --fix --ext .js,.jsx,.vue,.ts,.tsx"
    ]
  },
}

然后需要再上面的git hooks钩子上调用下（如下）：

json
{
 "lint-staged": {
    "*.{js,jsx,vue}": [
      "eslint --fix --ext .js,.jsx,.vue,.ts,.tsx"
    ]
  },
 "husky": {
    "hooks": {
      "pre-commit": "lint-staged", // commit 之前的钩子
      "commit-msg": "XXXXXXX", // commit 时的钩子
      "pre-push": "XXXXXXX" // push 之前的钩子
    }
  }
}

DANGER

在你不修复eslint就提交至git会给你提示如下：

lint-staged.png修复后方可提交！！！！！！！

commit massage的检验 ​

TIP

继续配置咱们的git commit message的检验如下：

json
{
 "lint-staged": {
    "*.{js,jsx,vue}": [
      "eslint --fix --ext .js,.jsx,.vue,.ts,.tsx"
    ]
  },
 "husky": {
    "hooks": {
      "pre-commit": "lint-staged", // commit 之前的钩子
      "commit-msg": "node scripts/verify-commit-msg.js", // commit 时的钩子
      "pre-push": "XXXXXXX" // push 之前的钩子
    }
  }
}

用node执行scripts/verify-commit-msg.js脚本

verify-commit-msg.js脚本代码如下：

js
const { error, warning } = require('./logger');
const msgPath = process.env.HUSKY_GIT_PARAMS;
const msg = require('fs').readFileSync(msgPath, 'utf-8').trim();

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

if (!commitRE.test(msg)) {
  error('提交信息不符合规范格式！\n');
  error('格式为：[类型]: [描述]\n');
  warning('\n  feat: 完成详情页面布局\n  fix: 修复刷新时间不准确的问题\n  docs: 某某文档编写\n');
  process.exit(1);
}

TIP

再进程process的环境变量env中能找到husky提供的HUSKY_GIT_PARAMS当前git commit massage的路径，然后用fs读取提交内容，最后用正则表达式定制拦截规则, 再不满足定制规则的给进程后退，回到上一步process.exit(1);。

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

规则说明：

类型描述
revert回复
feat提交新特性代码
fix修复bug
docs编写文档
style修改样式
refactor代码重构
perf性能优化
test测试用例
workflow工作流
ci持续集成
chore构建过程的变化
build构建打包

分支/tag 命名规范拦截 ​

TIP

继续配置咱们的git分支/tag 命名规范配置pre-push如下：

json
{
 "lint-staged": {
    "*.{js,jsx,vue}": [
      "eslint --fix --ext .js,.jsx,.vue,.ts,.tsx"
    ]
  },
 "husky": {
    "hooks": {
      "pre-commit": "lint-staged", // commit 之前的钩子
      "commit-msg": "node scripts/verify-commit-msg.js", // commit 时的钩子
      "pre-push": "node scripts/verify-git-branch/index.js" // push 之前的钩子
    }
  }
}

用node执行scripts/verify-git-branch/index.js脚本

verify-git-branch/index.js关键代码如下：

js
const params  = process.env.HUSKY_GIT_STDIN;
//params: refs/heads/test1 7fe5f9d5ae41 refs/heads/test1 00000000000000000000000
js
module.exports = {
    branchPattern: '^(master|dev){1}$|^(feature|hotfix|release|bugfix)\\/.+$',
    tagPattern: '^v\\d+\\.\\d+\\.\\d+.*'
};

TIP

再进程process的环境变量env中能找到husky提供的HUSKY_GIT_STDIN当前分支或者tag的相关信息。用来截取，使用正则判断下即可。
再不满足正则检验的需要把相关信息收集下作为log日志输出，最后进程后退，回到上一步process.exit(1);。

用npm scripts优化下命令行 ​

json
{
"scripts": {
    "commit": "node scripts/verify-commit-msg.js",
    "pre-push": "node scripts/verify-git-branch/index.js",
  },
  "lint-staged": {
    "*.{js,jsx,vue}": [
      "eslint --fix --ext .js,.jsx,.vue,.ts,.tsx"
    ]
  },
   "husky": {
    "hooks": {
      "pre-commit": "lint-staged",
      "commit-msg": "npm run commit",
      "pre-push": "npm run pre-push"
    }
  }
}

文件命名规范拦截 ​

TIP

留以后再说，不是太好描述....

鄂ICP备2026005471号