三、集成husky、LintStaged、CommitLint团队协作时，我们会遇到多种问题，最让人难受的就是每个人书写

团队协作时，我们遇到最让人无语的问题就是每个人书写的代码风格不一致，使用的规范不一致，导致团队协作效率极低，代码可读性差。
这时候就需要 Husky 来帮忙了，它可以帮助我们在代码提交前后进行一些自定义的操作，像是代码风格的校验，并且它支持所有的 Git 钩子（钩子是你可以放在钩子目录中触发的程序在 Git 执行的某些点执行的操作）。
Git全部钩子的详细介绍：Git - githooks Documentation (git-scm.com)

husky

本文用到的钩子：

在 pre-commit 触发时进行代码格式验证，在 commit-msg 触发时对 commit 消息和提交用户进行验证。

git hook	执行时期	备注
pre-commit	git commit 执行前	git commit --no verify 命令可以绕过该钩子
commit-msg	git commit 执行前	git commit --no verify 命令可以绕过该钩子

安装依赖

#开发依赖
pnpm i -D husky

并配置一个初始化husky命令

// package.json
{
  "script": {
    "prepare": "husky install"
  }
}

运行该命令，进行husky初始化

pnpm run prepare

至此，在我们项目的根目录下，生成了以下文件：

LintStaged

lintStaged的目的是在代码提交前进行代码指令与风格的统一校验，通过校验后才可以进行提交。

安装依赖

pnpm install -D lint-staged

配置指令

// package.json
{
  "script":{
    "lint:lint-staged": "lint-staged",
  }
}

配置一个在pre-commit阶段运行的钩子

npx husky add .husky/pre-commit "npm run lint:lint-staged"

# 配置 commit-msg 钩子 运行 commitlint
# --no-install 代表强制使用本地模块
npx husky add .husky/commit-msg "npx --no-install commitlint --edit $1"

在package.json中配置：

/*
配置的含义：
<文件>: <对应文件需要执行的命令数组>
*/
"lint-staged": {
  "*.{js,jsx,ts,tsx}": [
    "eslint --fix",
    "prettier --write"
  ],
  "{!(package)*.json,*.code-snippets,.!(browserslist)*rc}": [
    "prettier --write--parser json"
  ],
  "package.json": [
    "prettier --write"
  ],
  "*.vue": [
    "eslint --fix",
    "prettier --write",
    "stylelint --fix"
  ],
  "*.{scss,less,styl,html}": [
    "stylelint --fix",
    "prettier --write"
  ],
  "*.md": [
    "prettier --write"
  ]
}

如此，在日常提交代码，git commit -m "xxx"时，lint-staged会自动帮我们进行代码质量与风格的修复。

CommitLint

日常开发中，我们需要对每一次的提交内容进行说明，当前提交的代码功能。

Commit message 格式:

<type>(<scope>): <subject>
// 注意冒号 : 后有空格

scope选填表示commit的作用范围，如数据层、视图层，也可以是目录名称 subject必填用于对commit进行简短的描述 type必填表示提交类型，值有以下几种：

feat - 新功能 feature
fix - 修复 bug
docs - 文档注释
style - 代码格式(不影响代码运行的变动)
refactor - 重构、优化(既不增加新功能，也不是修复bug)
perf - 性能优化
test - 增加测试
chore - 构建过程或辅助工具的变动
revert - 回退
build - 打包

以vuejs为例：

commitLint就是一个强制性的规范工具。

安装依赖

#开发依赖
pnpm install -D @commitlint/cli  @commitlint/config-conventional

@commitlint/config-conventional：commitlint自定义配置规则插件

配置文件

在根目录下创建文件***.commitlintrc.js***

module.exports = {
	ignores: [(commit) => commit.includes('init')],
	extends: ['@commitlint/config-conventional'],
	rules: {
		// 信息以空格开头
		'body-leading-blank': [2, 'always'],
		'footer-leading-blank': [2, 'always'],
		// 信息最大长度
		'header-max-length': [2, 'always', 100],
		// 信息不能未空
		'subject-empty': [2, 'never'],
		// 信息类型不能未空
		'type-empty': [2, 'never'],
		// 提交信息的类型
		'type-enum': [
			2,
			'always',
			[
				'feat',
				'fix',
				'perf',
				'style',
				'docs',
				'test',
				'refactor',
				'build',
				'ci',
				'chore',
				'revert',
				'wip',
				'workflow',
				'types',
				'release',
				'temp'
			]
		]
	}
};

至此，所有的规范类第三方库配置全部完成。下一章：axios封装。