Customize your mac and VS code terminal-EASY!
Tags: linux, git, bash, webdev
Published: 2020-01-15 12:10:59

So back in the day, I used to have my terminal all pimped out 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](https://thepracticaldev.s3.amazonaws.com/i/pg4rlrgdc0bq6896q3w0.png)

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 for 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:
```shell
nano ~/.bash_profile
```
-We have created/open our .bash_profile file

## Add the Git branch name to your terminal

```shell
# 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

```shell
# 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.

Note 2: 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 name!! 😡

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:

```shell
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:**

```shell
# 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](https://thepracticaldev.s3.amazonaws.com/i/wx9kck562f0ha81q7bs7.png)

## 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.

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

## Add Emoji To Your Computer Name (HostName)

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

```shell
sudo scutil --set HostName paste-emoji-here
```
```shell
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 voila! It's working here too.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/rtmugz7fwr3elv4p500s.png)

## 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/

<img src="https://thepracticaldev.s3.amazonaws.com/i/5a87eog40zvcsimuaew4.png" />