Profile

Built by Freeman Irabaruta Working/Coding for the greater good Follow me on twitter

Making your terminal look like a ninja's πŸš€ πŸ’» πŸ–±

July 13, 2020

# Why should you use a terminal

As a programmer, a terminal is an essential tool for our every day's workflow as it helps us run commands that automates some GUI hurdles, making your terminal as useful and easy to use as possible is not only highly practical for any kind of work, but it also helps you like your work more.

# When do you need a terminal

You will surely need your terminal as a programmer for one reason or another, for example for version control or package control(npm, npm, yarn, cargo, etc...) and in many other fields that you can find here:
https://itconnect.uw.edu/learn/workshops/online-tutorials/web-publishing/what-is-a-terminal/
https://blog.galvanize.com/how-to-use-the-terminal-command-line/

# Goal

In this short tutorial, we're gonna make your terminal go from this start

to this end minimal

# Prerequisites

I assume that you are using a linux distribution, if not try out linux mint or install ubuntu on WSL, I also assume that you have access to an internet connection as you'll need to clone some github repositories.

# Let's Go |

First of all let's open the terminal, for classic linux users just search for the terminal in your installed programs, as for WSL users it's the program that opens when you click on the ubuntu icon in your programs

πŸ““ πŸ“ 😎 tip:

Add the terminal to the taskbar if it's not already there for ease of access

First let's install the required programs by typing:

sudo apt update
sudo apt install git zsh curl fonts-powerline

then hit enter.

πŸ““ πŸ“ 😎 ​tip:

zsh is an alternative shell to bash and git is a version control program

After the download finishes if you have been prompted to set zsh as your default shell, if not then type in your terminal

chsh -s /usr/bin/zsh

Then enter your password

πŸ““ πŸ“ 😎 tip:

don't panic if you cannot see the output of your password, it does not display on the console

Let us then install oh-my-zsh, which we will need in order to level-up our zsh experience;

just type:

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

you should have this output in your terminal:

ohmyzsh output

wow, now your terminal looks a bit better, but... it's not that good yet, let us use one of the best features of ohmyzsh: plugins, so let's install what is in my humble opinion the best plugin out there: powerlevel10k, powerlevel10k is a cool zsh theme.

πŸ““ πŸ“ 😎 tip:

If you like zsh and oh-my-zsh checkout the fish shell or the bash-it bash extension

# powerlevel10k

Let us install it by typing:

git clone --depth=1 https://github.com/romkatv/powerlevel10k.git ${ZSH_CUSTOM:-$HOME/.oh-my-zsh/custom}/themes/powerlevel10k

After this operation, edit your ~/.zshrc with your favorite text editor and on the 11th line delete it and replace with:

ZSH_THEME="powerlevel10k/powerlevel10k"

Then restart your shell by typing zsh

you will then be prompted to enter some visual configurations like below:

πŸ““ πŸ“ 😎 tip:

Maybe in the future I'll make another blog post on the 100+ operations of customizing powerlevel10k and zsh

Now the problem is that some icons are not displaying, to fix that let's install nerd-fonts by typing:

mkdir -p ~/.local/share/fonts
cd ~/.local/share/fonts && curl -fLo "Droid Sans Mono for Powerline Nerd Font Complete.otf" https://github.com/ryanoasis/nerd-fonts/raw/master/patched-fonts/DroidSansMono/complete/Droid%20Sans%20Mono%20Nerd%20Font%20Complete.otf

πŸ““ πŸ“ 😎 tip:

Don't install if everything is fine, if it's not working it just means that nerd-fonts is your default shell font

Copy one of this file as your .p10k.zsh or read through the The powerlevel10k manual to find out how each of these components works, you should get this:

1

and this:

2

or this:

minimal

# Bonus: Syntax highlighting 🀠

Now let us install syntax highlighting so that we can see whether or not a command we are gonna enter is valid or not, for example here is the expected output:

image-20200712162741893

to install, first type:

git clone https://github.com/zsh-users/zsh-syntax-highlighting.git

then

echo "source ${(q-)PWD}/zsh-syntax-highlighting/zsh-syntax-highlighting.zsh" >> ${ZDOTDIR:-$HOME}/.zshrc

Then, enable syntax highlighting in the current interactive shell:

source ./zsh-syntax-highlighting/zsh-syntax-highlighting.zsh

πŸ““ πŸ“ 😎 tip:

If it isn't enabled on the go, you might need to restart your shell by simply typing `zsh`

Here's the output on my terminal:

output

# Bonus: Smart autosuggestion

Then, let us install a plugin for autosuggestion, so that you won't need to type whole commands as your terminal will automatically suggest you the command based on your recent commands and based on the available commands on your system.

Let's install it by typing:

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

Then in your ~/.zshrc search for the line where plugins=(git) and replace it with plugins=(git zsh-autosuggestions)

Then restart your shell by typing zsh

Let's test it out, start typing ba then, BANG!! you automatically get autosuggestions, to complete the command use the right key arrow

completions

This is it!!!! If you want to know more about customizing your terminal checkout:

The powerlevel10k manual : To know more about customizing your powerlevel10k theme

The zsh-users github organization : for more awesome zsh plugins

Oh my zsh repo : to know more about oh my zsh

πŸ““ πŸ“ 😎 tip:

Follow me on twitter

◀️ previous next ▢️


🏑 Back home