【Vue3】基于 husky 的代码检查工作流

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

一、husky 配置

打开终端的时候是打开bash终端

1. git初始化 git init

2. 初始化 husky 工具安装配置 https://typicode.github.io/husky/

pnpm dlx husky-init && pnpm install

安装配置完后，项目的根目录就会出现.husky文件夹

3. 修改 .husky/pre-commit（提交代码之前） 文件

lint命令会将以这些一系列为后缀的文件进行校验并且尝试着帮你去修复

// npm test
pnpm lint // lint命令是默认在package.json中配置好的，一次性对整个项目中的所有文件进行校验，并且它发现有错误的地方，它会帮你自动修复

可以理解为：只要你一提交，它就会触发 pnpm lint，这条命令也可以手动执行

如下图，在main.js的11行第13个字符发现了错误

**问题：**默认进行的是全量检查，耗时问题，历史问题（别人没有采用规范，但是我们使用了）。

---

二、lint-staged 配置

暂存区eslint校验。这个更符合实际开发企业中的习惯，它只会去校验暂存区新添加的代码，此时它不会去管之前已经提交过的代码。

1. 安装

安装 lint-staged 包 pnpm i lint-staged -D

注意这个命令是在git环境下使用的，所以需要在bash下面安装

pnpm i lint-staged -D

2. 配置 package.json

package.json 配置 lint-staged 命令，配置完后，就可以使用这个命令了

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

{
  "scripts": {
    // ... 省略 ...
    "lint-staged": "lint-staged"
  }
}

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

改完也就意味着要执行第一步的命令，但是我们肯定是希望在提交的时候进行校验

pnpm lint-staged