🍿 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

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

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

    15671
    • Angel Young 👼🏾
    • Rovshen Nazarov
    • Gunner
    • Fredrick Kofi Tam
    • S. Alejandro Bravo
    • oksanadev
    • WomenOnRails
    • Armon Raphiel
    • Cat Carbonell ✨
    • Allison
    • Rahul
    • Joffre Sanchez
    • Matt Harris
    • Sarah👩🏻‍💻🚀🌈✨ Software Developer
    • This Dot Media
    • david sharp 🦕
    • Phillip Green
    • парень в красной толстовке
    • Ethan Soo Hon
    • w3bcode
    • Jessica Setiawan
    • Moritz Kröger
    • Amine
    • Fatou
    • Esther
    • dierat
    • James Nimlos
    • Brendan Heussler
    • Vincent Wang
    • santosh rai
    • Kat S (she/her)
    • Rolando Barbella
    • Divine Creation
    • Zenzi Ali
    • Chakri John
    • Adrian Carolli
    • 0rnella 💻
    • Guilfoyle👨🏾‍💻
    • Taylor Dennis
    • e-guillotine ✨
    • +796