vue项目配置git提交规范husky、lint-staged、@commitlint/cli

一、背景介绍

项目中代码格式以及git message如果不加以约束，可能最终的格式会五花八门，这样很不利于我们的项目合作。所以我们需要使用工具来约束提交代码和信息的格式。

二、husky、lint-staged、@commitlint/cli

2.1. husky

Husky 是一个 Git Hook 工具，可以帮助我们在 Git 事件发生时自动运行脚本。Git Hook 是一种机制，它允许在 Git 执行操作时自动运行特定脚本，以执行自定义操作。
使用 Husky，可以轻松地添加 Git Hooks，并在特定的 Git 事件（如提交代码）发生时执行自定义的脚本。例如，在提交代码之前自动运行代码格式化脚本或运行代码静态分析工具等。
Husky 支持多种 Git Hooks，包括 pre-commit、pre-push 等，并可以配置多个钩子，以便在多个 Git 事件发生时执行自定义脚本。

2.2. lint-staged

lint-staged 是一个工具，可以在 Git 暂存区的文件上运行指定的 lint 工具，以便于仅在需要时执行 lint 检查。它通常与 Husky 配合使用，以在提交代码前运行 lint-staged。使用 lint-staged 可以大大提高 lint 检查的效率，因为只需要针对本次提交的文件执行 lint 检查，而不是所有的文件。
lint-staged 支持多种 lint 工具，例如 ESLint、Prettier、Stylelint 等，并可以配置多个 lint 工具。它还支持使用 glob 模式来选择要运行 lint 工具的文件。

2.3. @commitlint/cli

@commitlint/cli 是一个命令行工具，用于校验 Git 提交信息是否符合规范。它通常与 Husky 和 lint-staged 配合使用，以在提交代码前对提交信息进行校验，从而确保提交信息的格式和内容符合项目规范和约定。
@commitlint/cli 遵循 Conventional Commits 规范，可以自定义配置校验规则。它支持多种校验规则，例如校验提交信息的类型、描述和主体等，并可以在不同的提交阶段执行不同的校验规则。例如，在提交代码前只检查代码格式和 lint 检查，而在合并代码时进行更全面的提交信息校验。

三. 具体使用

3.1. 安装依赖

Vue2老项目指定一下版本号

npm i husky@8 -D
npm i lint-staged -D
npm i @commitlint/cli @commitlint/config-conventional -D

3.2. 运行初始化脚本

// 生成 .husky 的文件夹
npx husky install

// 添加 hooks，会在 .husky 目录下生成一个 pre-commit 脚本文件
npx husky add .husky/pre-commit "npx lint-staged"

// 添加 commit-msg
npx husky add .husky/commit-msg 'npx --no -- commitlint --edit ${1}'

3.3. 生成的文件 pre-commit如果没有生成新建一下

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

npx lint-staged

3.4. 生成的文件 commit-msg如果没有生成新建一下

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

npx --no -- commitlint --edit ${1}

3.5. 在package.json中配置lint-staged

lint-staged": {
    "*.{js,jsx,vue,ts,tsx}": [
      "eslint --fix",
      "prettier --write"
    ],
    "*.{scss,less,css,html,md}": [
      "prettier --write"
    ],
    "package.json": [
      "prettier --write"
    ],
    "{!(package)*.json,.!(browserslist)*rc}": [
      "prettier --write--parser json"
    ]
},

3.6. 根目录新增 commitlint.config.js

module.exports = {
	extends: ['@commitlint/config-conventional'],
	rules: {
		'type-enum': [
			2,
			'always',
			[
				// 编译相关的修改，例如发布版本，对项目构建或者依赖的改动
				'build',
				// 新功能(feature)
				'feat',
				// 修复bug
				'fix',
				// 更新某功能
				'update',
				// 重构
				'refactor',
				// 文档
				'docs',
				// 构建过程或者辅助工具的变动,如增加依赖库等
				'chore',
				// 不影响代码运行的变动
				'style',
				// 撤销commit,回滚到上一个版本
				'revert',
				// 性能优化
				'perf',
				// 测试(单元,集成测试)
				'test',
			],
		],
		'type-case': [0],
		'type-empty': [0],
		'scope-empty': [0],
		'scope-case': [0],
		'subject-full-stop': [0, 'never'],
		'subject-case': [0, 'never'],
		'header-max-length': [0, 'always', 74],
	},
};

3.7. 提交格式：

git commit -m <type>[optional scope]: <description> // 注意冒号后面有空格
- type：提交的类型（如新增、修改、更新等）
- optional scope：涉及的模块，可选
- description：任务描述

3.8. type 类型

类别	含义
feat	新功能
fix	修复 bug
style	样式修改（UI校验）
docs	文档更新
refactor	重构代码(既没有新增功能，也没有修复 bug)
perf	优化相关，比如提升性能、体验
test	增加测试，包括单元测试、集成测试等
build	构建系统或外部依赖项的更改
ci	自动化流程配置或脚本修改
revert	回退某个 commit 提交

3.9. 示范（非规范提交，将提交失败）

git commit -m 'feat: 增加 xxx 功能'
git commit -m 'bug: 修复 xxx 功能'

4. vscode 保存自动格式化

在 .vscode 目录下新建 settings.json

{
  "editor.codeActionsOnSave": {
    "source.fixAll": true
  }
}