[前端工程化配置] husky + lint-staged 格式化git提交代码

在团队开发时，为了保证每个人提交的代码格式统一，采用husky + lint-staged 配置git hooks，自动触发格式化操作，对通过git add命令添加到暂存区的代码进行格式化。

一、lint-staged

lint-staged是一个对git暂存区代码进行格式化的工具

1、安装lint-staged

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

2、package.json配置

// change 1: 配置lint-staged指令
"scripts": {
    // 新增这一行
    "lint-staged": "lint-staged",
    ...
},
// change 2: 配置lint-staged的具体任务
"lint-staged": {
    "*.{js,ts,vue,jsx,tsx}": [
      "eslint --cache --fix",
      "git add"
    ]
  },

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

二、husky

husky是一个Git hooks工具，能够在项目中配置hooks脚本；当我们执行git操作时，自动触发配置的脚本；常用的hooks有pre-commit和commit-message。

1. 安装husky

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

2. 在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文件夹，

3. 添加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

至此，配置完成；

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