How to Customize Your Terminal Prompt with VSCode

Photo by Goran Ivos on Unsplash

Some simple color changes to your Terminal prompt can make things like your working directory pop.

Read on if you want to give your Terminal prompt and integrated terminal in Visual Studio Code some custom colors so it looks something like this:

Quick disclaimer: bash vs. zsh

The steps I show work for bash as opposed to another terminal shell like zsh. If these steps work for you with zsh or another shell, please do let me know, and I can edit this article to include.

This tutorial isn’t just for VSCode.

You might have come across articles on how to customize the integrated terminal in Visual Studio Code.

The problem is that if you change the terminal in VSCode, this doesn’t change the prompt in your actual Terminal application on macOS.

Follow this tutorial if you want to change BOTH the Terminal and integrated terminal in VSCode.

Step 1: Choose your colors

The first thing you’ll want to do is choose what your final prompt is going to look like.

It turns out the syntax for changing anything in the terminal is not human-readable. Just to get the customized prompt I showed above, the final syntax turned out like this:

export PS1="\[\e[0;34m\]\u\[\e[0;32m\]@\[\e[0;36m\]\w \[\e[0;37m\]\@ \[\e[0;35m\]$ \[\e[0m\]"

Crazy, right?

So you’ll want to use a prompt generator site that spits out the script for you. You’ll find a number of these if you search for them. For bash, I used this bash prompt generator by Scriptim.

Most of these prompt generators give you a list of prompt elements like your hostname (your machine’s name, eg, Connies-Macbook-Pro) or your username (what you use to log in to your machine, eg, connietran) that you can choose to display in your prompt (aka everything before the $).

These generators also usually give you the option of entering custom characters like ~ or ? or spaces that you can insert between elements.

Then drag and drop the elements in the order you’d like and customize the color of each element by clicking on that specific element.

If you play around with one of these generators, you’ll get the hang of it.

List of prompt elements from the Scriptim bash prompt generator.

Step 2: Update your .bash_profile

Now that you’ve generated the final script, go to your user home directory by opening up Terminal and entering cd ~.

Enter ls -la to list all of the files in your user home directory. The -a flag in -la shows hidden files including your.bash_profile file.

.bash_profile is a configuration file for the bash shell that’s invoked every time you open a new terminal shell. Every time a new shell is loaded, ~/.bash_profile is loaded and all of the code contained within is executed.

If .bash_profile doesn’t exist, you can create one by entering:

touch .bash_profile 

Open .bash_profile file in Visual Studio Code to edit it by entering:

code .bash_profile

Instead of struggling to exit vi or Vim or any other terminal-based text editor, just use Visual Studio Code to edit the file. Mind blown.

Paste the prompt script you generated into .bash_profile and save the file in VSCode. Make sure you include the variable export PS1= . For example, here’s what my .bash_profile file looks like:

Here’s my final .bash_profile:

export PS1="\[\e[0;34m\]\u\[\e[0;32m\]@\[\e[0;36m\]\w \[\e[0;37m\]\@ \[\e[0;35m\]$ \[\e[0m\]"
echo "HI C0NNIE"

Close and restart your Terminal and VSCode to see the changes to your prompt in both applications.

While you’re in .bash_profile you can do other simple things like echo “Your string here"which will print a string whenever you start a new shell. I’ve put in echo "HI C0NNIE" at the end of my .bash_profile so I’m greeted everything time I start a new shell. Voila.

My new customized Terminal

The integrated terminal in VSCode reflects the same settings as my Terminal prompt