Up & Running With iTerm & Zsh
5 min readI have worked in the native Terminal on my Mac since I got started programming a year and a half ago. I had my customized setup for the bash environment and all my custom aliases and functions. To be honest it worked fine for me. Then one day I saw auto-completion for things I could not auto-complete in my shell and was like:
Must have this, must have this right now!
So this is an article about setting up iTerm2, getting started with zsh and integrating this with my text editor of choice VSCode.
iTerm2
For the longest time I had seen people making use of this, but was too zealous about my bash setup to want to make the switch to some other terminal.
Installing
Now at the time of writing this iTerm2 is at version 3.1.5; why it is not iTerm3 I don’t really know 😕
# If you don't have `homebrew` installed I would suggest it. Makes life so much easier!
# https://brew.sh/
brew update
brew cask install iterm2
brew cask cleanup
Preferences
By traveling to Preferences > Profiles
we can begin setting up how we want our terminal to look I downloaded and utilize the Solarized Dark - Patched Theme (instructions) and a specific Source Code Pro that will work with the zsh theme later on.
Zsh
I had heard of this but wasn’t to sure what it was besides that it was like bash but apparently better. There are quite a few different ways to customize your shell when working with zsh as well and I went with using the highly talked about oh-my-zsh. This bootstrapped thingy is chalked full of goodies. Hundreds of predefined aliases, plugins, sensible defaults. It’s seriously pretty sweet!
Installation
# Mac comes with `zsh` present but lets get the latest version.
brew install zsh
# Get `oh-my-zsh`
sh -c "$(curl -fsSL https://raw.githubusercontent.com/robbyrussell/oh-my-zsh/master/tools/install.sh)"
# Change `zsh` to the default shell
chsh -s /usr/local/bin/zsh
You will now have a ~/.zshrc
file & .oh-my-zsh/
directory in your home directory. The ~/.zshrc
will be full of lots of comments on what all is possible with this file thanks to the oh-my-zsh
bootstrap.
Themes
To use a theme we just add the theme to the line in our ~/.zshrc
below. I chose to use the Powerlevel9k theme:
# install `powerlevel9k`
git clone https://github.com/bhilburn/powerlevel9k.git ~/.oh-my-zsh/custom/themes/powerlevel9k
vi .zshrc
ZSH_THEME="powerlevel9k/powerlevel9k"
source .zshrc
Powerlevel9k
This is like the cadillac of themes in zsh and has some pretty awesome features already enabled by default. You can tweak and customize nearly everything to what your needs are and I recommend reading through the docs and wiki to find out what all your options are!
I wanted to use the Nerd Fonts library with powerlevel9k so I needed to add the following to my ~/.zshrc
:
POWERLEVEL9K_MODE="nerdfont-complete"
Plugins
One of the great things about zsh are the plugins you can utilize to make your life easier as a developer. Adding auto-complete and suggestions alone is a huge boost in productivity and less keystrokes 😉 The best part is that most of these plugins come pre-installed with oh-my-zsh
. You can find them in ~/.oh-my-zsh/plugins/
. Here are just a few, in my honest opinion, must haves ☺️
Installation instructions for plugins
plugins=(
zsh-autosuggestions
zsh-completions
zsh-syntax-highlighting
)
# For `zsh-completions`
autoload -U compinit && compinit
NOTE the more plugins you add can effect the performance of your shell.
VSCode
I found that there were some real issues when using the above setup with vscode. For one the icons came in looking like crazy symbols and the color scheme was terrible. I read through the issues on powerlevel9k and found that I needed to change some settings in the settings.json
for vscode to properly take in my setup:
{
"terminal.external.osxExec": "iTerm.app",
"terminal.integrated.fontFamily": "MesloLGL Nerd Font",
"terminal.integrated.fontSize": 14
}
I found that the font I was using with iTerm2 would not work correctly in vscode so I switched to MesloLGL Nerd Font. That fixed the icons issue but I still had problems with the color scheme just not being right at all. I use the Material Theme as the theme in my editor so it has set the color scheme on all the portions of the editor. After looking at some of the documentation on customizing themes on the vscode website I found that I could tweak the colors of the terminal in the settings.json
. You can read about it in the following issue. I just went with the same colors from the theme I was using in iTerm2, but if you have the time play around with it and make it look how you want it.
{
"workbench.colorCustomizations": {
"terminal.background": "#002833",
"terminal.foreground": "#839496",
"terminal.ansiBlack": "#003541",
"terminal.ansiBlue": "#268bd2",
"terminal.ansiBrightBlack": "#586e75",
"terminal.ansiBrightBlue": "#839496",
"terminal.ansiBrightCyan": "#93a1a1",
"terminal.ansiBrightGreen": "#586e75",
"terminal.ansiBrightMagenta": "#6c6ec6",
"terminal.ansiBrightRed": "#cb4b16",
"terminal.ansiBrightWhite": "#fdf6e3",
"terminal.ansiBrightYellow": "#657b83",
"terminal.ansiCyan": "#2aa198",
"terminal.ansiGreen": "#859901",
"terminal.ansiMagenta": "#d33682",
"terminal.ansiRed": "#dc322f",
"terminal.ansiWhite": "#eee8d5",
"terminal.ansiYellow": "#b58901",
"terminal.selectionBackground": "#003541"
}
}
Screen shots
![Terminal theme applied to VSCode terminal.](/_astro/in_vscode.EoI9O0S__Z1yFPlD.webp)
![Left side of terminal prompt with git branch.](/_astro/term_left_side.tcORu2oD_Z10cB5J.webp)
![Right side of terminal prompt with NodeJS version, Yarn version, time and date.](/_astro/term_right_side.Q3LHL2cK_Z1Ix8oE.webp)
![Left side of terminal prompt showing dirty git tree.](/_astro/term_left_side_2.oBTxBWIZ_1hL2HW.webp)
![Left side of terminal prompt showing tracked files in git tree.](/_astro/term_left_side_3.6OPWpQpl_H95C4.webp)
![Left side of terminal prompt showing clean git state with commit difference from upstream.](/_astro/term_left_side_4.7ldQb8lY_Z1yK6fH.webp)
![Left side of terminal prompt from home directory.](/_astro/term_left_side_5.L6SJy4kH_oV09j.webp)
Wrap Up
I am loving the new setup using iTerm2 + zsh. You should give it a try and see how much you enjoy working in your terminal ❤️. You can find my configuration in this gist.
Related Articles
Python Scripting In iTerm2
How to use the Python Scripting API in iTerm2 to open several tabs and execute commands in those tabs.
Getting Started With Python3
Installation and setup of Python3 on macOS & development with Visual Studio Code.
Cody is a Christian, USN Veteran, Jayhawk, and an American expat living outside of Bogotá, Colombia. He is currently looking for new opportunities in the tech industry.