Installing Zsh and customising Terminal

In recent years with the introduction of Build tools and Version Control to the main stream web industry, using the Command Line has become the norm for the majority of us and something to be, for the most part, expected knowledge in Web Development jobs.

As with my recent post on configuring Sublime Text 3, here's how I setup my Command Line Interface on a new macOS machine.

This is the 2nd part of my 'setup' series of posts. Check out the others below:

• Sublime Text 3 configuration (28/12/2016)
• macOS development environment from scratch (12/01/2016)

Ditching the Terminal application

Let’s start with a look at the Terminal.app, a terminal emulator that comes pre-bundled in macOS. It will do everything you need it to, though, it's a lot less customisable than other applications and quite frankly, if I'm forced to use an application all day I want it to at least look nice on the eyes, so I choose to ditch it in favour of iTerm2.

The application is free but does accept donations in order to maintain updates.

Download iTerm2 and add it to your Applications folder.

Installing Zsh

When interacting with your machine through the terminal or similar, you'll be exposed to a default ‘shell’. You can think of this as a way to talk to your computer so that you can navigate, edit and create things. As is the case for all Macs, you'll be exposed to the ‘Bash shell’ which provides you with plenty of commands you can use to complete your task.

That being said, I prefer to use a different ‘shell’ called Zsh. Zsh provides some fancier features including auto completion and an extensive plugin community. Again, I'm using this every day so I want it to be optimised for my workflow.

To install Zsh, I use the community-driven framework called Oh My Zsh. You can also install it on a fresh macOS system by running their pre-configured bash script (a file that runs a lot of commands at once).

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

The framework requires you to have the Xcode Command Line Tools installed in your machine. Rather than do this manually, when running that command for the first time it will ask you if you want to install them first, do that and then run the command for a second time to install.

Once installed, restart your Terminal application.

Themes and plugins

The Oh My Zsh framework provides us with a bunch of pre-built themes and plugins we can add to our installation. You can look over these on the wiki pages for Themes and Plugins.

To change your theme, open up the Zsh config called .zshrc.

$ sudo nano ~/.zshrc

Locate the option named ZSH_THEME and change it's value to the name of your theme, in my case I like to use the default robbyrussell theme, so I’ll leave things as is.

ZSH_THEME="robbyrussell"

Afterwards, there's a few plugins I like to activate which come pre-bundled with oh-my-zsh, as they provide some nice shortcuts that help make life easier. Again, you can find a full list of plugins on the wiki, but I'll be installing the following:

• git - Providing aliases for git commands such as gst for git status, gp for git push and more.
• sublime - Allowing you to open files from Zsh straight into Sublime Text 3. st /path/to/file.txt opens single files while stt /path/to/folder/ opens folders.
• bundler - Providing aliases for bundler commands such as be for bundle exec and bi for bundle install.

To activate these plugins, within your ~/.zshrc file, find the option named plugins and add each of the plugin names as space separated strings between the parenthesis.

plugins=(git sublime bundler)

Once done, save and exit the file.

Typeface

To keep a modicum of consistency, I like to mimic the typeface and to a degree the colour scheme of my Code Editor within iTerm too.

With iTerm2 open, go to iTerm2 > Preferences or hit ⌘, to bring up your preferences.

On the Profiles section, go to the Text tab and locate the area to change your font, which you can then change to your chosen font, in my case Source Code Pro.

Colour scheme

For the colour scheme, there are great third party ones out there which even includes presets for many code editors too. Personally, I prefer to roll my own, which you can download from the Assortment Github account. Anyhow, find the iTerm2 preset you'd prefer and download it to your desktop.

Back within iTerm, bring up your preferences (⌘,) and within the Profiles section, go to the Colors tab and in the bottom right corner. Find the select box named Color Presets.... Select the option to import a color scheme and choose the one you downloaded to your desktop.

Lastly, select your color scheme and you'll notice your iTerm application change.

Further reading

• Terminal cheatsheet for Mac (Basics)
• Oh My Zsh cheatsheet
• Useful Zsh plugins by Andrew McCombe
• Using Zsh on Windows 10

Taking a little time to customise the applications you use can provide you with a much better understanding of the tools you're using, whilst you’ll also benefit from a more tailored workflow as a result.

I'd urge you to give this setup a go, or perhaps use it as a starting block to customising your own experience.

Until next time 