Josh Campos
Josh's Blog; Data.Code.Cloud

Josh's Blog; Data.Code.Cloud

macOS Terminal Setup

iTerm2 + OH MY ZSH

Josh Campos's photo
Josh Campos
·Dec 30, 2021·

4 min read

macOS Terminal Setup

Table of contents

  • Change macOS Shell to zsh, if it's not set already.
  • Install Homebrew
  • Install iterm2 using Homebrew
  • Install git, if you don't have it already...
  • Install Oh My Zsh
  • Compatibility
  • What do the icons mean?
  • VS Code Integrated Terminal

First things first, I use iTERM2 as my terminal replacement on macOS.

Change macOS Shell to zsh, if it's not set already.

  1. System Preferences
  2. Select Users & Groups
  3. Right click your account and Select 'Advanced Options'. If nothing is happening, you may need to click on the lock icon in the bottom left corner to allow changes.
  4. Change the Login Shell options to /bin/zsh.
  5. Now that the default shell is set to zsh, you can test your efforts by opening a new terminal window and enter the following: echo \$SHELL. The output should be: /bin/zsh.

Zsh is configurable by the ~/.zshrc file. OH MY ZSH is a framework for managing your zsh configurations. Let's get this installed and see up all the cool stuff.

Install Homebrew

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

Install iterm2 using Homebrew

brew install --cask iterm2

What is the --cask you ask?

“To install, drag this icon…” no more. Homebrew Cask installs macOS apps, fonts and plugins and other non-open source software. Read More

Install git, if you don't have it already...

brew install git

Install Oh My Zsh

The install is as easy as executing the curl statement on the website.

$ sh -c "$(curl -fsSL https://raw.github.com/robbyrussell/oh-my-zsh/master/tools/install.sh)"

With the framework installed, open the open ~/.zshrc (to open using TextEdit), code ~/.zshrc (to open using VS Code), or vim ~/.zshrc (to open using Vim) review and modify any zsh properties to your liking. I'm using the 'itsJCs-agnoster' theme: ZSH_THEME="itsJCs-agnoster".

This theme is a fork off the original 'agnoster' theme that I customized for myself. You can clone the theme project from github. The downloaded theme must be copied into the hidden .oh-my-zsh home directory in order to read it: ~/.oh-my-zsh/themes.

The catch with my theme is that it requires Powerline fonts to support the icons shown in the terminal. The following installation steps on the GitHub page will install the required fonts.

  1. Clone git clone https://github.com/powerline/fonts.git --depth=1
  2. Install cd fonts ./install.sh
  3. Clean-up cd .. rm -rf fonts

The list of installed fonts is available on the GitHub page. I like Source Code Pro for Powerline

To activate the fonts, you'll need to change the fonts in your iTerms preferences.

Here is a list of my other custom settings:

You can export your preferences as JSON when you find the settings that suit you best:

  • Profiles > Text > Font: Operator Mono Lig, 15pt, Medium
    • My font of choice, you can use any Ligature Coding font (Operator Mono, Dank Mono, etc.)
  • Profiles > Text > Font: Enable 'Use Ligatures'
  • Profiles > Text > Font: Enable 'Use a different font for non-ASCII Text'
  • Profiles > Text > Non-ASCII Font: Source Code Pro for Powerline, 15pt, Medium

  • Profiles > Text > Font: Vertical Height = 100

  • Profiles > Text > Font: Line Height = 100
  • Profiles > Colors > Basic Colors: Foreground and Selection = #10ff00
  • Profiles > Colors > Basic Colors: Background = #101010
  • Profiles > Colors > Cursor Colors: Cursor Guide Enabled, set to #808080
  • Profiles > Window > Window Appearance > Transparency: ~ 35-40%
  • Profiles > Window > Settings for New Windows > Style: Fullscreen
  • Profiles > Session > Miscellaneous: Enable 'Status Bar Enabled'
  • Profiles > Session > Configure Status Bar: Add CPU, RAM, Network, Current Dir Components
  • Profiles > Session > Configure Status Bar > Advanced: Background = #000000
  • Appearance > General > Status Bar Location: Bottom
  • General > Startup > Window Restoration Policy: Open Default Window Arrangement
    • I like a three tile window, I saved the window arrangement and have it open on program start.
  • Appearance > General > Theme: Dark

Compatibility

To test if your terminal and font support it, check that all the necessary characters are supported by copying the following command to your terminal: echo "\ue0b0 \u00b1 \ue0a0 \u27a6 \u2718 \u26a1 \u2699". The result should look like this:

characters.png

What do the icons mean?

  • If the previous command failed (✘)
  • Git status
    • Dirty working directory (±, color change)
  • Elevated (root) privileges (⚡)
  • Job output (⚙)

Update export path for node modules in your ~/.zshrc file:

#NODE MODULES EXPORT
export PATH="$HOME/.npm-packages/bin:$PATH"

Your npm packages directory may be different. This is a custom path I have them installing into.

Removing username@hostname from command prompt can be done by adding the following to the .zshrc file:

DEFAULT_USER=`whoami`
# Those are back ticks, not single quotes!

VS Code Integrated Terminal

If you use the integrated terminal in VS Code, you will also need to add the Powerline font you used to share the same font compatibility. You can add the font by going into VS Code settings and add the Powerline font to the font family section.

VS Code Integrated Terminal Font Family Settings

The settings can also be exported/ modified via the following ID:

terminal.integrated.fontFamily:  'Cousine for Powerline'

Before font setup: VS Code Integrated Terminal Font Before

After font setup:

VS Code Integrated Terminal Font Before

Enjoy swapping themes, fonts, colors to your liking.

 
Share this