🍿 2 min. read
How to Make Your VSCode 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 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.jsonmacOS - $HOME/Library/Application Support/Code/User/settings.jsonLinux - $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 computer3 "/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 computer5 "/Users/monica/Dev/power-mode-sparkles/sparkles.gif"6 ],7 // enableShake is true by default which causes the8 // text/screen to shake, the following line disables that9 "powermode.enableShake": false,10 // tweaking settings to reduce amount of explosions11 "powermode.maxExplosions": 1,12 "powermode.explosionFrequency": 4,13 //backgroundMode mask - animation matches the current syntax color14 //backgroundMode image - displays animation with original colors from the image15 "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.