前端Husky+lint-staged+eslint实现自动化工程增量提交检测

目标:

  • 研发团队公用一套静态代码检测规范;
  • 一套代码提交规范;
  • 利用自动化工具完成检测,提高编码规范性和review效率

流行的前端行业代码eslint静测规范:

eslint-config-google:Google标准(https://www.npmjs.com/package/eslint-config-google)

eslint-config-airbnb:Airbnb标准 (https://www.npmjs.com/package/eslint-config-airbnb)最流行、最严苛

eslint-config-standard:Standard标准(https://www.npmjs.com/package/eslint-config-standard)使用人数最多

上面三个规范为行业内比较出名和流行的规范,建议中小型公司已行业规范为准。
关于eslint配置不是本篇文章重点,涉及内容也比较对,下期会专门写一篇幅讲解。

代码提交规范自动化检测

husky:是一个为 git 客户端增加 hook 的工具。安装后,它会自动在仓库中的 .git/ 目录下增加相应的钩子;比如 pre-commit 钩子就会在你执行 git commit 的触发。我们可以在 pre-commit 中实现一些比如 lint 检查、单元测试、代码美化等操作。当然,pre-commit 阶段执行的命令当然要保证其速度不要太慢,每次 commit 等很久体验不好。

lint-staged:一个仅仅过滤出 Git 代码暂存区文件(被 git add 的文件)的工具;这个很实用,因为我们如果对整个项目的代码做一个检查,可能耗时很长,如果是老项目,要对之前的代码做一个代码规范检查并修改的话,这可能就麻烦了,可能导致项目改动很大。所以这个 lint-staged,对团队项目和开源项目来说,是一个很好的工具,它是对个人要提交的代码的一个规范和约束。

作用:

  1. 规范代码提交: git commmit -m ‘xxx’ 时,用来检查 xxx 是否满足规范格式的工具。
  2. pre-commit hook中自动检测并修复部分代码规范(全量检测),搭配lint-staged使用可实现增量检测(仅检测缓存区)。

安装方式:

  1. npm i husky -D
  2. 在 package.json 中添加 prepare 命令
{
  "script": {
    "prepare": "husky install"
  }
}
  1. 执行prepare命令 npm run prepare 会在项目跟目录下创建 .husky/文件夹,用来存放所有的git hooks。

  2. 添加commit-msg

  npx husky add .husky/commit-msg 'yarn commitlint --edit "$1"'
  // 如果不生效请使用yarn
  yarn husky add .husky/commit-msg 'yarn commitlint --edit "$1"'
  1. 自定义git提交规范
npm i @commitlint/cli @commitlint/config-conventional -D

项目跟目录下创建 commitlint.config.js 在里面定义提交规则
配置案例:

module.exports = {
  extends: ['@commitlint/config-conventional'],
  rules: {
    'body-leading-blank': [2, 'always'],
    'footer-leading-blank': [1, 'always'],
    'header-max-length': [2, 'always', 108],
    'subject-empty': [2, 'never'],
    'type-empty': [2, 'never'],
    'type-enum': [
      2, // type必须输入
      'always',
      [
        'feat', // 新功能 
        'fix', // 修复bug 
        'style', // 修改格式,删除代码空格、缩进等
        'docs', // 文档、注释修改
        'refactor', // 代码重构,没有功能修改
        'merge',  // 代码合并
        'revert',  // 版本回滚
        'chore', // 构建过程或辅助工具的变动
        'test',
        'perf',
        'build',
        'ci',
        'revert',
        'wip',
        'workflow',
        'types',
        'release',
      ]
    ]
  }
}

使用案例:
git commit -m 'feat: 增加 xxx 功能'
错误type将无法提交。

代码规范提交检测

  1. 添加 git hooks
    执行以下命令,会在.husky/下创建一个名为 pre-commit 的shell脚本,pre-commit钩子会在git提交commit时先触发,执行 npm run lint 命令。
  npx husky add .husky/pre-commit "npm run lint"
  // 如果不生效请使用yarn
  yarn husky add .husky/pre-commit "npm run lint"
  1. 安装lint-staged(实现代码增量检测,只检测添加到git缓存区的文件)
  npm i lint-staged -D
  1. 在 package.json 中添加lint命令
{
  "script": {
    "lint": "lint-staged"
  }
}
  1. 添加lint-staged配置
  • 方法一:在package.json中添加
  • 方法二:创建.lintstagedrc 文件
  • 方法三:创建lint-staged.config.js 文件并进行配置

以package.json中添加为例

{
  "lint-staged": {
    "*.{js.vue}": [
      "prettier --write",
      "eslint --cache --fix"
    ]
  }
}

在 commit 之前,将暂存区的内容做一次 代码检查 和 代码美化,然后再添加到暂存区;然后再 commit

  1. 安装eslint和prettier插件,项目根目录下面配置eslint和prettier规则,然后就可以在git提交时进行代码美化和校验了。

总结:husky+lint-staged 自动化代码提交规范方案配置完成,无论是webpack工程还是vite工程都可以正常使用,本文只介绍了husky对于git提交信息的规范检测,下期讲解husky配置git提交时对于eslint代码规范的检测。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 151,511评论 1 330
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 64,495评论 1 273
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 101,595评论 0 225
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 42,558评论 0 190
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 50,715评论 3 270
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 39,672评论 1 192
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,112评论 2 291
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,837评论 0 181
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 33,417评论 0 228
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,928评论 2 232
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,316评论 1 242
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,773评论 2 234
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,253评论 3 220
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,827评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,440评论 0 180
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 34,523评论 2 249
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 34,583评论 2 249

推荐阅读更多精彩内容