How to Make Your VSCode Sparkle
Tags: vscode
Published: 2020-09-12 13:17:46

---
title: How to Make Your VSCode Sparkle
published: true
slug: how-to-make-your-vs-code-sparkle
tags: ["VSCode"]
category:
  - tutorial
description: This article shows you how to customize your VSCode set up to display animated sparkles while you are typing. There's a VSCode extension, Power Mode that adds animated flair while you're typing. It has a few different default animations but none of them quite sparkle.
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/jjkntk4salxdw0eybhej.gif
canonical_url: https://www.aboutmonica.com/blog/how-to-make-your-vs-code-sparkle
---

This article shows you how to customize your VSCode set up to display animated sparkles while you are typing. There's a VSCode extension, [Power Mode](https://marketplace.visualstudio.com/items?itemName=hoovercj.vscode-power-mode) that adds animated flair while you're typing. It has a few different default animations but none of them quite sparkle.

![](https://dev-to-uploads.s3.amazonaws.com/i/jjkntk4salxdw0eybhej.gif)

_Above is a GIF of animated sparkles in my VSCode. The editor's theme is Night Owl and the font is Dank Mono. You can learn more about my VSCode setup on my [uses](https://www.aboutmonica.com/uses) page._

If you're not using VSCode, check out these [Power Mode extensions](https://github.com/codeinthedark/awesome-power-mode) for various code editors. The implementation of each differ but some of them support customized animations.

## Enable Power Mode Extension

In order to add animations to your VSCode first you need to    <a href="https://marketplace.visualstudio.com/items?itemName=hoovercj.vscode-power-mode">install Power Mode
</a> and enable it by updating your [VSCode settings](https://code.visualstudio.com/docs/getstarted/settings#_settings-file-locations) to include the following:
`"powermode.enabled": true`.

Depending on your operation system the VSCode settings file is located here:

<ul>
  <li>
    <bold>Windows</bold> - %APPDATA%\Code\User\settings.json
  </li>
  <li>
    <bold>macOS</bold> - $HOME/Library/Application
    Support/Code/User/settings.json
  </li>
  <li>
    <bold>Linux</bold> - $HOME/.config/Code/User/settings.json
  </li>
</ul>

## Customize Power Mode

`"powermode.enabled"` turns on the extension's default animations when you're typing but if you want sparkles then some additional customization is required.
In particular, you need to configure `"powermode.customExplosions"` in settings and pass in your own animation to be used for the explosions. This setting supports base64 encoded gifs, absolute file path, or https image URLs.

```json
 "powermode.customExplosions": [
// absolute path to custom ✨ GIF on my computer
    "/Users/monica/Dev/power-mode-sparkles/sparkles.gif"
  ],
```

If you are interested in other animation ideas aside from sparkles check out the [vscode-power-mode/Help wanted: explosion gifs](https://github.com/hoovercj/vscode-power-mode/issues/1) issue on GitHub. In fact, this issue is where I found the image for my sparkles ✨ thanks to [federicca](https://github.com/hoovercj/vscode-power-mode/issues/1#issuecomment-643829082). You can [download](#sparkle-gif-to-download) the Sparkle GIF I used for my configuration.

## My Final Power Mode VSCode Configuration

My VSCode `settings.json` includes the following keys and values after configuring Power Mode:

```json
// turn on powermode 🚨
"powermode.enabled": true,
  "powermode.customExplosions": [
// absolute path to custom ✨ GIF on my computer
    "/Users/monica/Dev/power-mode-sparkles/sparkles.gif"
  ],
  // enableShake is true by default which causes the
  // text/screen to shake, the following line disables that
   "powermode.enableShake": false,
  // tweaking settings to reduce amount of explosions
  "powermode.maxExplosions": 1,
  "powermode.explosionFrequency": 4,
  //backgroundMode mask - animation matches the current syntax color
  //backgroundMode image - displays animation with original colors from the image
  "powermode.backgroundMode": "mask",
```

### Optimizing Power Mode

Power Mode recommends tweaking some of the default settings to reduce the frequency of animations if the extension is causing your editor to slow down.

## Sparkle GIF to Download

Right-click and save the below image to your computer if you're ready to start adding more sparkles to your development workflow.

![](https://dev-to-uploads.s3.amazonaws.com/i/joxe6uc9t933l1vv27yw.gif)