Basic zshell greatness

.installation.md

Basic zshell greatness

Below is a quick-start guide to get a lot of zshell goodness. It should take you no longer than 30 minutes to go through the whole guide.

0. Why do this?

Once you've completed the below steps, you should have lots of nice goodies.

Some examples:

• A customisable shell prompt which can display all kinds of information
• Better tab suggestions when "tabbing" on any command (like cd, npm run, git checkout etc.)
• Better tab suggestion navigation and search
• Press ctrl + r to easily search all of your command history with fzf
• Partially type any command, and then press up and down to cycle through the history filtered by the partial search
• Type cd**<TAB> to trigger fzf (fuzzy finder - more info)
• fnm will make sure to use the right node version for whatever folder you navigate to (whenever there is a node_version file in that folder)
• Use all of the git plugin aliases such as
  • grbi instead of git rebase -i
  • grbc instead of git rebase --continue
  • gcb instead of git checkout -b
• Have a much better looking diff when running git diff from terminal

And plenty more that I probably can't even remember.

1. Install prerequisites

• Install fzf - on MacOS: brew install fzf
• Install fnm - on MacOS: brew install fnm
• Install Angular CLI (optional): npm install -g @angular/cli
  • If you don't work with angular, you can decide to skip this, but make sure to remove the last line from my example zshrc below (angular cli related stuff)

2. Backup existing zshell configuration file

If you have a zshrc file already, make sure to make a backup.

mv ~/.zshrc ~/.zshrc.bak

3. Install a nerd font for your terminal (optional, recommended)

Installing the right font ensures that the ligatures (fancy icons in the terminals) display correctly.

You can head over to nerd font and choose a font, or just install the recommended font by p10k: "Meslo LG". On MacOS, with the following command:

brew install --cask font-meslo-lg

Make sure to update your terminal / VSCode settings to use the new font.

MacOS terminal

VSCode integrated terminal

4. Create a new zshell configuration file

If you have VSCode installed (and, on MacOS, you have added code to your PATH), then you can create the new file like this:

code ~/.zshrc

Copy paste the contents of zshell configuration file (.zshrc) below into this file.

5. Follow the theme configuration wizard

Close existing terminals. Open a new terminal and follow the theme configuration wizard.

6. Integrate missing CLIs in zshrc (optional)

Maybe you had things in your old zshrc file that you realise are missing in the new one. Hard to predict. Add back whatever you need from the ~/.zsrch.bak file you created earlier as necessary.

7. Customise your theme (optional)

Following the theme configuration wizard will create a new file in ~/.p10k.zsh. You can edit this file to your pleasing. You can use my personal .p10k.zsh file for inspiration if you like.

.zshrc

# Config loosely based off of zenful config
# https://www.youtube.com/watch?v=ud7YxC33Z3w&t=212s

# Enable Powerlevel10k instant prompt. Should stay close to the top of ~/.zshrc.
# Initialization code that may require console input (password prompts, [y/n]
# confirmations, etc.) must go above this block; everything else may go below.
if [[ -r "${XDG_CACHE_HOME:-$HOME/.cache}/p10k-instant-prompt-${(%):-%n}.zsh" ]]; then
  source "${XDG_CACHE_HOME:-$HOME/.cache}/p10k-instant-prompt-${(%):-%n}.zsh"
fi

# Set the directory where zinit and plugins will be installed
ZINIT_HOME="${XDG_DATA_HOME:-$HOME/.local/share}/zinit/zinit.git"

# Download zinit, if it hasn't been installed yet
if [ ! -d "$ZINIT_HOME" ]; then
  mkdir -p "$(dirname "$ZINIT_HOME")"
  git clone https://github.com/zdharma-continuum/zinit.git "$ZINIT_HOME"
fi

# Load zinit
source "$ZINIT_HOME/zinit.zsh"

# Add in Powerlevel10k
zinit ice depth=1; zinit light romkatv/powerlevel10k

# Add in zsh plugins
zinit light zsh-users/zsh-syntax-highlighting
zinit light zsh-users/zsh-completions
zinit light Aloxaf/fzf-tab
zinit ice as"program" pick"bin/git-dsf"; zinit light zdharma-continuum/zsh-diff-so-fancy

# Add in snippets (oh-my-zsh plugins)
zinit snippet OMZP::git
zinit snippet OMZP::sudo
zinit snippet OMZP::npm
zinit snippet OMZP::colored-man-pages
zinit snippet OMZP::command-not-found

# Load completions
autoload -U compinit && compinit

# Use cache for completion
zinit cdreplay -q

# To customize prompt, run `p10k configure` or edit ~/.p10k.zsh.
[[ ! -f ~/.p10k.zsh ]] || source ~/.p10k.zsh

# History
HISTSIZE=50000
HISTFILE=~/.zsh_history
SAVEHIST=$HISTSIZE
HISTDUP=erase
setopt appendhistory
setopt sharehistory
setopt hist_ignore_all_dups
setopt hist_save_no_dups
setopt hist_find_no_dups

## History command configuration taken from oh-my-zsh/lib/history.zsh
setopt extended_history       # record timestamp of command in HISTFILE
setopt hist_expire_dups_first # delete duplicates first when HISTFILE size exceeds HISTSIZE
setopt hist_ignore_dups       # ignore duplicated commands history list
setopt hist_ignore_space      # ignore commands that start with space
setopt hist_verify            # show command with history expansion to user before running it
setopt share_history          # share command history data

# Fix some autocomplete options
zstyle ':completion:*' matcher-list 'm:{a-z}={A-Za-z}' # Enable case insentiive completion for all commands
zstyle ':completion:*' list-colors "${(s.:.)LS_COLORS}" # Use colors for completion
zstyle ':completion:*' menu no # Disable menu selection - we are using fzf for this instead
zstyle ':fzf-tab:complete:cd:*' fzf-preview 'ls --color $realpath'

# make search up and down work, so partially type and hit up/down to find relevant stuff
autoload -U up-line-or-beginning-search
autoload -U down-line-or-beginning-search
zle -N up-line-or-beginning-search
zle -N down-line-or-beginning-search
bindkey "^[[A" up-line-or-beginning-search # Up
bindkey "^[[B" down-line-or-beginning-search # Down

# fzf
[ -f ~/.fzf.zsh ] && source ~/.fzf.zsh

### App-specific configuration ###

# Node manager
eval "$(fnm env --use-on-cd --log-level quiet)"

# Load Angular CLI autocompletion.
source <(ng completion script)