打造完美 Git 工作流

在团队协作（甚至个人项目）中，你是否见过这种令人抓狂的 Git 提交记录：


> fix bug
> update
> final fix
> please work

update

final fix

please work

混乱的提交历史不仅让代码回溯变得困难，也显得不够专业。今天，我们将通过 VS Code 结合 Husky 和一系列美化工具，打造一套既自动化又高颜值的 Git 提交工作流。

一、安装和配置

很多开发者认为 Husky（Git Hooks 工具）只能在命令行工作，其实不然。VS Code 的 Git 面板在执行操作时，底层调用的依然是 git 命令，因此 Husky 默认就能与 VS Code 无缝配合。

1. 快速初始化 Husky

在你的前端项目根目录下，运行以下命令“一键”完成配置：

Bash


npx husky-init && npm install

这会自动做三件事：

安装 husky 依赖。

在 package.json 中添加 prepare 脚本。

2. VS Code 中的实际体验

配置完成后，当你在 VS Code 侧边栏点击“提交（Commit）”按钮时：

VS Code 会在后台触发 git commit。

Husky 会被自动唤醒，执行你定义的钩子（如 pre-commit 进行代码检查）。

状态反馈：

成功：进度条跑完，代码顺利提交。
失败：VS Code 会弹出错误提示（如 ESLint 报错），并阻止提交。你可以点击 "Open Git Log" 查看具体原因。

📝 避坑指南：VS Code 报错 "Command not found"？

如果你在命令行能提交，但在 VS Code 里 Husky 报错（找不到 node 或 npm），通常是因为 VS Code 没有加载到你的环境变量（特别是 Mac/Linux 使用 NVM 的用户）。

解决方案：

在用户根目录创建 ~/.huskyrc 文件，加载你的环境变量：

Bash


# ~/.huskyrcexport NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"

二、美化提交

解决了自动化问题，接下来我们解决“写什么”的问题。为了避免 fix bug 这种无意义的描述，我们需要规范化和可视化。

方案 A：规范化神器 (Conventional Commits)

推荐插件：vivaxy.vscode-conventional-commits

这是目前 VS Code 最流行的规范化插件。它通过交互式菜单，强制你遵循 Type(Scope): Subject 的标准格式。

使用步骤：

安装插件：在市场搜索 Conventional Commits 并安装。

操作：在 Git 面板暂存代码后，点击右上角的 圆圈图标（或 Cmd+Shift+P 搜索 Conventional Commits）。

选择：

feat: 新功能
fix: 修补 Bug
docs: 文档修改
...依次填写 Scope 和描述。

结果：生成如 feat(user): add login page 的标准记录。

💡 进阶配置：
在 settings.json 中配置 "conventionalCommits.gitApproveSlot": "none"，这样插件只会把生成的文字填入输入框，让你有机会二次确认，而不是直接提交。

方案 B：可视化大师 (Gitmoji)

推荐插件：Gitmoji

如果觉得文字太枯燥，可以用 Emoji 来分类。

使用步骤：

安装插件：搜索 Gitmoji。

操作：点击 Git 输入框上方的 笑脸图标。

选择：

✨ :sparkles: (新功能)
🐛 :bug: (修Bug)
💄 :lipstick: (样式修改)

结果：提交记录变为 ✨ add login page，在 GitHub/GitLab 上视觉效果极佳。

三、规范检验

插件只能“辅助”输入，不能防止队友手动输入乱码。为了强制执行规范，我们需要 Husky 配合 Commitlint。

1. 安装与配置

Bash


# 安装校验工具和规范集
npm install --save-dev @commitlint/config-conventional @commitlint/cli

# 创建配置文件 commitlint.config.jsecho "module.exports = { extends: ['@commitlint/config-conventional'] };" > commitlint.config.js

2. 添加 Husky Hook

添加一个 commit-msg 钩子，用来在提交前检查文本格式：

Bash


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

效果：此时，如果你在 VS Code 输入框里只写了 "test"，Husky 会直接报错并拒绝提交，迫使你写出规范的 test: add unit test。

四、提升Eslint性能

如果你的项目很大，每次提交都全量检查 ESLint 会非常慢。我们只需检查本次修改过的文件。

安装：npm install -D lint-staged

配置：在 package.json 添加：

JSON


"lint-staged": {
  "*.{js,ts,vue}": [
    "eslint --fix",
    "prettier --write"
  ]
}

更新 Husky：

修改 .husky/pre-commit 文件，将命令改为 npx lint-staged。

总结：你的新工作流

配置完以上所有步骤后，你日常的开发体验将发生质的飞跃：

写代码 -> 保存。

VS Code 侧边栏 -> 暂存更改。

点击 Conventional Commits 图标 -> 傻瓜式选择类型和描述。

生成 -> 格式化的文字自动填入输入框（如 feat: add new button）。

点击提交 -> Husky 自动触发：

lint-staged 仅检查修改过的文件（速度快）。
commitlint 确保你没乱写。

完成 -> 你的代码库拥有了一份赏心悦目、易于维护的提交历史。