【Git/GitHub/VSCode】Git提交时使用EMOJI表情、在VS Code中使用emoji commit

编程环境和项目工具 专栏收录该内容
41 篇文章 2 订阅

这篇文章属于本人参考诸多博客、教程、文档等资料,所撰写的「玩转Git/GitHub」系列文章之一,将随着时间不断修改完善,目的在于为读者提供有关Git/GitHub使用的大部分参考信息。由于内容随时可能发生更新变动,欢迎关注和收藏玩转Git/GitHub系列文章目录以作备忘。


1. 为什么要使用emoji

不经意发现大佬的GitHub上,Git的提交信息竟然有emoji前缀,相当鹤立鸡群、别具一格,感觉挺有趣的,就想着自己也使用一番。个人认为这样做有三点好处,后两点尤为重要:

  • emoji比较呆萌,能美化提交记录和GitHub页面;
  • emoji作为标签,能很好的对提交记录分门别类,方便整理;
  • emoji蕴含的丰富语义和情绪,能提高提交信息的可读性、可理解性,增强提交历史的阅读体验

一个示例如下所示,提交新内容,更新属性、贡献者、证明,消除Bug等等,各有各的emoji:
在这里插入图片描述

2. emoji来源、用法和个人统一规范

这些emoji来自哪里?有什么统一规范来避免误解吗?有的,像https://gitmoji.dev/上就整理了一套emoji及其用法(如想下载,可见这篇文章),https://www.webfx.com/tools/emoji-cheat-sheet/上的表情更多。用法也很简单,在 git commit 时如下书写提交信息,用 :smile: 来插入一个笑脸emoji:

$ git commit -m ":smile:表示一个笑脸"

除了在Git提交时使用,我们还可以README.md 和GitHub Wiki中直接使用emoji。这里整理和列出要使用的emoji,日后会慢慢增加或修改:


# ====常用颜文字====
# 🎉 :tada: Begin a project.                                开始一个项目
# 🚧 :construction: Work in progress.                       工作进行中
# ✨ :sparkles: Introduce new features.                     添加新功能
# 📝 :memo: Add or update documentation.                    增加或更新文档
# 🔧 :wrench: Add or update configuration files.            增加/更新配置文件
# 💄 :lipstick: Add or update the UI and style files.       增加/更新UI和样式文件
# 💡 :bulb: Add or update comments in source code.          增加/更新源代码中的注释
# 🚚 :truck: Move or rename resources (e.g.: files, paths, routes). 移动/重命名文件/路径
# 🔥 :fire: Remove code or files.                           移除代码/文件
# 🐛 :bug: Fix a bug.                                       修复bug
# 🚑️ :ambulance: Critical hotfix.                           紧急修复
# ⏪️ :rewind: Revert changes.                               回退
# ✏️ :pencil2: Fix typos.                                   修改错别字
# 🔀 :twisted_rightwards_arrows: Merge branches.            合并分支
# ⚡️ :zap: Improve performance.                             性能优化
# 🎨 :art: Improve structure / format of the code.          改进代码结构或格式
# ✅ :white_check_mark: Add, update, or pass tests.         增加/更新测试用例
# 📦️ :package: Add or update compiled files or packages.    增加/更新编译后文件/包
# 🙈 :see_no_evil: Add or update a .gitignore file.         增加/更新.gitignore文件
# 📄 :page_facing_up: Add or update license.                增加/更新LICENSE
# 🔊 :loud_sound: Add or update logs.                       增加/更新日志
# 🔇 :mute: Remove logs.                                    移除日志
# 👥 :busts_in_silhouette: Add or update contributor(s).    增加/更新贡献者
# ♻️ :recycle: Refactor code.                               重构代码
# 📈 :chart_with_upwards_trend: Add or update analytics or track code. 增加/更新分析/跟踪代码
# 🚸 :children_crossing: Improve user experience / usability. 增强用户体验/可用性
# 🛂 :passport_control: Work on code related to authorization, roles and permissions. 处理与授权、身份和权限相关的代码

# ====附加颜文字====
# ➕ :heavy_plus_sign: Add a dependency.                            增加一个依赖
# ➖ :heavy_minus_sign: Remove a dependency.                        移除一个依赖
# ⬇️ :arrow_down: Downgrade dependencies.                           降级依赖
# ⬆️ :arrow_up: Upgrade dependencies.                               升级依赖
# 📌 :pushpin: Pin dependencies to specific versions.               固定依赖到特定版本
# 🚀 :rocket: Deploy stuff.                                         部署功能
# 👽️ :alien: Update code due to external API changes.               由于外部API更改而更新代码
# 🔖 :bookmark: Release / Version tags.                             发布/版本标签
# 🔍️ :mag: Improve SEO.                                             提高SEO
# 🥅 :goal_net: Catch errors.                                       捕捉错误
# 🔒️ :lock: Fix security issues.                                    修复安全问题
# 🗑️ :wastebasket: Deprecate code that needs to be cleaned up.      废弃代码,需要清理
# ⚰️ :coffin: Remove dead code.                                     移除无用代码
# 🧪 :test_tube: Add a failing test.                                增加一个失败的测试
# 🏷️ :label: Add or update types.                                   增加/更新类型
# 💫 :dizzy: Add or update animations and transitions.              增加/更新动画和过渡
# 🚩 :triangular_flag_on_post: Add, update, or remove feature flags.增加/更新/移除功能标识
# 🔨 :hammer: Add or update development scripts.                    增加/更新开发脚本
# 👔 :necktie: Add or update business logic                         增加/更新业务逻辑
# 🍱 :bento: Add or update assets.                                  增加/更新assets
# 🌱 :seedling: Add or update seed files.                           增加/更新种子文件
# 📸 :camera_flash: Add or update snapshots.                        增加/更新快照
# 👷 :construction_worker: Add or update CI build system.           增加/更新CI构建系统
# 💚 :green_heart: Fix CI Build.                                    修复CI构建系统
# 💩 :poop: Write bad code that needs to be improved.               代码很烂需要改进
# 🚨 :rotating_light: Fix compiler / linter warnings.               修复compiler/linter的警告
# ♿️ :wheelchair: Improve accessibility.                            改善可访问性
# ⚗️ :alembic: Perform experiments.                                 进行实验
# 💥 :boom: Introduce breaking changes.                             引入破坏性改变
# 🗃️ :card_file_box: Perform database related changes.              执行数据库相关的改变
# 🏗️ :building_construction: Make architectural changes.            执行架构层次的改变
# 🩹 :adhesive_bandage: Simple fix for a non-critical issue.        非关键问题的简单修复
# 🧐 :monocle_face: Data exploration/inspection.                    数据探查/检查

# ====其他颜文字====
# 🌐 :globe_with_meridians: Internationalization and localization.  国际化与本地化
# 🍻 :beers: Write code drunkenly.                                  醉酒写码
# 💬 :speech_balloon: Add or update text and literals.              增加/更新文本和文字
# 📱 :iphone: Work on responsive design.                             致力于响应式设计
# 🥚 :egg: Add or update an easter egg.                             增加/更新复活节蛋
# 🤡 :clown_face: Mock things.                                      

3. VS Code中提交时使用emoji

这么多emoji,死记硬背不太科学,而且在Git Bash中使用起来也不是很方便……还是配置一下VS Code吧。经过反复比对,我找到了下面这个插件,能够在VS Code内嵌的Git支持中(即点击源代码管理图标后的左侧界面)添加一个花朵按钮,输入相应字符串并点击花朵按钮就会附加emoji(或者通过 Ctrl+Shift+I 快捷键来使用它):
在这里插入图片描述
请添加图片描述
具体用法见其中文文档页面。我的配置如下:

{
    "individualEmoji.specified.enable": true,
    "individualEmoji.specified.typeConfig": [
        ["begin", ["🎉"]], //:tada: Begin a project. 开始一个项目
        ["work", ["🚧"]],  //:construction: Work in progress. 工作进行中
        ["feat", ["✨"]],  //:sparkles: Introduce new features. 添加新功能
        ["docs", ["📝"]],  //:memo: Add or update documentation. 增加或更新文档
        ["config", ["🔧"]], //:wrench: Add or update configuration files.
        ["comment", ["💡"]], //:bulb: Add or update comments in source code. 增加/更新源代码中的注释
        ["rename", ["🚚"]], //:truck: Move or rename resources (e.g.: files, paths, routes). 移动/重命名文件/路径
        ["chore", ["🔥"]],  //:fire: Remove code or files.
        ["fix", ["🐛"]],   //:bug: Fix a bug. 修复bug
        ["revert", ["⏪️"]], //:rewind: Revert changes. 回退
        ["typos", ["✏️"]], //:pencil2: Fix typos. 修改错别字
        ["merge", ["🔀"]], //:twisted_rightwards_arrows: Merge branches. 合并分支
        ["pref", ["⚡️"]],  //:zap: Improve performance. 性能优化
        ["style", ["🎨"]], //:art: Improve structure / format of the code. 改进代码结构或格式
        ["test", ["✅"]], //:white_check_mark: Add, update, or pass tests.         增加/更新测试用例
        ["package", ["📦️"]], //:package: Add or update compiled files or packages.    增加/更新编译后文件/包
        ["log", ["🔊"]], //:loud_sound: Add or update logs. 增加/更新日志
        ["contributor", ["👥"]], //:busts_in_silhouette: Add or update contributor(s). 增加/更新贡献者
        ["refactor", ["♻️"]], //:recycle: Refactor code. 重构代码
        ["build", ["🚀"]], //:rocket: Deploy stuff. 构建和部署功能
        ["release", ["🔖"]], //:bookmark: Release / Version tags. 发行版本标签
    ],
    "individualEmoji.pos": "start",
}

这个插件支持自定义emoji和对应的字符串,只是emoji的位置太死板,只能出现在下面两个位置:

# start
feat(scope): some text => feat(scope) 🌈: some text

# end![请添加图片描述](https://img-blog.csdnimg.cn/d70dfc19075a4e018904b002dab6b57c.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L215UmVhbGl6YXRpb24=,size_16,color_FFFFFF,t_70)

feat: some text => feat: some text 🌈

我不太喜欢这两个位置,还是认为把emoji图标统一放到提交信息第一列是最好的、最有辨识度的。为此安装了下面这个插件:
在这里插入图片描述
它的用法如图,虽然要点击按钮,而且也不能自定义……嘛,暂且忍一下吧:
请添加图片描述

  • 1
    点赞
  • 0
    评论
  • 2
    收藏
  • 打赏
    打赏
  • 扫一扫,分享海报

参与评论 您还未登录,请先 登录 后发表或查看评论
©️2022 CSDN 皮肤主题:数字20 设计师:CSDN官方博客 返回首页

打赏作者

memcpy0

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值