规范你的代码 -Husky

2,881 阅读2分钟

小知识,大挑战!本文正在参与“程序员必备小知识”创作活动。

近期发现了husky这个工具,用了之后就发现了很多问题,比如自己单独开发的项目中还能检查出很多不规范的代码格式。通过文章记录一下自己对这个工具的使用过程,欢迎大佬指正。

文章最后会注明参考资料,里面的内容会比较全面。

Husky

一、适用 Husky 的业务场景

也可以理解成 为什么要使用Husky

无论项目是个人开发还是多人开发,都应该有一个规范的代码格式。

统一规范的代码风格在前端工程化中也是必不可少的一部分,项目初期如果没有定义好的代码规范,后期维护起来的那种感觉。。。

而 Husky 可以在项目中通过管理Git Hooks帮助我们检查代码规范。

二、什么是 Husky?

You can use it to lint your commit messagesrun testslint code, etc... when you commit or push. Husky supports all Git hooks.

这是来自官网的介绍,由最后一句可以看出 Husky 其实是一个 Git Hook 工具。

本文中仅介绍通过运行其中的 pre-commit 钩子,在执行 git commit 时检查代码规范。

三、Husky 怎么用?

1. 安装 Husky

npx husky-init && npm install  // Mac安装 Husky
npx husky-init ; npm install  // Windows安装 Husky

在执行完安装 Husky 后,还需要创建husky文件夹给我们提供操作。

npx huksy install // 创建 husky 文件夹

这是执行命令后生成的文件夹,这里只需要关注pre-commit文件即可。

QQ图片20211002173920.png

2. 修改 pre-commit文件

pre-commit 见名知义,就是在 commit 执行前的脚本文件。

pre-commit 文件中默认配置 npm test,此时执行git commit操作会自动执行npm test

所以我们需要将npm test更改为项目中用于检测代码规范的命令。

由于我们的项目中结合了ESLint,所以对此文件进行如下修改:

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

// npm test 修改前
npm run lint  // 修改后

3. commit 提交

如下图所示,此时执行 git commit -m"xxxxx" 时,Husky 将会自动修复不符合 ESLint 规范的代码。

QQ图片20211002213255.png

4. 再次提交

由于检测出需要修复的文件,Husky 将会终止这次的 commit 提交,并且因为在修复后更改了项目文件中的代码,所以此时需要再次执行 git add . 等步骤提交新的且规范的代码即可。

四、参考资料