When I first started learning HTML and CSS many years ago, I sometimes saw people using the terminal and didn’t understand why a web developer would need to use it.

Now as a full-stack developer, I use it every day for a variety of tasks including using GIT, SSH to deploy sites on a server, and building small apps to resize images, convert data or automate processes.

Finding out how to customise it and add new features has made it more enjoyable and efficient to use, and this article shows my setup on a M1 Macbook Pro.

Above shows the default Mac terminal vs my much nicer setup below:

I like being able to see the Node and PHP versions + having all the icons to differentiate files and folders.

The shell I’m using is the now-default “zsh” instead of bash.

“Zsh is a Unix shell that is built on top of bash (the default shell for macOS) with additional features…it makes dealing with configuration, plugins and themes a lot nicer.”

https://www.educba.com/zsh-vs-bash/

Hyper

Firstly I use Hyper as my terminal app for the styling + plugin extensions. Other popular ones include iTerm2, Warp and Alacritty.

To get all the icons in your terminal you need to install a Nerd Font. It takes popular programming fonts and adds a bunch of Glyphs such as the PHP and Node icons. I chose the Meslo font to install:
https://github.com/ryanoasis/nerd-fonts/releases/download/v3.0.2/Meslo.zip

After installing the font on your system, edit your Hyper terminal settings with nano ~/.hyper.js.

Add your font to the start of the fontFamily line:

Bash
fontFamily: '"MesloLGSDZ Nerd Font", Menlo, "DejaVu Sans Mono", Consolas, "Lucida Console", monospace',

You have to use the correct font name which took me a couple tries to get right – “MesloLGSDZ Nerd Font”.

Now scroll down to the plugins section and add hyper-font-ligatures to add support in Hyper for these new glyphs. While you’re there you can add a theme. I really like the hyper-one-dark theme.

Bash
plugins: ["hyper-font-ligatures", "hyper-one-dark"],

If you reload Hyper you’ll see the new theme and colours applied. The glyphs will be applied in the next step.

Nano

The next few steps involve using nano a bit (you could also use Vim if you know how to get out from it 😉), so let’s upgrade your nano editor to the latest version + add syntax highlighting.

First, get the latest version of nano:

Bash
brew install nano

Now in your .zshrc file, add an alias for the nano command to reference this new version. On my M1 mac the command is:

Bash
alias nano='/opt/homebrew/bin/nano'

This handy article has info for non-M1 macs: https://blog.smittytone.net/2020/06/19/spruce-up-the-nano-text-editor-with-syntax-colouring-and-more/

Lastly create a .nanorc file and add the following config:

Bash
# Edit the nano config file, creating it if not already there
nano ~/.nanorc

# Add these lines into the file
set tabsize 4
set tabstospaces
set autoindent
set trimblanks
set linenumbers
set constantshow
set titlecolor white,red
set keycolor cyan
set functioncolor cyan
set numbercolor yellow
set mouse
include /usr/local/share/nano/*.nanorc

Now your nano editor is way more user-friendly!

Note: After editing your .zshrc file, to use the new changes either reload the terminal app or type source ~/.zshrc.

Oh my Zsh

I use oh-my-zsh which “provides a way of managing your zsh configurations, themes and plugins to extend the look and functionality of your shell.”

To install just run their simple installer command:

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

You’ll see it has already color-coded folders when you run ls;

Plugins

There are a lot of plugins to add to oh-my-zsh by installing and adding their name into your .zshrc file:

Bash
nano ~/.zshrc

Look for the plugins line, it should already have git in there.

I’ve added Autojump which let’s you type “j” and then shows recent and most-used directories to quickly jump to. Install it with with brew install autojump and then add to the plugins line:

Bash
# Update plugins to include autojump in your .zshrc file
plugins=(git autojump)

The next package is zsh-syntax-highlighting which “enables highlighting of commands whilst they are typed at a zsh prompt into an interactive terminal. This helps in reviewing commands before running them, particularly in catching syntax errors.”

Install by cloning the plugin repository into your oh-my-zsh plugins directory:

Bash
git clone https://github.com/zsh-users/zsh-syntax-highlighting.git ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-syntax-highlighting

Then add to the .zshrc plugins array. They mention in the docs to use it as the last plugin in your array to support highlighting across everything.

Bash
plugins=(git autojump zsh-syntax-highlighting)

Directory Listing

The exa tool is a nice upgrade when listing directories. It can show folders first, include icons and choose how many columns to list files. Install it with:

Bash
brew install exa

Next, add an alias into your .zshrc file:

Bash
# edit the .zshrc config file with nano
nano ~/.zshrc

# add this alias to use exa when typing 'ls'
alias ls='exa --icons -F -H --group-directories-first --git -1'

This will add icons to the “ls” command using our Nerd Font. See their configuration docs for all the argument options.

Starship

Starship is a rust-powered “infinitely customizable” cross-shell prompt.

By installing it, you can get the Git status, Node + PHP versions for a directory as seen in my screenshot at the start of this article.

Install with brew install starship.

Add the following to the end of your .zshrc file to run it:

Bash
eval "$(starship init zsh)"

If you don’t have a config file create one with:

Bash
mkdir -p ~/.config && touch ~/.config/starship.toml

And then add your custom settings, my file looks like this:

Bash
add_newline = false

[nodejs]
symbol = ""

Note: You won’t see the Node symbol on this website if you don’t have a font that can view it.

I’d encourage you to read their configuration guide to see what’s possible with Starship.

Fig

I also use https://fig.io/ – it is a separate app that offers extra plugins and customisation for your terminal including AI tools, but I just use it for it’s nice autocomplete feature.

Some people don’t like the fact that you have to create an account to use it – you could use the oh-my-zsh autosuggest plugin instead.

Conclusion

Having a tricked-out terminal makes me faster at my job and makes it more enjoyable to work with this powerful tool. Let me know if you have any favourite customisations you use!

Further Reading

5 Steps to a Beautiful Terminal That You’ll Love Using

Nano syntax highlighting in Mac OS X

50 Most Useful Command Line Tools

Ohmyposh