为什么要做前置校验
现在前端大部分工程在打包编译时都会做一次代码规范校验,如果这个时候代码规范不符合规则,就会导致工程编译失败;
如果我们在开发阶段,代码不符合ESLint
规则,开发过程中可以及时看到问题。
如果我们在没启动工程的情况下去改了代码直接提交。这个时候就会产生我们刚所说的工程编译失败问题。
接下来我们使用huksy
,通过在特定githooks 钩子进行eslint检查
什么是Husky
Husky
是一个工具,它允许我们轻松地处理Git Hooks
并在提交代码时运行我们想要的脚本。 它的工作原理是在我们的 package.json
或者 Husky
文件中加入一个对象,配置Husky
来运行我们指定的脚本。 之后,Husky
会管理我们的脚本将在Git生命周期的哪个阶段运行。
如果想了解更多Husky内容,请移步Husky 官网 查看
安装Husky
这里以
pnpm
为示例
第一步
pnpm add husky
第二步
配置package.json
scripts
{
"scripts": {
"prepare": "husky install"
}
}
第三步
npx husky add .husky/pre-commit 'npm run lint-staged'
这里的 pre-commit
是git的commit的之前的一个钩子,更多gitHooks
相关资料请移步gitHooks了解查看
这里的 npm run lint-staged
后面在说
什么是lint-staged
lint-staged
是一个在git 暂存文件上(也就是被 git add 的文件)运行已配置的linter(或其他)任务。 lint-staged 总是将所有暂存文件的列表传递给任务。 这里lint-staged 的配置是:在git 的待提交的文件中, .js . vue 都要执行eslint检查
安装lint-staged
第一步
pnpm add lint-staged
第二步
在配package.json
scripts
中新增 lint-staged
,这样是为了让我们可以在当前工程下执行 lint-staged
{
"scripts": {
" lint-staged": " lint-staged"
},
"lint-staged": {
// 这里我们只检测.js和.vue的文件
"*.{js,vue}": [
"eslint"
]
},
}
⚠️ 如果
nodejs
版本过低一定要对lint-staged
做降级,如果nodejs 是12
的话需要降到10.x.x
如果是node是14
需要降到14.x.x
到这里我们的前置校验就差不多搞定了,最后来运行git commit
下试试效果吧~