Aesthetic Enhancements for Visual Studio Code Terminal

Personalizing our IDEs is a crucial part of giving our code a unique sense of ownership and feel. It allows developing code to have a personal touch. In an environment where remote working is more common than ever, this is a core part of making or breaking developers working from home experience.
I will touch on a few elements I’ve added to my terminal within VSCode to enhance the look in a hopefully stylish and not over-the-top way.

Make the terminal cursor blink.

My #1 ‘tip’ for terminal usage is adding the blinking cursor. Why? I find it acts as a psychological tick, allowing me to focus on coding. Think of it as the equivalent of tapping a pen. An additional benefit is that it makes it more prominent wherein you’re typing within the terminal, saving you countless moments of irritation when you delete the wrong character trying to run API commands.

"workbench.colorCustomizations": {
   "terminalCursor.foreground": "#00ffaa
},
"terminal.integrated.cursorBlinking": true,

to your settings.json file (using your fave #hexcode). To skip the GUI settings editor and go straight to the JSON file, open the command palette (shift+cmd+p), type “settings”, and select “Preferences: Open Settings (JSON)”.

Voila, a wild blinking cursor appeared!

Note: An issue I have come across is occasionally the blinking cursor will stop, it’s something I haven’t quite managed to debug yet but a hacky fix is to change the following

“terminal.integrated.cursorStyle”: “line”

to “block” and then back to “line” (or whatever cursorStyle you prefer), and this will correct the state again.

Styling out the terminal

I wanted to make it even more obvious that the terminal pane was active. The solution that worked for me was to create a simple stylesheet and use this extension to load it in VS Code. For example:

Note: This extension must be run as a root user within OSX else the changes will not integrate and this styling will not take effect.

.terminal {
    border-left: 1px solid #00ffaa;
    padding-left: 1em;
    opacity: 1;
}
.terminal:not(.focus) {
    border-color: transparent;
    opacity: 0.5;
}

Save this locally in an area where you know you won’t mistakenly delete it, and then tell the extension to load it by adding a couple more lines to settings.json:

"vscode_custom_css.imports": ["file:///Users/youruser/Documents/vs-code-custom.css"],
"vscode_custom_css.policy": true,

There are many ways to access this file, but the easiest is probably to open the command menu (shift+cmd+p), type “keyboard”, and select “Preferences: Open Keyboard Shortcuts(JSON)”.

Here’s what the terminal looks like with that style sheet in place, unfocused and focused:

Custom CSS applied to the terminal to highlight when focused.

Further customizations

You can make further customizations to enjoy the benefits of CSS and JavaScript modifications with VSCode, which I haven’t personally implemented, but I’ll cover these in part 2. For now, enjoy the smooth transition between terminal and pane and let the satisfaction ooze through your techy veins.

Happy coding! :)