Easy Enhancements for VS Code’s Terminal

Published in

ITNEXT

4 min readFeb 25, 2019

I switched to VS Code from Sublime Text (no shade — ❤ Sublime) a few months ago. I had always used the Terminal (on a Mac) in conjunction with Sublime, but moving to VS Code I decided to take advantage of the integrated terminal. It’s certainly nice to see command output right in the same window with the files you’re working on (especially while using commands that run on Save), but the disadvantage is it’s easy to lose sight of what pane is active and where your cursor is. I was constantly typing git status and the like into random files.

In researching how to solve this issue, I found a few other VS Code terminal enhancements I’ll share.

Solving the focus problem

This Stack Overflow q/a pointed me in the right direction.

Make the terminal cursor stand out

One small but helpful thing you can do to make it more obvious where you are about to enter text is to make the cursor more prominent when it’s in the terminal, by changing the color and making it blink. Add:

"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)”.

Note: this file must contain a Javascript object, so the list of settings should be wrapped in curly braces.

Add some style to 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:

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

Save this in some central spot, 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,

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

Custom CSS applied to terminal to highlight when focused

Making the terminal easier to navigate

Key binding to change pane focus

So now it’s a little easier to see that we’re in the terminal, but how do we get there?

By default ctrl+` toggles the terminal open and closed. But usually, you want to leave the terminal open and just toggle focus between it and an editor window. To do that, you can add the following to your keybindings.json file:

{
  "key": "ctrl+`",
  "command": "workbench.action.terminal.focus",
  "when": "!terminalFocus"
},
{ 
  "key": "ctrl+`",
  "command": "workbench.action.focusActiveEditorGroup",
  "when": "terminalFocus"
}

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

If you don’t have any custom bindings in your keyboard shortcuts file yet, it needs to be an array, so be sure to wrap the list of bindings in square brackets.

Name your terminal windows

I felt very clever one day when I figured out how to change the names on my Terminal tabs. You can do the same thing in VS Code, so when you have multiple terminals going you don’t have to guess which one you need.

With the terminal you want to name active, use the command menu (again, command+shift+p) and start typing “terminal: rename”, and select that option. Type the name you want and press return/enter and voilá.

(You could also add a keyboard shortcut for this command: workbench.action.terminal.rename, but VS Code doesn’t have one by default.)

Next and previous terminals

The last thing I thought would be handy is to navigate through the terminal windows without using the little pulldown menu. You can add a couple more keyboard shortcuts to do just that:

{ 
  "key": "ctrl+shift+right",
  "command": "workbench.action.terminal.focusNext"
},
{ 
  "key": "ctrl+shift+left",
  "command": "workbench.action.terminal.focusPrevious"
},

By the way, to create a new terminal, the shortcut is ctrl+shift+`.

A couple possibly useful extras

There is a setting that turns on a warning if you try to close a window while there are active terminal windows:

"terminal.integrated.confirmOnExit": true

Unfortunately, it warns you whether there is an active running process in the terminal or not, so it’s a little obtrusive.

For processes that you know in advance you want to keep running, even if you quit VS Code or close a workspace, you can launch an external terminal program with shift+cmd+c. And, you can change the editor it opens with this setting:

"terminal.external.osxExec": "YourFaveTerminal.app"

More stuff

There are lots more ways to customize the terminal if you are all about the command line: