loading...
Cover image for Customize your Mac Terminal (VS Code too)-EASY!

Customize your Mac Terminal (VS Code too)-EASY!

devpato profile image Pato ・3 min read

So I back in the days I used to have my terminal all pimped up when I was running Ubuntu. Today I decided to customize my terminal in my Mac.

Note I'm not an expert at all playing with the terminal but after googling and playing around I got my terminal looking as the following:

Alt Text

1) The first thing to do is opening the "Go to Folder" by pressing
shift + command + G

Inside of the input box enter the following: ~/.bash_profile

If by any reason it says the file doesn't exist or something like that, don't panic.

1a) Let's create a .bash_profile file

Open your terminal and type:

nano ~/.bash_profile

-We have created/open our .bash_profile file

Add the Git branch name to your terminal

# Git Branch

parse_git_branch() {
   git branch 2> /dev/null | sed -e '/^[^*]/d' -e 's/* \(.*\)/ (\1)/'
}

export PS1="\u@\h \W\[\033[32m\]\$(parse_git_branch)\[\033[00m\] $ "

Restart your terminal and test inside of a folder that has a git repo

Add Color to your folders

# Add Color to Folders

export PS1="\[\033[36m\]\u\[\033[m\]@\[\033[32m\]\h:\[\033[33;1m\]\w\[\033[m\]\$ "
export CLICOLOR=1
export LSCOLORS=ExFxBxDxCxegedabagacad
alias ls='ls -GFh'

Restart your terminal and test inside of a folder that has a git repo

Note: At this point you will notice that you don't see your git branch anymore. This has to do with something related with the PS1 variable.

Note2: If you just want to show color in your folder, then you can remove the code for the Git branch, if you want to only show the git branch name, you can remove the the color folder code.

But I want Colors and the branch nameeee!! 😡

So yep, that's what I wanted I wanted to be able to have colors in my folders and see the branch name while inside of a folder with a repo.

I don't know if this is the optimal solution but I had to combine everything in one variable (like I said, I'm not an expert on terminal stuff and I'm trying to setup my mac asap)

This is how the combine line will look like:

export PS1="\[\033[36m\]\u\[\033[m\]@\[\033[32m\]\h:\[\033[33;1m\]\w\[\033[m\]\[\033[32m\]\$(parse_git_branch)\[\033[00m\]$ "

Final code:

# Git Branch

parse_git_branch() {
   git branch 2> /dev/null | sed -e '/^[^*]/d' -e 's/* \(.*\)/ (\1)/'
}

#export PS1="\u@\h \W\[\033[32m\]\$(parse_git_branch)\[\033[00m\] $ "

# Folder Color

export PS1="\[\033[36m\]\u\[\033[m\]@\[\033[32m\]\h:\[\033[33;1m\]\w\[\033[m\]\[\033[32m\]\$(parse_git_branch)\[\033[00m\]$ "
export CLICOLOR=1
export LSCOLORS=ExFxBxDxCxegedabagacad
alias ls='ls -GFh'

Restart your terminal and test

More Customization

Go to Terminal->Preferences

then look at the image below. Everything inside of the red squares is what I changed.

Note: Inside of the background property, when you click on it, you will see an opacity option. This option is the one that makes your terminal have a transparency effect. Mine is set to 60%.

Alt Text

Change case sensitive auto-complete

I hope you have noticed that in your terminal when you want to navigate lets say to the Documents folder and use tab to auto complete the name, the name of your folder is case sensitive, meaning if the name is in capital letters, you have write it that way. With the following command you can write it with lowercase letters if you want

echo "set completion-ignore-case On" >> ~/.inputrc

Add Emoji To Your Computer Name (HostName)

Get your emoji from here: https://emojipedia.org/

sudo scutil --set HostName paste-emoji-here
sudo scutil --set HostName 🔥

You don't have to enter an emoji. You can write whatever you want to display.

Restart your terminal

Test on VS Code

Open your terminal in VS Code and voilaaaa! It's working here too.

Alt Text

Resources

http://osxdaily.com/2013/02/05/improve-terminal-appearance-mac-os-x/
http://osxdaily.com/2006/12/11/how-to-customize-your-terminal-prompt/
http://blog.nickburwell.com/blog/2008/11/mac-os-x-terminal-case-insensitive-auto/
https://emojipedia.org/

Posted on by:

devpato profile

Pato

@devpato

Google Developer Expert on Angular and Web Technologies | Auth0 Ambassador | Media Developer Expert for Cloudinary | Technical Coach at SpringBoard

Discussion

pic
Editor guide
 

Customize your mac terminal easy v2:

  1. Install fish (brew install fish).
  2. Execute chsh -s $(type fish) or point your profile startup command to the fish executable.
  3. Restart your terminal of choice.
 

I would recommend to check out iterm2 + oh my zsh.

 

I didn't install iterm2 after this reformatting, because, I can already customized my Terminal to be beautiful enough...

Zsh is installed by default on Catalina, but I just don't want to recreate .bash_profile and .bashrc to .zshrc.

 

🔥awesome! :)

 

Thanks Aly :)

 

I use zsh, oh-my-zsh and powerlevel10k - one could use this with yours and customize even more.