Coding with Power Mode in Visual Studio Code! (Includes all v2.2.0 settings)

Hello,
I'm Mandai, the Wild Team member of the development team.

When you want to get excited and get programming going, how do you get yourself in the mood?

Visual Studio Code (hereinafter referred to as VSCode) has a Zen Mode, so one way to do this is to use Zen Mode to hide all other screens, and I also think that listening to uplifting music is a good way to help you concentrate

This time, I'll show you how to turn on VSCode's Power Mode and put more effort into typing

First, install the extension

On the extension search screen, type "power mode" and it will appear at the top

It is already installed, but if you haven't installed it yet, you will see "Install" in the bottom right corner, so just click it to complete the installation

 

Review the settings

Power Mode v2.2.0 has 19 settings.
They're written in simple English, but some of them can be hard to figure out which ones to adjust, so let's go through them one by one!

 

powermode.backgroundMode

This setting can be set to mask or image.
Selecting mask will make the effect transparent to the background, while image will show it through.

If the effect is not displayed correctly, changing this setting may solve the problem

 

powermode.comboThreshold

The number of keystrokes required to enter Power Mode.
The default is 0, so the effect will always be displayed if Power Mode is enabled, but by increasing this value, a certain number of keystrokes will be required to enter Power Mode.

As for when you would use it, I imagine there will be a scenario where you enter Power Mode after entering 20 characters and getting into the groove

 

powermode.comboTimeout

This represents the number of seconds after which the combo counter will be cleared.
The default is 10 seconds, meaning that the combo counter will be reset to 0 if there is no input for 10 seconds.

If the combo counter reaches 0, Power Mode will be suspended until the combo counter reaches the number set by powermode.comboThreshold again

If you set the timeout to 0 seconds, it will not be reset, so you can use it to count the number of keystrokes

 

powermode.customCss

Add CSS to the effect

When it comes to what kind of CSS can be used, the first thing that comes to mind is using the filter property to adjust the hue of the image or add effects.
The filter property does not seem to work on preset images, so the main target seems to be images registered in powermode.customExplosions.

You can adjust the size using the width property, but this can be changed using powermode.explosionSize, so it's not suitable for this purpose

It's not too complicated as you just use properties as keys, but here's an example

"powermode.customCss": { "filter": "invert(100%)" }

 

powermode.customExplosions

You can use your own GIF images as effect images in Power Mode.
Since it's CSS, all you need to do is set the image URL.

However, if you are retrieving from the network, SSL communication is required, and a URL starting with http:// will result in an error.
You can also set a local file, but if you are using Windows, you will need to replace one backslash with four. Also, since VSCode runs on Node.js, there is no problem specifying it with forward slashes.
You can also set a BASE64 encoded image file, so just specify a string starting with "data:image/gif;base64,".

The value of the powermode.customExplosions setting is an array, so if you specify multiple images, they will be displayed according to the powermode.explosionOrder setting

With a little trick, you can specify not only GIF images but also PNG images (this is probably because VSCode is based on Electron, although there are some restrictions), so your options are expanded!

This setting requires you to edit setting.json directly, so here's a sample

"powermode.customExplosions": [ "https://...", "C:\\\\Users\\\\mandai\\\\Downloads\\\\...", // Windows local path "C:/Users/mandai/Downloads/...", // Windows local path (specify path with slash) "data:image/gif;base64,R0lGODlh...", // BASE64 encoded image ]

 

Now that the GUI is in place, it may feel a bit of a hurdle to directly edit setting.json, but it's easy, so please give it a try

Also, there are some people who have uploaded some effects to the github issue

 

powermode.enabled

The default setting is false, so Zen Mode will not be enabled just by installing it!
Don't forget to set it to true!

 

powermode.enableExplosions

The config key is enableExplosions, but it refers to the effect itself.
If you set this to false, you won't see any of the Power Mode effects.

However, for some reason, the combo counter is still counting

 

powermode.enableShake

In Power Mode, the behavior of randomly shifting the left margin of the editor when you type is called Shake.
Here you can enable or disable Shake.

When I'm typing Japanese, every time I shake, the characters in the editor and the characters I'm typing in the IME get out of sync, which is annoying, so I usually have it turned off

People who suffer from severe car sickness may get motion sickness

You can also turn it off visually by setting powermode.shakeIntensity to 0, but this is a more elegant way to do it

 

powermode.enableStatusBarComboCounter

This setting is for displaying the combo counter.
If you enable this, the combo counter will be displayed in the status bar.

If you are bothered by the numbers increasing with each keystroke, you may want to hide them

 

powermode.enableStatusBarComboTimer

This setting is for displaying the timer for the combo counter.
When enabled, a countdown will be displayed in the status bar showing the time until the combo counter is reset.
If you are worried about the remaining time and it is making it difficult to input, it may be more productive to turn it off.

 

powermode.explosionDuration

The setting key is explosionDuration, but this setting applies to the effect as a whole

You can set the duration of the Power Mode effect in milliseconds.
The default is 1000 milliseconds (1 second), and if you set it to 0 it will continue to display in a loop, which can be a bit annoying.

 

powermode.explosionFrequency

The key setting is explosionFrequency, but this is a general setting for the effect

This setting allows you to set the number of keystrokes required for the effect to appear.
The default is 2, so the effect will appear once after two typings.

If you set it to 100, it won't come out at all, which is a bit disappointing, so I think it's better to set it to a smaller number.
Even 1 would be fine!

 

powermode.explosionOffset

The setting key is explosionOffset, but it is a general setting for the effect

This setting adjusts the Y coordinate at which the effect is displayed; if it is greater than 0, it will be offset upwards, and if it is less than 0, it will be offset downwards

The display position varies slightly depending on the type of effect (probably depending on the display size of the gif file), so you will need to find a value in this setting that fits exactly on the cursor

 

powermode.explosionOrder

When multiple effects are specified, you can specify the display order.
This setting does not work when using preset effects, but if multiple images are specified in powermode.customExplosions, the display order will be determined according to this setting.

The default is random which will select a randomly generated image,
sequential which will display them in the order they appear in the array, and a positive number to display only that image.

This is basic knowledge for anyone who has worked with arrays in programming, but please note that if you specify a positive number, the first image will be set to 0

 

powermode.explosionSize

Specifies the display size of the effect

The x direction is specified with rem, so if you use the default value of 6, it will be displayed six times the font size.
The size in the y direction is specified with ch, so there is no need to worry about the original image being stretched strangely.

By the way, rem is a unit used in CSS, and 1 rem is the font size of the root element (the root em value).
In VSCode, you can think of it as the value of editor.fontSize .

 

powermode.gifMode

When Power Mode effects are displayed consecutively, you can choose to rewind to the beginning or resume from where you left off. Select
restart to always display from the beginning, or select continue to continue from where you left off last time.

Basically, restart is fine, but if you set a slightly longer GIF file, you'll be able to see the rest of it every time you type, so if you set your favorite video, you can use it like dangling a carrot in front of your eyes (?)

However, please note that continue will not work if you specify a PNG file

 

powermode.maxExplosions

This setting allows you to specify the maximum number of simultaneous explosions.
The default is 1, which means that if the previous effect is in the middle of playing when the next effect is displayed, it will be hidden.

If you increase this value, the specified number of effects will remain.
However, since they will disappear once playback is finished, it will be difficult to create a situation where the screen is filled with effects unless you do it intentionally.

In this setting combination, if powermode.gifMode is set to continue, the new effect will be displayed in the same state as the previous one, so multiple effects in the same state will be displayed.
You can also align the width and display many effects side by side!

 

powermode.presets

Select an effect from the preset effects.
If powermode.customExplosions is set, it will be given priority.

 

powermode.shakeIntensity

If powermode.enableShake is on, specifies how much to shake the screen

If you specify a number that is too large, your eyes will not be able to keep up with the shaking on the screen, so be careful

If editor.renderWhitespace is none, there is an issue where the Y-axis shake does not work, and it seems that this has not been resolved yet.
Also, in the case of boundary, if there are not two or more spaces, the Y-axis shake does not occur either.

If you are using Shake, we recommend setting editor.renderWhitespace to all

 

summary

This time, I introduced Power Mode, a magical extension that lifts your spirits while you type. I
'm not sure if it's suitable for use in the office, but I'm a big fan of any method that can lift your spirits and increase your productivity, so I definitely recommend giving it a try.
The presets seem to be quite satisfactory, but if you find a great GIF image, I'd definitely like to add it as a custom extension.

That's all