Coder Social home page Coder Social logo

ahmadawais / emoji-log-vscode Goto Github PK

View Code? Open in Web Editor NEW
53.0 2.0 9.0 1.6 MB

Emoji-Log VSCode Extension โ€” An Emoji Git commit log messages spec standard. [ ๐Ÿ“ฆ๐Ÿ‘Œ๐Ÿ›๐Ÿ“–๐Ÿš€๐Ÿค– โ€ผ๏ธ]

Home Page: https://marketplace.visualstudio.com/items?itemName=ahmadawais.emoji-log-vscode

License: MIT License

TypeScript 100.00%
emoji emojis vscode vscode-extension

emoji-log-vscode's Introduction

EMOJI-LOG-VSCode

Learn VSCode

After building hundreds of open source software I've ended up inventing a git commit log standard called EMOJI-LOG that helps me understand a project's history with a less cognitive load just by looking at the git log.

USAGE

  1. Open the command palette (macOS: โŒ˜ + โ‡ง + P | Win/Linux: โŒƒ + โ‡ง + P)
  2. Search and select the Emoji-Log option
  3. Choose the appropriate Emoji-Log prefix
  4. Emoji-Log will add itself to the Git message box as a prefix
  5. Write the git commit message and commit it.

โš™๏ธ

ALTERNATIVELY:

  1. Open the Source Control View (where you write the Git commit message)
  2. Click the Smile Button โ˜ป in the navigation menu in the top bar
  3. Choose the appropriate Emoji-Log prefix
  4. Emoji-Log will add itself to the Git message box as a prefix
  5. Write the git commit message and commit it.

Install

EASY INSTALLATION

  1. Open the extensions sidebar on Visual Studio Code
  2. Search for ahmadawais.emoji-log-vscode
  3. Click Install to install it.
  4. ๐ŸŒŸ Rate five-stars.

ALTERNATE INSTALLATION

  1. Launch Quick Open using COMMAND (โŒ˜)+P OR CONTROL (โŒƒ)+P.
  2. Paste the command ext install ahmadawais.emoji-log-vscode
  3. Click Install to install it.
  4. ๐ŸŒŸ Rate five-stars.

Philosophy

PHILOSOPHY

I like emoji. I like โ€™em a lot. Programming, code, geeks/nerds, open-source, all of that is inherently dull and sometimes boring. Emoji (which is, in fact, the plural of emoji) helps me add colors and emotions to the mix. Nothing wrong if you want to attach feelings to this 2D flat text-based world of code. I found out that instead of memorizing hundreds of emoji it's better to keep the categories small and general.

  1. IMPERATIVE โ†“
    • Make your Git commit messages imperative.
    • Write a commit message like you're giving an order.
    • E.g., Use โœ… Add instead of โŒ Added.
    • E.g., Use โœ… Create instead of โŒ Creating.
  2. RULES โ†“
    • A small number of categories โ€” easy to memorize.
    • Nothing more nothing less.
    • E.g. ๐Ÿ“ฆ NEW, ๐Ÿ‘Œ IMPROVE, ๐Ÿ› FIX, ๐Ÿ“– DOC, ๐Ÿš€ RELEASE, ๐Ÿค– TEST, and โ€ผ๏ธ BREAKING
  3. ACTIONS โ†“
    • Make git commits based on the actions you take.
    • Use a good editor like VSCode to commit the right files with commit messages.

Start

GETTING STARTED

Only use the following Git Commit Messages. A simple and small footprint is critical here.

  1. ๐Ÿ“ฆ NEW: IMPERATIVE_MESSAGE_GOES_HERE

    Use when you add something entirely new. E.g. ๐Ÿ“ฆ NEW: Add Git ignore file

  2. ๐Ÿ‘Œ IMPROVE: IMPERATIVE_MESSAGE_GOES_HERE

    Use when you improve/enhance piece of code like refactoring etc. E.g. ๐Ÿ‘Œ IMPROVE: Remote IP API Function

  3. ๐Ÿ› FIX: IMPERATIVE_MESSAGE_GOES_HERE

    Use when you fix a bug โ€” need I say more? E.g. ๐Ÿ› FIX: Case conversion

  4. ๐Ÿ“– DOC: IMPERATIVE_MESSAGE_GOES_HERE

    Use when you add documentation like README.md, or even inline docs. E.g. ๐Ÿ“– DOC: API Interface Tutorial

  5. ๐Ÿš€ RELEASE: IMPERATIVE_MESSAGE_GOES_HERE

    Use when you release a new version. E.g. ๐Ÿš€ RELEASE: Version 2.0.0

  6. ๐Ÿค– TEST: IMPERATIVE_MESSAGE_GOES_HERE

    Use when it's related to testing. E.g. ๐Ÿค– TEST: Mock User Login/Logout

  7. โ€ผ๏ธ BREAKING: IMPERATIVE_MESSAGE_GOES_HERE

    Use when releasing a change that breaks previous versions. E.g. โ€ผ๏ธ BREAKING: Change authentication protocol

โ€” That's it for now. Nothing more nothing less.


More

THE WORKFLOW & MEANINGS

I'd like to share what each of these emojis mean.

  • ๐Ÿ“ฆ NEW: Emoji meaning: A "package emoji" โ€” which can contain new stuff.
  • ๐Ÿ‘Œ IMPROVE: Emoji meaning: An "OK Hand emoji" โ€” which is meant to appreciate an improvement.
  • ๐Ÿ› FIX: Emoji meaning: A "bug emoji" โ€” which means there was a bug that got fixed.
  • ๐Ÿ“– DOCS: Emoji meaning: A "book emoji" โ€” which means documentation or notes just like in a book.
  • ๐Ÿš€ RELEASE: Emoji meaning: A "rocket emoji" โ€” which is meant to show a new release/launch.
  • ๐Ÿค– TEST: Emoji meaning: A "robot emoji" โ€” which says some test were run successfully.
  • โ€ผ๏ธ BREAKING: Emoji meaning: A "bangbang emoji" โ€” which attracts attention to a breaking change.
VSCode Extension

If you use VSCode, then I have built an extension Emoji-Log for VSCode. This can help you write git commit messages quickly.

Bash/Zsh Workflow

For quick prototyping, I have made the following functions that you can add to your .bashrc/.zshrc files and use Emoji-Log quickly.

#.# Better Git Logs.
### Using EMOJI-LOG (https://github.com/ahmadawais/Emoji-Log).

# Git Commit, Add all and Push โ€” in one step.
gcap() {
    git add . && git commit -m "$*" && git push
}

# NEW.
gnew() {
    gcap "๐Ÿ“ฆ NEW: $@"
}

# IMPROVE.
gimp() {
    gcap "๐Ÿ‘Œ IMPROVE: $@"
}

# FIX.
gfix() {
    gcap "๐Ÿ› FIX: $@"
}

# RELEASE.
grlz() {
    gcap "๐Ÿš€ RELEASE: $@"
}

# DOC.
gdoc() {
    gcap "๐Ÿ“– DOC: $@"
}

# TEST.
gtst() {
    gcap "๐Ÿค– TEST: $@"
}

# BREAKING CHANGE.
gbrk() {
    gcap "โ€ผ๏ธ BREAKING: $@"
}
gtype() {
NORMAL='\033[0;39m'
GREEN='\033[0;32m'
echo "$GREEN gnew$NORMAL โ€” ๐Ÿ“ฆ NEW
$GREEN gimp$NORMAL โ€” ๐Ÿ‘Œ IMPROVE
$GREEN gfix$NORMAL โ€” ๐Ÿ› FIX
$GREEN grlz$NORMAL โ€” ๐Ÿš€ RELEASE
$GREEN gdoc$NORMAL โ€” ๐Ÿ“– DOC
$GREEN gtst$NORMAL โ€” ๐Ÿงช๏ธ TEST
$GREEN gbrk$NORMAL โ€” โ€ผ๏ธ BREAKING"
}
Fish Shell Workflow

To install these functions for the fish shell, run the following commands:

function gcap; git add .; and git commit -m "$argv"; and git push; end;
function gnew; gcap "๐Ÿ“ฆ NEW: $argv"; end
function gimp; gcap "๐Ÿ‘Œ IMPROVE: $argv"; end;
function gfix; gcap "๐Ÿ› FIX: $argv"; end;
function grlz; gcap "๐Ÿš€ RELEASE: $argv"; end;
function gdoc; gcap "๐Ÿ“– DOC: $argv"; end;
function gtst; gcap "๐Ÿค– TEST: $argv"; end;
function gbrk; gcap "โ€ผ๏ธ BREAKING: $argv"; end;
funcsave gcap
funcsave gnew
funcsave gimp
funcsave gfix
funcsave grlz
funcsave gdoc
funcsave gtst
funcsave gbrk
Git Aliases

If you prefer, you can paste these aliases directly in your ~/.gitconfig file:

# Make sure you're adding under the [alias] block.
[alias]
  # Git Commit, Add all and Push โ€” in one step.
  cap = "!f() { git add .; git commit -m \"$@\"; git push; }; f"

  # NEW.
  new = "!f() { git cap \"๐Ÿ“ฆ NEW: $@\"; }; f"
  # IMPROVE.
  imp = "!f() { git cap \"๐Ÿ‘Œ IMPROVE: $@\"; }; f"
  # FIX.
  fix = "!f() { git cap \"๐Ÿ› FIX: $@\"; }; f"
  # RELEASE.
  rlz = "!f() { git cap \"๐Ÿš€ RELEASE: $@\"; }; f"
  # DOC.
  doc = "!f() { git cap \"๐Ÿ“– DOC: $@\"; }; f"
  # TEST.
  tst = "!f() { git cap \"๐Ÿค– TEST: $@\"; }; f"
  # BREAKING CHANGE.
  brk = "!f() { git cap \"โ€ผ๏ธ BREAKING: $@\"; }; f"

Using

USING EMOJI-LOG

Here's a list of repos that make use of Emoji-Log.


AlfredSnippets

Alfred Snippets

Alfred PowerPack users can use the Snippets feature to quickly call Emoji-Log, or use the text expand feature for even quicker creation.

To setup:

  1. Have Alfred 3 with PowerPack installed
  2. For auto expansion, in Alfred Settings ยป Features ยป Snippets ensure the "Automatically expand snippets by Keyword" box is checked
  3. Download & open Emoji-Log.alfredsnippets, deselecting "Strip snippets of 'auto expand' flag" when prompted

This will give the following text expander keywords for the Emoji-Log:

Keyword Snippet
;gnew ๐Ÿ“ฆ NEW:
;gimp ๐Ÿ‘Œ IMPROVE:
;gfix ๐Ÿ› FIX:
;grlz ๐Ÿš€ RELEASE:
;gdoc ๐Ÿ“– DOC:
;gtst ๐Ÿค– TEST:
;gbrk โ€ผ๏ธ BREAKING:

To edit the ; prefix to your preferred expansion flag, double click right click the Emoji-Log Collection in Alfred Settings ยป Features ยป Snippets.

TextExpander Snippets are also available. Download & open Emoji-Log.textexpander to import.


badge

EMOJI-LOG BADGE COLLECTION

If your repo uses EMOJI-LOG then you can add any of badges here to your read me and send me a PR to list your repo here.


๐Ÿ‘Œ

Sponsor

Me (Ahmad Awais) and my incredible wife (Maedah Batool) are two engineers who fell in love with open source and then with each other. You can read more about me here. If you or your company use any of my projects or like what Iโ€™m doing then consider backing me. I'm in this for the long run. An open-source developer advocate.


๐Ÿ“ƒ

License & Conduct


๐Ÿ™Œ

Connect

NodeCLI.comย  IMP: I'm teaching developers how to automate their work and life with JavaScript

Twitter @MrAhmadAwaisย  (follow) To get #OneDevMinute development tips

YouTube AhmadAwaisย (follow) 200+ FOSS software projects

YouTube AhmadAwaisย (subscribe) Tech talks & #OneDevMinute videos

Blog: AhmadAwais.comย (read) In-depth & long form technical articles

LinkedIn @MrAhmadAwaisย (connect) On LinkedIn y'all

Sponsor Awais

โฏโฏ Professional Development Courses โ†“

Node CLI Course VSCode Course Deno Course

emoji-log-vscode's People

Contributors

ahmadawais avatar samaneyaghoobi avatar tommijonasar avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

emoji-log-vscode's Issues

Could add custom message template?

Dear,
Currently, there is no feature to configure the command template.
Could you add a new feature to read VS Code settings for custom template?

Thanks

Missing icon/font ?

Hi :)

Your (marvelous ;)) plugin has a pb on my setup with one font on "TEST" ....
Emoji-Log-VSCode

What can be wrong ? VScode v1.68.1 ?

Thanks :)

Extension seems to be broken

Thanks for the extension, I use it every day - now it seems to be broken.

Things I've tried

  • re-installing
  • Removing the extension from .vscode/extensions folder
  • Disabling all extensions and then enabling them all again.

If I open up the devtools and try using the extension to add a commit message, this shows up:

image

The cursor should be after the predefined subject

If we create a new commit message then the cursor should be after the predefined commit subject (FEAT, FIX, IMPROVE etc). For now, the cursor is at the start of text field whenever we create new message.
Current behavior:
image

Expected (little bit better experience):
image

PS: YOU'VE SAVED MY TIME BY MAKING THIS EXTENSION. TONS OF THANKS!!

Change or add commit messages

As the title says I would like a way to change the current preset commit messages or even add new ones.

Sorry if there is already a way to do this, I'm really new to extensions and VSCode in general so might have missed a way to do this.

Secondary sidebar closes on selection of commit message emoji

Whenever I try to select one of the templates, my secondary sidebar (on the right) with my source control pane closes. It is not anything breaking but it is quite annoying. I don't exactly know when this started but it must have been in the last month or 2.

Missing icon/font ?

Hi :)

Your (marvelous ;)) plugin has a pb on my setup with one font on "TEST" ....
Emoji-Log-VSCode

What can be wrong ? VScode v1.68.1 ?

Thanks :)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.