2021 Linux VM Setup: Part 4 - zsh, VS Code & Terminal Customisation on Ubuntu 20.04

In this part of this series, lets change our bash shell to zsh and customise the terminal with colours, fonts and plugins.

zsh Setup

zsh (Z-Shell) is and alternative to bash for Linux. It features simplified cd commands for example -

# bash
cd /folders/in/path

# zsh
folders/in/path

# or even better
f*/i*/p*

But the real power lies in its plugin and theme support, lets get it set up.

sudo apt install zsh
Get the installed path of zsh
which zsh
Enter the output path in below command
chsh -s /usr/bin/zsh
Close and re-open the terminal and select option 2 for the default .zhrc setup. Close and re-open again and it should load normally.

oh-my-zsh setup

Now, let's install the most popular plugin manager for zsh, oh-my-zsh

wget https://github.com/robbyrussell/oh-my-zsh/raw/master/tools/install.sh -O - | zsh

This will create a new .zshrc file which we will edit. To customise zsh, we will edit the ZSH_THEME= and the plugins= lines.
You can choose one of the many in-built themes that come with oh-my-zsh, but I use Oxide, which doesn't come with it.

Download the oxide theme from below and store in the oh-my-zsh themes directory ~/.oh-my-zsh/themes/
https://github.com/dikiaap/dotfiles/tree/master/.oh-my-zsh/themes
Edit ~/.zshrc and set ZSH_THEME=oxide
Restart terminal to see changes.

Next, let's install some plugins, here are some common popular ones.

Fuzzy search, you can press CTRL+T to search for files in a folder or CTRL+R to search through your commmand history

git clone --depth 1 https://github.com/junegunn/fzf.git ~/.fzf && ~/.fzf/install

Autosuggestions will fill in terminal commands for you.

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

Syntax Highlighting will colour terminal code and zsh scripts for increased readability.

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

There are a heap of in-built plugins you can enable too, here's what I changed the plugins= parameter in my .zshrc file to be.
plugins=(git docker docker-compose fzf zsh-autosuggestions zsh-syntax-highlighting)

Bash emulation

If you like customising your your terminal with alias commands for example, we'll need to get these working again with zsh.
First if you have any custom commands in ~/.bashrc, move them into ~/.profile.
A .profile file is one that is universally read by most of the popular terminal shells.
This is my .profile.

# if running bash
if [ -n "$BASH_VERSION" ]; then
    # include .bashrc if it exists
    if [ -f "$HOME/.bashrc" ]; then
        . "$HOME/.bashrc"
    fi
fi

# set PATH so it includes user's private bin if it exists
if [ -d "$HOME/bin" ] ; then
    PATH="$HOME/bin:$PATH"
fi

# set PATH so it includes user's private bin if it exists
if [ -d "$HOME/.local/bin" ] ; then
    PATH="$HOME/.local/bin:$PATH"
fi

#Matt's aliases
#docker development runtime shortcut
alias d='docker-compose -f docker-compose.dev.yml run --rm app-dev'
#start venv session
alias v='source .venv/bin/activate'
#git push default
alias g='git push origin main'

#GPG info required for saved git credentials
export GPG_TTY=$(tty)

Now we add the line emulate sh -c '. ~/.profile to the ~/.zshrc file, which will let these bash commands work with zsh.
Below is my final ~/.zshrc, ignoring commented out parameters.

export ZSH="/home/matt/.oh-my-zsh"
ZSH_THEME="oxide"
plugins=(git docker docker-compose fzf zsh-autosuggestions zsh-syntax-highlighting)
source $ZSH/oh-my-zsh.sh
emulate sh -c '. ~/.profile'
[ -f ~/.fzf.zsh ] && source ~/.fzf.zsh

Restart the terminal to see all of these changes come into effect.

Fonts

You may of noticed the terminal is not displaying fonts properly, that's because we haven't installed a font that supports special symbols yet. As we're running the terminal from MS Terminal and VS Code, we need need to update their fonts for it to work, however, we'll add the fonts to the Linux install too, because why not.

On Linux
sudo apt install fonts-powerline

On Windows
Go to https://github.com/powerline/fonts and click the the green Code button and then click Download ZIP
Extract ZIP file
Open a PowerShell window as an Administrator
Go to the extracted path and run install.ps1, this will install all the fonts, it may take a few minutes

You can see how many fonts are in the Powerline package, my current favourite is Cousine, so here's how to get that working in MS Terminal and VS Code.

Open Settings in MS Terminal and add the below in the defaults area in profiles.

"profiles":
    {
        "defaults":
        {
            // Put settings here that you want to apply to all profiles.
			"fontFace": "Cousine for Powerline",
        },

Open VS Code and edit the settings with below.

"terminal.integrated.fontFamily": "Cousine for Powerline",

Restart MS Terminal and VS Code to see the changes.

This is part of a collection of blog posts, detailing my laptop setup preferences.

2021 Linux VM Setup: Part 1 - How to install Ubuntu 20.04 on a laptop with Windows 10 Hyper-V
2021 Linux VM Setup: Part 2 - Setting up Git & Github on Ubuntu 20.04
2021 Linux VM Setup: Part 3 - Docker & Docker-Compose Setup on Ubuntu 20.04
2021 Linux VM Setup: Part 4 - zsh, VS Code & Terminal Customisation on Ubuntu 20.04
2021 Linux VM Setup: Part 5 - Windows VS Code Setup for Ubuntu 20.04 VM