How to change the integrated terminal in VS Code from default to Pro (iTerm-ish) 🔥 ?

Sai Ankit
3 min readJun 23, 2020

--

In this reading I will guide you to change your integrated terminal in VS code which would be a default terminal style to a Pro iTerm-ish style !

The only prerequisites you must be having are iTerm2.app and Oh-My-Zsh installed on your terminal with your iTerm completely configured.

To configure your iTerm please do follow this step-by-step tutorial

Let’s go with setting up a similar one on VS Code.

Press “ ⌘ ➕ , ” to open the Settings page of VS Code

Click on the icon to transit from the Settings GUI to Settings.json file

Step #1 :

Change the external Terminal from Regular one to iTerm ( this doesn't change the integrated terminal → we are going to change the external terminal that can be accessed from VS Code )

Add / Change to this

Step #2:

Now let us change the default shell of integrated terminal in VS Code

Add / Change this

Step #3:

For the font fix follow this procedure

#1 : Download Menlo For Powerline Font from this GitHub repository

#2 : Move the Menlo for Powerline.ttf file into /Users/[Your user name]/Library/Fonts

#3 : Now add Menlo for Powerline into the Editor font family

I use Fira Code as my default font for VS Code and Menlo is for the integrated terminal

#4 : Now change the integrated font family to Menlo for Powerline

Change the font Family to Menlo for Powerline

#5 : Add some line height in the integrated terminal for good visual appeal

#6 : If you are just like me who doesn’t like a block type of cursor then change it to line type

Color Color ❤️ 💛 💚 💙

I personally tweaked the colors based on my own Preferences and materialized a Color Palette that appealed me. You can use it if you like it.

Royalty Free 😉 !!

"workbench.colorCustomizations": {"terminal.background":"#131212",
"terminal.foreground":"#6bb8e6",
"terminal.ansiBlack":"#000000",
"terminal.ansiBrightBlack":"#414141",
"terminal.ansiBlue": "#bceafa",
"terminal.ansiBrightBlue":"#77dcff",
"terminal.ansiCyan":"#a3e9d4",
"terminal.ansiBrightCyan":"#a3e9d5",
"terminal.ansiGreen":"#68f400",
"terminal.ansiBrightGreen":"#dcf152",
"terminal.ansiMagenta":"#f58a8d",
"terminal.ansiBrightMagenta":"#ffb4b8",
"terminal.ansiRed":"#ff4c41",
"terminal.ansiBrightRed":"#ff7c77",
"terminal.ansiWhite":"#ffffff",
"terminal.ansiBrightWhite":"#ffffff",
"terminal.ansiYellow":"#ffe100",
"terminal.ansiBrightYellow":"#fff68b",
}

Yeah !!

You have a iTerm-ish terminal as an integrated terminal in VS code.

Please do have a look into my YouTube channel: Code Studio Sai Ankit that discusses everything related to coding from Computer Science Concepts, Competitive Coding tutorials, Codeforces Editorials, Development Projects.
Please also do leave a like and Subscribe on the content you like 👍.

--

--