DEV Community

Cover image for Reacting with ๐Ÿ’ฉ๐Ÿ‘๐Ÿ› to Code: How I Built a Free Extension to Add Emojis to Your VSCode
Alex Harris for Adadot

Posted on

Reacting with ๐Ÿ’ฉ๐Ÿ‘๐Ÿ› to Code: How I Built a Free Extension to Add Emojis to Your VSCode

Code Reactions ๐Ÿš€๐Ÿ’ฉ

Help us with your contributions or with a โญ on GitHub ๐Ÿ’š!

Install extension โ†’

Help us with your contributions or with a โญ on

TL;DR

We created a vscode extension to add emoji reactions ๐Ÿš€๐Ÿ’ฉ๐Ÿ˜, even with comments, to any line of code of any Git repo! React and see others reactions to any piece of code straight from your IDE, and have them follow the code through changes.

Contents


Where did it all start ๐Ÿฆ•

I'm part of a team building an analytics tool. In January we decided to do what we called "replatforming" which was almost a complete architectural change of the entirety of our analytics platform ๐Ÿ˜ฑ to handle scale. In the middle of changing hundreds of files in tens of repos, we found ourselves wanting to mark code for later deletion, refactor, etc. Cause of that, we were pilling mountains of JIRA tickets that were soon outdated. It was NOT working for us! ๐Ÿ˜”

So we quickly hacked together an internal IDE extension that allowed us to put a mark (or an emoji ๐Ÿ˜‰) on the code and find them later!


What we found ๐Ÿคฏ

After using the extension internally for sometime we found that it allowed us to keep some things alongside our code, that never could be up to now ๐Ÿ˜ฎ. So we ended up using it for various reasons, namely:

  1. Giving and receiving feedback for your code. As developers we learn from others, and their reaction to our code either that being a ๐Ÿ‘, ๐Ÿ‘Ž or sometimes even a ๐Ÿ’ฉ or a ๐Ÿš€, is invaluable to our progress.

  2. Putting a mark or a note in the code. You are going about your task and suddenly you notice a piece of code that has that smell, or just doesn't look right, or is super cool!. Give it a ๐Ÿ’ฉ or a ๐Ÿ‘€ or a ๐Ÿš€ and write down a comment if need be!

  3. Code quality metrics are very cool as a concept! However once used we all know that they feel a bit neither here nor there. Eg is a code bad if it has high complexity? Maybe, maybe not! I'd like to know what my collaborators thinks of the code, which parts are for a ๐Ÿ˜ and which for a ๐Ÿค” and which repos and files are the ones that might need a look into cause ๐Ÿ’ฉ has started pilling on.


Building and Spreading the ๐Ÿ’š!

We thought other devs out there might want to have something like it, the same way we did so we decided to rewrite it (make the code slightly more decent) and give to the community something that's:

  • Open Source ๐Ÿ’š (spread the love!)
  • It works in the IDE (we don't want another! tool)
  • You can add emojis and comments ๐Ÿš€
  • You can see others emojis and comments ๐Ÿ‘€
  • Follows (or leaves) the code as it changes. Meaning that it stays there for as long as the relevant line has not changed - whitespace doesn't count as change - and they get removed from the line when it's changed ๐Ÿ”ฅ

So we went ahead and build just that! (vscode only for the time being, Intellij is in the works)
Get extension โ†’


Features ๐Ÿ”ฅ

This is the first version, so it supports limited amount of emojis for now, and it has only a few features. We are super excited to have the community shape the tool and decide on the new features by contributing on GitHub!


Features

  • Different ways to see reactions and add yours (status bar, inline decoration, annotations, reactions feed panel)
  • Notifications on new reactions (either on the repo or specifically on your lines)

  • We didn't want to bloat the IDE, so we created a lightweight website for all the views we didn't feel belonged in the IDE (ie cross-repo data) so you are able to get information for all your projects.

Frontend


Future ๐Ÿš€

We are super excited to have your input on GitHub to help us shape the future of this extension with what the community wants and needs out of this tool!

GitHub logo AdadotTeam / vscode-reactions

Add and see other's reactions to your code!

Code Reactions โ€” Emoji reactions for any Git repo

Add emoji reactions, even with comments, to any Git repo! React and see others reactions to any piece of code straight from your IDE.

Code Reactions is an open-source extension for Visual Studio Code, made by our team at Adadot with a mind to give back to the community.

You saw some nice piece of code? Now you can add a ๐Ÿ‘, or maybe even a ๐Ÿ˜ and spread the love.

It seems like there might be a bug there? Give it a ๐Ÿ› with a comment on your finding 
and come back to fix it when you get the chance.

This code feels like it has quite a smell... You think it might justify a ๐Ÿ’ฉ? Leave it there 
and bring the team around to help you scoop all of these.

We give you the ability to react to anyโ€ฆ

Top comments (14)

Collapse
 
mitchiemt11 profile image
Mitchell Mutandah

I like it! Thanks Alex.

Collapse
 
shricodev profile image
Shrijal Acharya

This is really cool! Will add this in my toolkit.

Collapse
 
alexadadot profile image
Alex Harris

Great to hear you like it!

Collapse
 
nevodavid profile image
Nevo David

Great article!
Thank you for sharing!

Collapse
 
alexadadot profile image
Alex Harris

We are blushing!

Collapse
 
ranggakd profile image
Retiago Drago

I'll check it after take a nap!

Collapse
 
alexadadot profile image
Alex Harris

sweet dreams!

Collapse
 
jspkielem profile image
Jason

Looks cool!
Would be great to use it!

Collapse
 
alexadadot profile image
Alex Harris

We appreciate the love!

Collapse
 
jack40 profile image
Jack

Love this! Excited to try it out

Collapse
 
alexadadot profile image
Alex Harris

Thank you Jack!

Collapse
 
kenneth_sidibe profile image
Kenneth

This sounds fun, definitely will look to it

Collapse
 
alexadadot profile image
Alex Harris

Let us know what you think

Collapse
 
pforpat profile image
Lec

Love the idea! Great job for improvement of codes through collaborative work. Thanks for sharing with the community. Can't wait to try it:)