Git Commit 提交规范指南 - Web前端开发者必备

作为前端开发者，良好的Git提交习惯不仅能提高团队协作效率，还能让你的项目历史更加清晰可读。本文将介绍一套适合前端开发的Git Commit规范。

一. 为什么需要Commit规范?

• 提高可读性: 清晰的提交信息让团队成员快速理解每次变更
• 方便追踪: 规范的格式便于查找特定功能的修改历史 
• 自动化生成CHANGELOG: 规范的提交信息可以自动生成更新日志 
• 更好的版本管理: 语义化的提交有助于确定版本号变更 

二. 前端Commit 规范推荐

1.推荐使用约定式提交规范:  

<类型>[可选的作用域]:<描述>

[可选的正文]

[可选的脚注]

2.常用类型(Type)

针对前端开发,推荐以下类型

• feat: 新增功能 
• fix: 修复bug 
• docs:  文档更新
• style: 代码格式调整(不影响代码运行的变动)
• refactor: 代码重构(既不新增功能,也不修复bug)
• perf: 性能优化
• test: 测试相关 
• build: 构建系统或外部依赖变更 (如Webpack配置)
• ci: CI/CD配置变更
• chore: 其他不修改sec或测试文件的更改 

3.作用域(Scope)

可选部分,用于说明commit影响的范围,前端常用作用域:  

• component: 特定组件 
• page: 页面级修改
• router: 路由相关
• store: 状态管理(Vuex/Pinia/Redux等)
• api: 接口相关
• config: 配置修改
• assets: 静态资源 
• styles: 样式文件 
• utils: 工具函数
• deps: 依赖更新

4.描述(Description)

简明扼要地描述本次提交

"fix: 修复登录按钮点击无效的问题"

5.正文 (Body)

可选部分,用于详细说明变更内容:  

• 说明变更的动机
• 与之前行为的对比
• 使用"#"引用issue 

6.脚注(Footer)

可选部分,  用于: 

• 关闭issue: Closes #123
• 重大变更: BREAKING CHANGE: 彻底重构用于认证系统 

三. 示例 

1. 基础示例(仅类型和描述)

git commit -m "feat: 实现用户登录功能

最简单的格式,适用于小型修改或简单的功能添加  

2.带作用域Scope的示例

git commit -m 'feat(login):添加JWT认证支持'

说明:  

• feat : 表示新增功能
• login: 作用域,表示影响的是登录模块
• 添加JWT认证支持: 描述变更内容

3.带正文(Body)的示例 

git commit -m "fix(auth): 修复Tokne过期后未自动刷新的问题

- 检查localStoreage中的refreshToken 

- 调用`.refresh-token`接口获取新Token 

- 更新Redux store中的用户状态   " 

说明:  

• fix: 表示修复问题
• (auth): 作用域,设计认证模块  
• 正文部分详细说明如何修复该问题 

4.带脚注footer的示例 

git commit -m "feat(api): 新增用户列表分页查询接口
 

BREAKING CHANGE: 移除旧的`/users/all`接口,改用`/users?page=1&limit=10`

Closes #123

"

说明:  

• BREAKING CHANGE: 表示不兼容的变更(如API变动,重大重构)
• Closes #123: 关联GitHub/GitLab lssue,提交后会自动关闭该lssue 

5.复杂示例(类型+作用域+描述+正文+脚注)

git commit -m "refactor(store): 使用Pinia替换Vuex管理用户状态

- 删除`src/store/user.js`（Vuex模块）
- 新增`src/stores/userStore.js`（Pinia版本）
- 更新所有组件引用方式

BREAKING CHANGE: 需要安装`pinia`并更新`main.js`配置
Related to #456
"

 说明:  

• refactor:表示代码重构
• store: 作用域,设计状态管理
• 正文详细说明具体改动
• BREAKING CHANGE: 提醒团队这是不兼容的变更 
• Related to #456: 关联相关lssue(但不自动关闭)

3.1 前端常见场景示例

1. 新增组件

git commit -m "feat(component): 新增UserCard用户卡片组件

- 支持头像、用户名、简介展示
- 添加hover动画效果
- 提供`size`属性（sm/md/lg）
"

2.修复Bug  

git commit -m "fix(router): 修复路由守卫未正确处理403状态的问题

- 在`permission.js`中捕获API 403错误
- 重定向到`/forbidden`页面
Closes #89
"

3.样式调整 

git commit -m "style(login): 优化登录页移动端适配

- 调整表单元素间距
- 修复iPhone键盘弹起布局错乱
- 优化按钮点击反馈
"

4.依赖更新 

git commit -m "chore(deps): 升级Vue至3.3.0

- 更新`package.json`
- 修复Composition API类型警告
"

四.总结 

部分	说明	示例
类型	提交的类别（feat/fix/docs等）	feat、fix
作用域	影响的范围（可选）	(login)、(component)
描述	简明扼要的说明	实现用户登录功能
正文	详细说明（可选）	用-列出关键改动
脚注	关联Issue或重大变更（可选）	Closes #123、BREAKING CHANGE

这样的提交信息: 

1. 清晰可读,团队协作更搞笑
2. 便于检索, git log -- grep="feat(login)"可快速找到登录相关功能