前端使用husky + lint-staged对eslint做前置校验

为什么要做前置校验

现在前端大部分工程在打包编译时都会做一次代码规范校验，如果这个时候代码规范不符合规则，就会导致工程编译失败； 如果我们在开发阶段，代码不符合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下试试效果吧~