VSCode内置Git支持需配合shell脚本、git hooks和tasks.json实现自动化工作流:用husky配置pre-commit执行ESLint/Jest;Conventional Commits插件+settings.json实现提交格式标准化;tasks.json绑定git pull --rebase与依赖安装;post-merge慎用git clean,仅清理.gitignore中路径;注意换行符与跨平台兼容性。

VSCode 内置 Git 支持足够日常使用,但“自动化工作流”不能只靠它点点点——必须补上 shell 脚本、git hooks 和 tasks.json 的组合拳,否则每次 commit / push 都手动 lint、test、changelog 更新,迟早漏掉一步。
用 pre-commit hook 自动跑 ESLint 和 Jest
VSCode 不会自动触发校验,光靠保存时格式化(editor.formatOnSave)拦不住语法错误或未覆盖的测试。真正起作用的是 Git 自己的钩子。
- 在项目根目录运行
npm install husky --save-dev(v8+),然后执行npx husky init初始化.husky/目录 - 编辑
.husky/pre-commit,写入:#!/usr/bin/env sh npx eslint . --ext .js,.ts --fix npx jest --bail --coverage=false
- 注意:不要在 hook 里调用
npm run test,除非你确认该 script 没有额外副作用(比如启动 dev server);直接调用jest更可控 - 如果本地没装
eslint或jest全局命令,必须用npx,否则 hook 在 CI 或他人机器上会静默失败
让 VSCode 的 git.commitMessage 自动填充 Conventional Commits 格式
人工写 feat(api): add timeout option 容易拼错类型或漏冒号,VSCode 本身不提供模板,得靠扩展 + 配置双驱动。
使用约定式提交(Conventional Commits)从 Git 历史记录中生成结构化变更日志,支持多种格式、AI 增强型描述以及可自定义的范围……
- 安装插件
Conventional Commits(作者:vivaxy),它会在提交面板顶部加一个下拉菜单,选类型+范围后自动生成前缀 - 同时在
.vscode/settings.json中加:"git.enableSmartCommit": true, "git.postCommitCommand": "none", "conventionalCommits.types": ["feat", "fix", "docs", "style", "refactor", "test", "chore"]
- 关键点:VSCode 的
git.customEditMessage不生效于 GUI 提交面板,所以不能靠它;必须依赖插件注入的 UI 控件 - 如果团队用
commitlint,记得同步配置.commitlintrc.cjs,否则 hook 会拒绝合法但格式松散的提交
用 tasks.json 把 git pull --rebase + npm install 绑定到快捷键
每天上班第一件事不是开浏览器,而是同步主干并确保依赖最新——但这手动敲三行命令太碎,容易忘 --rebase 导致 merge commit 泛滥。
- 在项目
.vscode/tasks.json中添加:{ "version": "2.0.0", "tasks": [ { "label": "sync-main", "type": "shell", "command": "git pull --rebase origin main && npm install", "group": "build", "presentation": { "echo": true, "reveal": "always", "focus": false } } ] } - 然后按
Ctrl+Shift+P→Tasks: Run Task→ 选sync-main,或绑定快捷键到workbench.action.terminal.runActiveFile(需配合终端聚焦逻辑) - 别用
git pull简写,默认是--merge,一旦本地有未提交变更,就会生成无意义 merge commit,污染历史 - 如果项目用 pnpm/yarn,把
npm install换成对应命令,并确认shell环境能识别(比如 Windows 用户可能需要设"windows": { "command": "pnpm install" })
post-merge hook 里慎用 git clean -fd
有人想“自动清理构建产物”,于是往 .git/hooks/post-merge 塞 git clean -fd,结果下次切分支时发现 dist/ 没了,但 node_modules 还在——这破坏了 node_modules 的完整性,且 VSCode 的 TypeScript Server 会报错找不到类型。
- 真正安全的做法是只清明确可再生的目录,比如:
git clean -fdX dist/ .next/ .nuxt/ build/(-X表示只清.gitignore里的) - 永远不要在 hook 里执行
rm -rf node_modules或npm ci——CI 才该做这个,本地开发应保持模块稳定 - 如果用了 Vite/Nuxt 等有缓存目录(
node_modules/.vite/),建议单独加一行rm -rf node_modules/.vite,比全量 clean 更精准 - hook 文件必须是 Unix 换行符(LF),Windows 上用 VSCode 编辑时右下角检查是否显示
CRLF,点了就换掉,否则bash: ./post-merge: No such file or directory
自动化不是消灭所有手动操作,而是把重复、易错、有固定顺序的动作锁死在脚本里;Git hook 的权限边界、VSCode task 的执行上下文、以及不同系统对 shell 命令的兼容性,才是实际落地时最常卡住的地方。

















