Reacting with 💩👍🐛 to Code: How I Built a Free Extension to Add Emojis to Your VSCode
Tags: opensource, programming, vscode, showdev
Published: 2023-09-05 13:13:51



[Code Reactions](https://adadot.com/code-reactions.html) 🚀💩

Help us with your contributions or with a ⭐ on [GitHub](https://github.com/AdadotTeam/vscode-reactions) 💚!


{% cta https://marketplace.visualstudio.com/items?itemName=Adadot.code-reactions %} Install extension → {% endcta %}


[![Help us with your contributions or with a ⭐ on](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rf5szx160cpjmwc0u4pe.gif)](https://github.com/AdadotTeam/vscode-reactions)
-------

## 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.


{% spoiler **Contents**%}

- [Where did it all start 🦕](## Where did it all start 🦕)
- [What we found 🤯](## What we found 🤯)
- [Building and Spreading the 💚!](## Building and Spreading the 💚!)
- [Features 🔥](## Features 🔥)
- [Future 🚀](## Future 🚀)
{% endspoiler %}

-------

## 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)
{% cta https://marketplace.visualstudio.com/items?itemName=Adadot.code-reactions %} Get extension → {% endcta %}

-------


## 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tm69osiqctdrh84mhh5m.gif)


- **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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ba1oas4d0xxwe5kqmh2m.png)

-------

## 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!

{% embed https://github.com/AdadotTeam/vscode-reactions %}