DEV Community

Cover image for Customising your VS Code Integrated Terminals
Charlotte Towell
Charlotte Towell

Posted on

Customising your VS Code Integrated Terminals

#vscode #cli #themes

Ever wanted to create custom VS Code terminals? Me too!

If you're looking for a how-to this will show you how to:

  • Create custom integrated terminals
  • Customise the terminal colour, icon, and display name

Let's get into it!

Terminal Integrated Profiles

First things first, let's go into our integrated terminal settings.
Use ctrl+shift+p then open VS Code settings. Search for "Terminal integrated profiles windows" and then click "Edit in settings.json

VS Code Terminal Settings

The all-powerful settings.json

This is where all the magic happens!

{
    ....
    "terminal.integrated.profiles.windows": {
        "PowerShell": {
            "source": "PowerShell",
            "icon": "terminal-powershell",
            "color": "terminal.ansiBlue"
        },
        "Command Prompt": {
            "path": [
                "${env:windir}\\Sysnative\\cmd.exe",
                "${env:windir}\\System32\\cmd.exe"
            ],
            "args": [],
            "icon": "terminal-cmd"
        },
        "Git Bash": {
            "path": "C:\\Program Files\\Git\\bin\\bash.exe",
            "args": [],
            "icon": "github",
            "color": "terminal.ansiMagenta"
        },
        "Google Cloud SDK": {
            "path": "C:\\Windows\\System32\\cmd.exe",
            "args": ["/k", "C:\\Users\\<User>\\AppData\\Local\\Google\\Cloud SDK\\cloud_env.bat"],
            "icon": "cloud",
            "overrideName": "Google Cloud SDK",
            "color": "terminal.ansiYellow"
        }
    },
    "terminal.integrated.defaultProfile.windows": "Git Bash"
    ...
}
Enter fullscreen mode Exit fullscreen mode

You will something like the above, specifically looking for the terminal.integrated.profiles.windows object.

Each object here will be available as a terminal option when creating a new terminal, so you can directly add in as many things as you want here!

Terminal Options

Terminal Paths vs. PATH env variable

At this point you may be wondering about my custom "Google Cloud SDK" terminal...

By directly creating a terminal to the .bat file, you get an alternative for a easy-to-open dedicated path to run gcloud commands against, instead of making it globally available by adding to your system path (which of course you could still do as well~)

Customisation Settings

Other than the PATH itself, the real fun stuff is in customising how your terminal looks. You can see docs for the full available options here.

"Google Cloud SDK": {
            "icon": "cloud",
            "overrideName": "Google Cloud SDK",
            "color": "terminal.ansiYellow"
        }
Enter fullscreen mode Exit fullscreen mode

Colours

To change the colours, just start typing as VS Code has intellisense for the available colour options.

Colour Options

Name

Setting the overrideName attribute lets you customise the displayed name of your integrated terminal in the UI.

Icon

Choosing the icon is perhaps the most fun part! I struggled to find a complete list of all available icons, so the best way to browse is by visiting any other "Icon" related setting in the UI, and looking through the dropdown of options.

Available Icons

All Together

We have a much more bright & colourful terminal experience! And if you're like me, much less error prone by clicking on the wrong one by accident.

All Together

My favourite use case of this is to have multiple of the same terminal "type" but styled different, so in my day-to-day workflows I keep certain tasks separated in each and it's easy to distinguish them.

Happy VS Code customising!

Top comments (0)