前端配置husky,commit-lint

1.husky配置

什么是husky?

husky是 git 的hook工具,就是用于git commit之前进行自定义命令。 我们可以使用husky在代码提交之前进行相应的检查,防止不规范的代码被提交到仓库。

安装husky

text 复制代码
pnpm add --save-dev husky

初始化husky

text 复制代码
npx husky init

执行后:

  • 项目根目录下会生成一个 .husky 文件夹。
  • 里面会包含一个默认的 pre-commit 示例 Hook 文件。

在.husky/pre-commit中编写命令

在pre-commit文件我们可以写在git提交之前进行的命令。

注意,这些pnpm命令提前在package.json文件中定义好:

pre-commit文件中的命令示例:

shell 复制代码
pnpm lint
pnpm format
git add -A

2.commit-lint

commit-lint可以规范我们的提交信息。

怎么规范的?

commit-lint规范git提交的描述词,比如我们对代码的样式部分进行了更改,提交信息应该这样写:

text 复制代码
git commit -m "style: 样式进行修改"

如果我们修改的是一些锁翠的代码,可以这样写:

text 复制代码
git commit -m "chore: 配置commit-lint"

如果不写stylechore等描述词,commit-lint拒绝提交。

安装commit-lint

text 复制代码
pnpm add -D @commitlint/cli @commitlint/config-conventional

创建配置文件

在项目根目录下创建 commitlint.config.js(或 .commitlintrc),添加以下内容:

js 复制代码
import '@commitlint/config-conventional'

export default { extends: ['@commitlint/config-conventional'] }

配置 husky 的 commit-msg Hook

Husky 需要在 commit-msg 阶段运行 commitlint,以验证提交信息。

创建 .husky/commit-msg 文件,并添加以下命令:

text 复制代码
pnpm commitlint --edit $1

随便提交测试一下

commit-lint描述词

在下面图中的文件中我们可以找到commit-lint定义的描述词:

  • feat:新功能(Feature)
  • fix:修复 bug(Bug fix)
  • docs:文档更改(Documentation)
  • style:代码样式调整(Formatting, whitespace changes)
  • refactor:重构(代码优化,不新增功能也不修 bug)
  • perf:性能优化(Performance improvements)
  • test:添加或修改测试(Tests)
  • build:构建系统或外部依赖更改(Build system)
  • ci:CI 配置或脚本更改(Continuous Integration)
  • chore:杂项(不修改 src 或 test 的更改)
  • revert:回滚之前的提交(Revert)

提交格式:

text 复制代码
git commit -m "chore: 配置commit-lint"
相关推荐
华玥作者2 小时前
[特殊字符] VitePress 对接 Algolia AI 问答(DocSearch + AI Search)完整实战(下)
前端·人工智能·ai
Mr Xu_3 小时前
告别冗长 switch-case:Vue 项目中基于映射表的优雅路由数据匹配方案
前端·javascript·vue.js
前端摸鱼匠3 小时前
Vue 3 的toRefs保持响应性:讲解toRefs在解构响应式对象时的作用
前端·javascript·vue.js·前端框架·ecmascript
lang201509283 小时前
JSR-340 :高性能Web开发新标准
java·前端·servlet
好家伙VCC4 小时前
### WebRTC技术:实时通信的革新与实现####webRTC(Web Real-TimeComm
java·前端·python·webrtc
未来之窗软件服务5 小时前
未来之窗昭和仙君(六十五)Vue与跨地区多部门开发—东方仙盟练气
前端·javascript·vue.js·仙盟创梦ide·东方仙盟·昭和仙君
嘿起屁儿整5 小时前
面试点(网络层面)
前端·网络
VT.馒头5 小时前
【力扣】2721. 并行执行异步函数
前端·javascript·算法·leetcode·typescript
phltxy6 小时前
Vue 核心特性实战指南:指令、样式绑定、计算属性与侦听器
前端·javascript·vue.js
Byron07077 小时前
Vue 中使用 Tiptap 富文本编辑器的完整指南
前端·javascript·vue.js