🍿 2 min. read

How to Make Your VSCode Sparkle

Monica Powell

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. If you're not using VSCode, check out these Power Mode extensions for various code editors. The implementation of each differ but some of them support customized animations.

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

Enable Power Mode Extension for VS Code Typing Animation

In order to add animations to your VSCode first you need to install Power Mode and enable it by updating your VSCode settings to include the following: "powermode.enabled": true.

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

  • Windows - %APPDATA%\Code\User\settings.json
  • macOS - $HOME/Library/Application Support/Code/User/settings.json
  • Linux - $HOME/.config/Code/User/settings.json

Customize How Power Mode Renders Animations

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

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

If you are interested in other animation ideas aside from sparkles check out the vscode-power-mode/Help wanted: explosion gifs issue on GitHub. In fact, this issue is where I found the image for my sparkles ✨ thanks to federicca. You can 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:

1// turn on powermode 🚨
2"powermode.enabled": true,
3 "powermode.customExplosions": [
4// absolute path to custom ✨ GIF on my computer
5 "/Users/monica/Dev/power-mode-sparkles/sparkles.gif"
6 ],
7 // enableShake is true by default which causes the
8 // text/screen to shake, the following line disables that
9 "powermode.enableShake": false,
10 // tweaking settings to reduce amount of explosions
11 "powermode.maxExplosions": 1,
12 "powermode.explosionFrequency": 4,
13 //backgroundMode mask - animation matches the current syntax color
14 //backgroundMode image - displays animation with original colors from the image
15 "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 this image to your computer if you're ready to start adding more sparkles to your development workflow.

This article was published on September 04, 2020.


Don't be a stranger! 👋🏾

Thanks for reading "How to Make Your VSCode Sparkle". Join my mailing list to be the first to receive my newest web development content, my thoughts on the web and learn about exclusive opportunities.

     

    I won’t send you spam. Unsubscribe at any time.

    Webmentions

    15683
    • gelissa
    • Dr Frost
    • Deirdre Connolly¹
    • Gunner
    • oksanadev
    • Rahul
    • w3bcode
    • Moritz Kröger
    • Rolando Barbella
    • Tracy Marshall
    • Katherine Kato
    • Roben Kleene
    • MariHoo
    • Leonardo
    • FİLİZ Bektaş
    • P
    • Jeff "wears a mask 😷 and votes 🗳" Triplett
    • several people are typing...
    • Tomi
    • Joyce Kwon
    • S. Alejandro Bravo
    • WomenOnRails
    • парень в красной толстовке
    • Brendan Heussler
    • Angel Juarez
    • Henri Joel Guissi
    • Jonathan Brewer 🇳🇿🇸🇬
    • Brett Cooper
    • Aaron VonderHaar
    • Paul Amicel
    • Daniel
    • Tushar Jain
    • Michael J Cooper
    • Emily Burch
    • sam*
    • Ana Rodrigues
    • Cees-Jan Kiewiet
    • chris.code();
    • Rohin
    • Chris O'Connor
    • +796