husky@9、commitlint、lint-staged配置

前言

上一篇文章介绍了通过eslint与prettier配合,实现代码质量与风格的控制,但需要vscode配置的配合才可生效,不具备强制性。本文将继续深入,通过husky、commmitlint、lint-staged的使用,保证远程仓库代码的质量与规范。

  • husky,一款管理 git hooks 的工具
  • commitlint,一款 git commit 提交规范检验工具
  • lint-staged,一个对 git暂存区 代码进行处理的工具

husky

它将在我们提交代码时触发不同的钩子,执行不同脚本,帮忙我们自动化的处理一些任务,比如执行 eslint 命令等。

1. 安装

bash 复制代码
npm install husky -D

2. 配置

  • v9版本

    • 执行配置脚本

      bash 复制代码
      npx husky init
    • 添加钩子

      bash 复制代码
      echo "npm test" > .husky/pre-commit
  • v9之前版本

    • package scripts脚本添加prepare钩子,执行husky install

      bash 复制代码
      npm pkg set scripts.prepare="husky install"
    • 执行配置脚本,自动创建 .husky/_git钩子相关文件

      arduino 复制代码
      npm run prepare
    • 添加pre-commit 钩子,脚本为 npm test

      sql 复制代码
      npx husky add .husky/pre-commit "npm test"

版本差异可参照官方迁移教程

commitlint

commitlint 是当前使用最广泛的git提交规范检验工具,能够较好的帮助我们在项目开发中,对提交信息的 message 规范进行校验。

1. 安装

bash 复制代码
npm install -D commitlint @commitlint/cli @commitlint/config-conventional
  • @commitlint/config-conventional 是基于 conventional commits 规范的配置文件。
  • @commitlint/cli 是 commitlint 工具的核心。

2. 配置

增加 .commitlintrc.js 配置文件

js 复制代码
module.exports = {
    extends: ['@commitlint/config-conventional']
};

3. 结合husky,实现git commit规范校验

设置 commit-msg hook

bash 复制代码
echo "npx --no-install commitlint -e $HUSKY_GIT_PARAMS" > .husky/commit-msg

lint-stated

lint-staged 工具可实现,只针对提交的代码文件进行检查处理。

1. 安装

bash 复制代码
npm install lint-staged -D

2. 配置

在package.json文件中增加内容

json 复制代码
{
    "scripts": [
        "lint-staged": "lint-staged"
    ],
    "lint-staged": {
        "*.{js,ts,jsx,tsx}": [
            "eslint --fix"
        ]
    },
}

3. 结合husky,实现对暂存区文件的校验

设置 pre-commit hook

bash 复制代码
echo "pnpm lint" > .husky/pre-commit

总结

  1. husky用来管理git hooks,以此来增强git功能
  2. commitlint结合commit-msg钩子,实现提交规范的校验
  3. lint-staged结合pre-commit钩子,实现对暂存区文件的校验

参考文章

  1. juejin.cn/post/724214...
  2. segmentfault.com/a/119000004...
  3. ovnrain.com/post/husky-...
相关推荐
Code小翊3 分钟前
TypeScript 核心语法速查
前端·javascript·typescript
家里有只小肥猫5 分钟前
uniApp下拉渐变头部 拿来即用
前端·javascript·uni-app
一起养小猫5 分钟前
Flutter for OpenHarmony 实战:科学计算器完整开发指南
android·前端·flutter·游戏·harmonyos
Jinuss5 分钟前
源码分析之React中Scheduler调度器的任务优先级
前端·react.js·前端框架
波波00714 分钟前
每日一题:在 .NET 中遍历集合(如 List<T>、数组、字典)的过程中进行增删改查会不会有影响?可能引发哪些问题?实际开发中应如何避免?
前端·list
念念不忘 必有回响24 分钟前
码云流水线前端资源传输至目标服务器
运维·服务器·前端
我是伪码农31 分钟前
Vue 2.2
前端·javascript·vue.js
●VON34 分钟前
React Native for OpenHarmony:深入剖析 Switch 组件的状态绑定、无障碍与样式定制
javascript·学习·react native·react.js·von
时光追逐者1 小时前
一个基于 .NET + Vue 实现的通用权限管理平台(RBAC模式),前后端分离模式,开箱即用!
前端·vue.js·c#·.net·.net core
Aotman_1 小时前
Vue el-table 表尾合计行
前端·javascript·vue.js·elementui·前端框架·ecmascript