前言
本文是规范化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'就行啦
完结
这篇文章我尽力把我的笔记和想法放到这了，希望对小伙伴有帮助。
欢迎转载，但请注明来源。
最后，希望小伙伴们给我个免费的点赞，祝大家心想事成，平安喜乐。
