• Stars
    star
    992
  • Rank 46,173 (Top 1.0 %)
  • Language
    TypeScript
  • License
    MIT License
  • Created over 7 years ago
  • Updated over 1 year ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Your code is powerful, unleash it! The extension made popular by Code in the Dark has finally made its way to VS Code.

VSCODE POWER MODE!!!

Power Mode is one of the most requested extensions for VS Code. Unfortunately, they said it couldn't be done...

not-implementable

However, after seeing this list and realizing that VS Code was the only modern editor without it, I knew I had to try. I couldn't let VS Code live in the shadow of its big brother or Atom.

I present you, VSCODE POWER MODE!!! (now with atom-like explosions and an improved combo meter!)

demo

Features:

  • NEW: POWERFUL Combo Meter!
  • Strong default settings
  • Easily choose from a variety of built-in effects including explosions, interdeminsional portals, and clippy. Or quickly edd your own!
  • Extremely Customizable -- 20+ settings to get exactly the experience you want

settings

Get started

  • Enable in the settngs UI, or edit the JSON file directly to add "powermode.enabled": true
  • Enjoy the default experience, or choose from a set of built-in effects
  • Enable/Disable via a command
  • Customize the experience using the advanced settings
  • Find more effects or share your own on here.

Known Issues

They weren't completely wrong when they said it can't be done. VS Code does not expose the DOM as part of the API. Instead this extension relies on using TextEditorDecorations to set css properties for ranges in the editor. This has a few limitations:

  • The cursor doesn't move with the text as it shakes
  • The new combo meter moves off the screen when the editor has long lines unless "word wrap" is enabled
  • There are (literal) edge cases when typing in the first or last lines of the editor
  • Gifs must be used instead of CSS animations for the particles/explosions

Choose Your Explosions:

You can choose explosions with a single setting: powermode.presets. Check out the options below (note: it looks better IRL than in these gifs):

Particles (Default)

particles

Rift (Simple)

simple rift

Rift (Exploding)

exploding rift

Note: If your code becomes hard to read, you may need to set editor.lineHighlightBackground in your user or workspace settings. For example, if your theme is Default Dark+, try:

"editor.lineHighlightBackground": "#1E1E1EAA"

Fireworks

fireworks

Flames

flames

Magic

magic

Clippy

clippy

Advanced Settings:

Power Mode should work great right out of the box, but if it doesn't I've tried to make it as configurable as possible. Tweak the settings for performance or for fun. From doge to clippy, the only limit is your imagination. Some of the options are explained below:

  • powermode.shake.enabled: Uncheck this to disable screen shaking entirely
  • powermode.combo.location: Control where the combo counter appears
  • powermode.explosions.customExplosions: Choose your own explosions with base64 encoded gifs or full web URLs (i.e. "data:image/gif;base64,1337GIF", "https://coolgif.io"). NOTE: Security precautions in the browser engine prevent referencing local files, so for offline-support, please base64 encode the gif.
  • powermode.explosions.backgroundMode: mask will use the gif as a mask, letting the shape of the gif through with the color of the text. image will use the gif itself as the background. mask
  • powermode.explosions.gifMode: restart will restart a gif each time it is displayed, continue will play the gif from the place it stopped. continue is particularly useful when you only have 1 visible gif, restart is useful when you have multiple, but may reduce performance.
  • powermode.explosions.maxExplosions: Reducing this will reduce the number of explosions rendered at once.
  • powermode.explosions.explosionFrequency: Increasing this will increase the number of keystrokes between explosions. It means that there will be gaps between explosions as you type but may help performance.
  • powermode.explosions.customExplosions: Provide your own gifs to use (And share them here)
  • powermode.explosions.customCss: Changes the CSS applied to the "after" pseudoelement. You can experiment with ways to make it look or perform better.
  • powermode.explosions.explosionOrder: sequential will cycle through explosions in order, random will pick one randomly, and providing a number will select the explosion at that (zero-based) index in the list of explosions.

Help Wanted:

If you can provide some lightweight, attractive gifs that improve how power mode looks and performs, I would be happy to include them! Share them here.

Acknowledgements:

  • Thanks to @ao-shen for insight into animating size and colors for the combo-meter
  • Thanks to @RPuffer for providing the incredible gifs added in version 2.1
  • Thanks to @darkvertex for providing the awesome gifs added in version 2.0
  • Thanks to @horvay for giving me ideas to get around the limitations I had in v0.0.1

Changelog:

  • v3.0.1
    • Fix bug where combo meter scrolls with the page
  • v3.0.0
    • Added an improved combo meter!
    • Added commands to enable/disable Power Mode
    • Reorganized and renamed the settings to make it much easier to configure from the settings UI. Old settings will be automatically migrated after updating
    • Effects now work without "render whitespace" enabled
    • Bug fixes, with thanks to @Thertzlor and @hyprhare for their contributions
  • v2.2.0
    • Added powermode.enableStatusBarComboCounter and powermode.enableStatusBarComboTimer to toggle status bar items
    • Added new presets
    • Bug fixes
  • v2.1.0
    • Fixed #20 (Thanks @kirkone)
  • v2.0.0
    • Added powermode.presets to choose between different built-in explosion sets
    • Added powermode.backgroundMode to allow 'atom like' explosions (explosions that match the color of the text being typed)
    • Breaking: Removed powermode.legacyMode
    • Breaking: Renamed powermode.explosionMode to powermode.explosionOrder
    • Breaking: Removed powermode.settingSuggestions
  • v1.2.1
    • Remove intellisense for CSS configuration due to this issue
  • v1.2.0
    • Suggest configurations in settings.json
  • v1.1.0
    • Configure explosion duration
    • Configure explosion "mode": random, sequential, or a specific explosion
    • Reduce default "max explosions" from 5 to 1
  • v1.0.0
    • True power mode! Explosions now extend outside the boundaries of a letter
    • Eliminated two of the default explosions that didn't look good when expanded
    • Added new explostion configuration options (explosion number, size, and frequency)
    • Added a Legacy Mode configuration option
    • Shake now resets after 1 second without typing (Thanks @horvay)
  • v0.0.1
    • Initial release
    • Explosions work, but limited to size of characters

More Repositories

1

vscode-extension-tutorial

A walkthrough of creating an extension for VS Code
TypeScript
61
star
2

vscode-dimmer

TypeScript
44
star
3

vscode-api-playground

A playground to quickly test and demonstrate API features and behavior
TypeScript
41
star
4

vscode-ghc-mod

An extension to bring ghc-mod to vs code
TypeScript
31
star
5

vscode-haskell-linter

An extension to bring hlint to vscode
TypeScript
28
star
6

nodejs-twitterbot-tutorial

A nodejs twitterbot tutorial
JavaScript
15
star
7

vscode-ruby-linter

A linter for the ruby language for VS Code
TypeScript
10
star
8

perfectpass

A list of popular sites with information about their password policies, as well as information about secure password creation and management
JavaScript
9
star
9

strava-weather-reporter

A website for quickly and easily adding weather information to the description of Strava activities
TypeScript
8
star
10

vsto-outlook-busylight

A VSTO Add-in for Outlook to control a BusyLight
C#
4
star
11

hue-react-redux

A dashboard for controlling Philips Hue lights built using react + redux
JavaScript
3
star
12

floss-color-tool

A simple page for finding alternative embroidery floss colors
TypeScript
3
star
13

strava-weather

A tool for adding weather information to the description of strava activities
TypeScript
3
star
14

vscode-octo

JavaScript
3
star
15

vscode-base-converter

Convert selected texts between bases
TypeScript
2
star
16

time-to-run

Generate running training plans. Inspired by https://defy.org/hacks/calendarhack
TypeScript
2
star
17

BusyLight-Demo-CSharp

A BusyLight Demo application written in C#
C#
2
star
18

comprised-of-bot

A bot that streams twitter to correct misuse of 'Comprised Of'
JavaScript
2
star
19

streamABLE

Leveled-Up video game streaming for the visually impaired
TypeScript
2
star
20

flagdage

Information about flag days for busses in the greater Copenhagen area
JavaScript
2
star
21

code-compete

C#
1
star
22

beatsaber-leaderboard-react

A react app for displaying local Beat Saber leaderboards
TypeScript
1
star
23

code-compete-web

A website for code compete
C#
1
star
24

beatsaber-leaderboard-plugin

C#
1
star
25

strava-weather-azure-functions

Azure functions for my Strava Weather service
TypeScript
1
star
26

beatsaber-leaderboard-parser

A library for parsing local leaderboard files for Beat Saber
TypeScript
1
star
27

phantom-password-resetter

A simple NodeJS Heroku application that uses SpookyJS to control a headless browser (PhantomJS with CasperJS) to submit password reset forms.
JavaScript
1
star
28

worldclock

Simple clock used to teach my gf a bit of web design
JavaScript
1
star