Add Batman in Your VS Code

As a Software Developer, it is not always about writing code. We also share a passion to personalize our workstations and development environment. I have personally been a fan of that aspect. Very often, I customize fonts, icons and themes of my VS code.

In this short yet fun article, I’ll explain to you a plugin that I love and customize to make my IDE a fun place to work with.

The extension name is “Power Mode” that you can find in the marketplace of VS Code extension. This is how it looks like:

Once installed, you can see the fun part after enabling the feature from Settings of VS Code ( Files > Preferences > Settings).

Select a type of animation by searching for Power Mode and enable it.

And here is how it looks like:

But our fun does not stop there. This can be easily done by anyone. So, let’s customize it further with my favorite Superhero Batman 😄.

To add our custom animation, we should open settings.json

Clicking on either of these links work. Once opened, copy paste below code to the settings.json

"powermode.customExplosions": [
     "https://c.tenor.com/xT0EW92-o60AAAAi/batman-dc.gif"
],
"powermode.customCss": {    
   "margin-top": "1rem",
   "height": "5rem",
   "width": "5rem",
},

The final json structure may look like:

After saving the file, you should be able to see the Batman in action.

You can play around and find more stickers on https://tenor.com/ .

If you find some fun stickers, feel free to drop its detail in the comment section of this article. 😉

Have Fun ! 🐼

If you like this article, please 👏 clap 👏 few times & encourage me 🐼 to write more.