husky配置实现代码提交前校验与规范提交信息

jsPao

已于 2024-08-01 10:07:00 修改

阅读量2.9k

点赞数 36

分类专栏：前端工程化打包工具 git 文章标签： elasticsearch 大数据搜索引擎前端

于 2024-03-28 13:40:55 首次发布

本文链接：https://blog.csdn.net/array__/article/details/135462226

版权

本文介绍如何使用Husky配置代码提交前的eslint校验及commit信息规范，包括安装与配置流程，以及如何利用commitlint确保commit消息遵循约定。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

husky是一个Git Hook管理工具，主要用于实现提交前eslint校验和commit信息的规范校验。

Husky 的原理是让我们在项目根目录中写一个配置文件，然后在安装 Husky的时候把配置文件和 Git Hook 关联起来，这样我们就能在团队中使用 Git Hook 了。

首先，确保已经安装了husky和commitlint。如果没有安装，可以使用以下命令进行安装：
```
npm install -D husky commitlint
```
在项目中启用husky钩子，事实上是在项目根目录生成配置文件的文件夹（.husky）。查看.git/config，可以看到配置中修改了core.hooksPath指向为.husky。
```
npx husky install
```
项目配置文件添加配置，实现跑命令前先安装husky
```
"scripts": {
    "prepare": "husky install"
},
```

添加husky hook的pre-commit配置文件。执行之后会增加文件.husky/pre-commit（其中的注释是我另外添加的）。

npx husky add .husky/pre-commit "npm run lint"

#!/bin/sh
# . 指令为source，表示不产生新的shell，在当前shell下执行命令，共享上下文，类似将两个文件拼接到一起
# 执行 .husky/_/husky.sh
. "$(dirname "$0")/_/husky.sh"

npm run lint

类似的，我们也可以添加commit-msg钩子，来规范我们的commit message信息
```
npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"' 
```

在package.json文件中，定义相关的指令。例如，以下是一个示例配置：

"scripts": {
    "dev": "vite serve --mode development",
    "build": "vite build --mode test",
    "preview": "vite preview",
    "test:unit": "vitest --environment jsdom --root src/",
    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore",
    "prepare": "husky install",
    "commitlint": "commitlint --config commitlint.config.js -e -V"
},

需要确保在项目的根目录下有一个eslint.config.js文件也可以是.eslintrc.js文件（用于配置eslint）和一个commitlint.config.js文件也可以是.commitlintrc.js（用于配置commitlint）