How to upgrade your Mac Terminal for Developers

engineering Mar 29, 2021

Upgrade your standard Mac terminal from something like this:

mac-standard-terminal

To something like this:

mac-terminal-with-ohmyzsh

What you see above are handy git branch names and indicators letting you know how many files are changed and more! Not only that, but it makes it look way cooler.

Install Oh My Zsh and powerlevel10k

Oh My Zsh is an open-source, community driven library/framework for managing zsh which is a shell for Mac or Linux.

You will find that installing Oh My Zsh is very easy. Uninstalling is just as easy if you decide if it's not for you.

Oh My Zsh has a basic installation section with various methods of installation.

I found the curl method the easiest. But choose whatever you feel comfortable with.

sh -c "$(curl -fsSL https://raw.githubusercontent.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"

Install powerlevel10k theme

To get those fancy icons around Git, you will need to install the powerlevel10k theme.

The command below will do this for you.

git clone --depth=1 https://github.com/romkatv/powerlevel10k.git ${ZSH_CUSTOM:-$HOME/.oh-my-zsh/custom}/themes/powerlevel10k

Install fontsSet font in Terminal

Download and install the recommended fonts.

To install the fonts, just double-click each of the files once downloaded.

Set the font in Mac Terminal

  1. Launch the Mac Terminal.
  2. Open preferences and set the font to be MesloLGS NF
mac-terminal-set-font

This step is not required but I found that otherwise, it will not have icons and when running the configuration p10k configure you won't see certain icons when it prompts.

Update zshrc file

Now that powerlevel10k is installed, we just need to set oh my zsh theme to it.

  1. Open and edit zshrc file.

If you have VS Code installed, you can use this command.

code ~/.zshrc

Otherwise, you can use nano

nano ~/.zshrc
  1. Update the theme
ZSH_THEME="powerlevel10k/powerlevel10k"
  1. Restart Mac Terminal and the powerlevel10k wizard should get started.

powerlevel10k-wizard

If the powerlevel10k theme wizard doesn't start automatically, you can fire it up manually

p10k configure 

You're all done!

Hopefully, with all those steps, you will be presented with something like this:

oh-my-zsh-poowerline-example

No font's appearing or having question marks in the terminal?

If you don't have certain fonts appearing. Check out the powerlevel10k troubleshooting section.

Make the zshrc appear in VS Code

Want to have zshrc shell appear in VS Code's terminal?

  • Launch VS Code
  • Prress F1 or Cmd + Shift + P
  • Type settings and select Preferences: Open Settings (JSON)
  • Add the following to the settings:
    "terminal.integrated.fontFamily": "MesloLGS NF",
    "terminal.integrated.shell.osx": "/bin/zsh"

So it looks something like this:

{
    "workbench.colorTheme": "Atom One Dark",
    "diffEditor.ignoreTrimWhitespace": false,
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "javascript.updateImportsOnFileMove.enabled": "never",
    "window.zoomLevel": 1,
    "terminal.integrated.fontFamily": "MesloLGS NF",
    "terminal.integrated.shell.osx": "/bin/zsh"
}

Finally, your VS Code terminal will now have zsh.

VS-Code-zsh-terrminal

Tags