likes
comments
collection
share

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

作者站长头像
站长
· 阅读数 27

前言

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

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

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

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

正文开始

1,husky

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

Husky支持了哪些钩子? 官网都罗列了:官网

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

这里使用一键安装的方式

1.1, 安装

npx husky-init && npm install

命令执行成功后,如下图

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

这条命令做了四件事

  • 安装了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时对项目进行eslint校验

到此,husky配置就结束啦

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

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

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

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

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

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

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

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

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

2,husky + lint-staged

2.1,安装

npm i -D lint-staged

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

3.2,没有pre-commit文件

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

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

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

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

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

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

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

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

完结

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

欢迎转载,但请注明来源。 最后,希望小伙伴们给我个免费的点赞,祝大家心想事成,平安喜乐。

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

转载自:https://juejin.cn/post/7272199653339742248
评论
请登录