husky 工具配置代码检查工作流：提交代码至仓库前做代码检查

提示：这篇博客以我前两篇博客作为先修知识，请大家先去看看我前两篇博客

博客指路：前端 ESlint 代码规范及修复代码规范错误-CSDN博客前端 Vue3 项目开发—— ESLint & prettier 配置代码风格-CSDN博客

husky 工具配置代码检查工作流的作用

在工作中，我们经常需要将写好的代码提交至代码仓库

但是由于程序员疏忽而将不规范的代码提交至仓库，显然是不合理的

所以我们需要引入一种检查机制，若代码不规范，就不允许提交

提交前做代码检查

husky 是一个 git hooks 工具 ( git的钩子工具，可以在特定时机执行特定的命令 )

husky 配置

1、git初始化 git init（若已有仓库则跳过这一步）

2、初始化 husky 工具配置 Husky

pnpm dlx husky-init && pnpm install

3、修改 .husky / pre-commit 文件

pnpm lint

暂存区 eslint 校验

问题：pnpm lint 默认进行的是全量检查，耗时问题，历史问题

耗时问题 -> 如果项目过大，校验耗时也大

历史问题 -> 且如果拉取同事的代码，校验之后发现同事的代码有很多规范问题，我们还要替同事背这个锅，显然不合理。因为 eslint 的校验可能并不是一开始就有的，而是在工作过程中逐步建立起来的，所以可能旧的代码没有经过校验就被提交了

所以能不能改改机制，每次提交都只检查最新改动的代码？这样才符合实际工作需求

如何实现？

lint-staged 配置

安装

pnpm i lint-staged -D

配置 package.json

{
  // ... 省略 ...
  "lint-staged": {
    "*.{js,ts,vue}": [
      "eslint --fix"
    ]
  }
}
​
{
  "scripts": {
    // ... 省略 ...
    "lint-staged": "lint-staged"
  }
}

配置好的文件如下图所示

修改 .husky/pre-commit 文件

pnpm lint-staged