⚡Husky实战篇，让你在git commit时对项目进行eslint校验

前言

本文是规范化Eslint的下篇：主要聊下代码提交时，通过钩子去校验下项目中的eslint规范

关于项目中的Eslint容易混淆的点，和Eslint配置参数详解，请看Eslint的上篇：Eslint项目实战中，容易混淆的一些小知识点

规范化通常在带团队的时候很有用，给自己的小队制定一个合适的规范，更有利于提高项目质量和团队产出。

我在网上参考很多大神的高赞文章把这些小知识点提炼了出来，学习过程中自己也收获了很多，这里分享给小伙伴们。

正文开始

1，husky

Husky 是一个基于 Git 的钩子工具，用于在提交代码之前运行一些脚本。这对于检查代码质量、自动格式化代码非常有用。

Husky支持了哪些钩子？ 官网都罗列了：官网

husky官网有两种安装方式：一键安装 和 手动逐步安装

这里使用一键安装的方式

1.1， 安装

npx husky-init && npm install

命令执行成功后，如下图

这条命令做了四件事

• 安装了husky，npm install husky -D

• 在package.json的添加了命令"prepare": "husky install"

• 项目根目录下创建了.husky文件夹，pre-commit文件里默认执行的命令是 npm test

• 配置了git钩子的路径

prepare": "husky install 命令的含义：当我们执行npm install安装完项目依赖后会执行 husky install命令创建.husky目录
yarn不支持prepare，但是提供了postinstall替换prepare

1.2， 修改成适合你项目校验eslint的命令

把pre-commit文件默认的 npm test改成你项目中进行eslint校验的命令

npm run lint // 我项目的中校验命令是这个，这是vue-cli脚手架自己提供的
 

到此，husky配置就结束啦

因为我们配置的是git commit前校验规则的钩子，所以通过下图可以看到，在执行git commit的时候，已经开始校验啦

• 校验执行的命令是我们上面配置的npm run lint

• 我在校验规则里配置了开启console校验，警告等级为error，下图也也出来了对应的提示

校验失败，进行代码提交的时候，是不会把本地的开发代码提交上去的

但是，每次提交代码要校验整个项目的代码，太慢了~~~

能不能每次提交代码只校验本次修改的代码呢？？？

lint-staged就呼之欲出啦~~~

2，husky + lint-staged

2.1，安装

npm i -D lint-staged

2.2，pre-commit文件里命令改成npm run pre-commit

2.3，package.json里的加一条命令

2.4，根目录添加.lintstagedrc配置文件

 
{
  "src/**/*.{ts,vue}": [
    "prettier --write",
    "eslint --fix"
  ]
}

通过下图可以看到，在执行git commit的时候，已经开始校验啦

到此，husky + lint-staged配置也就结束啦

3，可能遇到的问题，解决方案在此

3.1，根目录下面没有.husky文件夹

安装后如果给出下图 这种提示，并且你的项目根目录下面没有.husky文件夹

提示：请确认你当前项目有没有本地和远程仓库进行过代码拉取，推送等操作

因为husky是基于git的钩子做自己的一些逻辑，项目都没有使用过git进行代码的版本控制，当然也不能用husky啦~~~

3.2，没有pre-commit文件

这一步有的小伙伴如果是基于老项目执行命令后，出现.husky文件夹下没有pre-commit文件的问题，如下图

不要慌~~~ 执行下面的命令

npx husky add .husky/pre-commit 'npm-run-pre-commit'

执行完之后，pre-commit文件就出来了，但是文件里的命令是'npm-run-pre-commit'

也不要慌~~~ 手动改成'npm run pre-commit'就行啦

完结

这篇文章我尽力把我的笔记和想法放到这了，希望对小伙伴有帮助。

欢迎转载，但请注明来源。

最后，希望小伙伴们给我个免费的点赞，祝大家心想事成，平安喜乐。