Git —— husky lint-staged 项目规范化的基石

husky 是什么？

husky 的 开篇是这么描述的：

git hooks是本地的，不会同步到git 仓库，为了保证每个人本地仓库都能执行预设的git hooks,于是就有了husky

1.1空项目

如果还没有创建项目，可以通过以下命令初始化一个带有Husky的项目：

npx husky-init               # npm
npx husky-init               # Yarn 1
yarn dlx husky-init --yarn2  # Yarn 2+
pnpm dlx husky-init          # pnpm

上面命令执行完后安装依赖命令：

npm install   # npm
yarn          # Yarn
pnpm install  # pnpm

这是官方推荐的做法，如果你想在已有的项目中引入husky，可看下一节。

1.2已有项目

安装husky

npm i husky -D # npm
yarn add husky -D # yarn
pnpm i husky -D # pnpm

package.json 中添加prepare命令：

// package.json
"scripts": {
    // 新增这一行
    "prepare": "husky install", 
    ...
},

设置prepare命令的目的是：在其他用户执行npm install后会自动执行husky install

执行husky install时，会使用git命令配置core.hooksPath，将其设置成.husky;

配置完成后，在项目中执行npm prepare(也就是执行了husky install)；

执行完成后，会在项目根目录生成一个.husky文件夹，

安装lint-staged

// 在项目根目录执行
npm install lint-staged --save-dev

package.json配置

// change 1: 配置lint-staged指令
"scripts": {
    // 新增这一行
    "lint-staged": "lint-staged",
    ...
},
// change 2: 配置lint-staged的具体任务 匹配暂存区所有的js,ts,vue,jsx,tsx 文件，并执行命令
"lint-staged": {
    "*.{js,ts,vue,jsx,tsx}": [
      "eslint --cache --fix",
      "git add"
    ]
  },

注意：这里使用prettier和eslint格式化代码，需要在项目中先安装对应依赖和配置

添加pre-commit 钩子

// 在项目根目录执行
npx husky add .husky/pre-commit 'npm run lint-staged';

执行这一步后，在.husky目录下会创建一个pre-commit文件，内容如下：

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

npm run lint-staged

看到这些内容则代表husky 整个配置完成

我们从头理一下工具的工作模式：
当我们进行一次git提交时 => 触发husky配置的pre-commit钩子 => 
执行npm run lint-staged命令 => 
触发lint-staged对暂存区的文件进行格式化（使用package.json中配置的lint-staged任务） => 
使用eslint 进行格式化