husky
Husky 是一个用于管理 Git 钩子的工具。它可以帮助你在特定的 Git 操作（如提交、推送等）之前或之后自动运行脚本，从而确保代码质量和一致性
安装
pnpm i husky -D
在package.json添加脚本命令
"scripts": {
// ...
"prepare": "husky install"
},
生成 husky
pnpm exec husky init
更新修改 pre-commit 文件
pnpm run lint:fix
这行命令会在我们往本地的暂存库里面提交之前先运行一遍 lint:fix 命令,帮我们检查是否有代码或是语法错误
执行git提交命令
git add .
git commit -m 'feat: init'
Commitlint
Commitlint 是一个用于检查 Git 提交信息的工具。@commitlint/cli 是其命令行接口，允许你在命令行中运行 Commitlint。
@commitlint/config-conventional（19.6.0）：
这是 Commitlint 的一个配置包，提供了一组基于 Angular 提交信息规范的规则。
cz-git（1.11.0）：
cz-git 是一个交互式的提交信息生成工具，基于 Commitizen 适配器。它提供了一个命令行界面，帮助开发者按照预定义的格式生成提交信息。
czg（1.11.0）：
czg 是 cz-git 的一个命令行工具，提供了更友好的用户界面和功能，帮助开发者生成符合规范的提交信息。
安装依赖
pnpm add @commitlint/cli @commitlint/config-conventional cz-git czg -D
在package.json文件中添加命令
"commitizen": {
"path": "node_modules/cz-git"
},
在项目根目录添加commitlint.config.js文件,覆盖默认的提交格式
/** @type {import('cz-git').UserConfig} */
export default {
ignores: [(commit) => commit.includes("init")],
extends: ["@commitlint/config-conventional"],
rules: {
"body-leading-blank": [2, "always"],
"footer-leading-blank": [1, "always"],
"header-max-length": [2, "always", 108],
"subject-empty": [2, "never"],
"type-empty": [2, "never"],
"subject-case": [0],
"type-enum": [
2,
"always",
[
"feat",
"fix",
"docs",
"style",
"refactor",
"perf",
"test",
"build",
"ci",
"chore",
"revert",
"wip",
"workflow",
"types",
"release",
],
],
},
prompt: {
messages: {
type: "选择你要提交的类型 :",
scope: "选择一个提交范围[可选]:",
customScope: "请输入自定义的提交范围 :",
subject: "请简要描述提交 :\n",
body: '填写更加详细的变更描述[可选]。使用 "|" 换行 :\n',
breaking: '列举非兼容性重大的变更[可选]。使用 "|" 换行 :\n',
footerPrefixsSelect: "选择关联issue前缀[可选]:",
customFooterPrefixs: "输入自定义issue前缀 :",
footer: "列举关联issue [可选] 例如: #31, #I3244 :\n",
confirmCommit: "是否提交或修改commit ?",
},
types: [
{ value: "feat", name: "feat: 🎉 新增功能", emoji: "🎉" },
{ value: "fix", name: "fix: 🐛 修复缺陷", emoji: "🐛" },
{ value: "docs", name: "docs: 📝 文档变更", emoji: "📝" },
{
value: "style",
name: "style: 🎨 代码格式",
emoji: "🎨",
},
{
value: "refactor",
name: "refactor: 🔨 代码重构",
emoji: "🔨",
},
{ value: "perf", name: "perf: ⚡️ 性能优化", emoji: "⚡️" },
{
value: "test",
name: "test: ✅ 测试",
emoji: "✅",
},
{
value: "build",
name: "build: 📦️ 打包构建",
emoji: "📦️",
},
{ value: "ci", name: "ci: 👷 CI 配置变更", emoji: "👷" },
{ value: "revert", name: "revert: ⏪️ 代码回退", emoji: "⏪️" },
{
value: "chore",
name: "chore: 🚀 构建/工程依赖/工具",
emoji: "🚀",
},
{ value: "wip", name: "wip: 🚧 正在开发中", emoji: "🚧" },
{ value: "workflow", name: "workflow: 🎯 工作流程改进", emoji: "🎯" },
],
useEmoji: true,
scopes: [],
customScopesAlign: "bottom",
emptyScopesAlias: "empty",
customScopesAlias: "custom",
allowBreakingChanges: ["feat", "fix"],
skipQuestions: ["scope", "body", "breaking", "footerPrefix", "footer"], // 自定义选择指定的问题不显示
},
};
在package.json中添加命令
"scripts": {
"commit": "czg"
},
在.husky中新增 commit-msg文件
写入
npx --no -- commitlint --edit $1
以后每次提交代码执行
pnpm commit
lint-staged
lint-staged是一个工具，用于在Git暂存文件上运行linters（代码检查工具）
它的主要作用是提高代码质量和开发效率
安装依赖
pnpm i lint-staged -D
修改pre-commit文件
npx lint-staged
在package.json文件中添加命令
"lint-staged": {
"*.{js,vue}": "eslint --fix"
},
这样我们的husky和commit的工具就全部配置好了
以后提交代码首先运行 git add .,把代码全部提交到本地的暂存区
然后运行 pnpm commit 执行提交
首先会触发我们的一个cz-git的一个交互式的命令行工具,依据提示选择对应的提交类型,最后会生成一条提交信息,比如 feat:用户注册功能
然后交由 git 来执行提交的命令,由于我们配置了 husky 会在我们提交信息之前执行 pre-commit钩子
我们的 pre-commit文件里面会有 npx lint-staged
我们的 lint-staged 命令会执行 eslint 检查是否会有代码或是语法错误,如果有错误就会阻止提交,如果没有错误就会提交成功!
