Installing and configuring Powerline-style command line tools for developers (OSX)

Intro:

For every developer, terminal is their weapon, so why don't you customize it to become a powerful, and a beautiful weapon?

Powerline style refers to a terminal style that helps developer to keep track of their workflow easily, allows them to have perfect visual on current directories and new changes. It is also git recognizable, and failure detector that will help your development process becomes more interact and much faster.

In this guideline, I will introduce you with 2 smart shells: Zsh and Fishshell. Both are perfect for the development jobs due to its rich of resources, and user-friendly.

Note:

• As the title suggested, the main platform of this guideline is OSX, but yet, this guideline could also be implemented on most Unix Platforms, although there might be some different steps about package manager or the choice of terminal (homebrew and iTerm are only supported on OSX). However, configuration on dot file is mostly the same.
• Although the main purpose of this guideline is to configure for Powershell style, but it does not stop just that. There are tools in this tutorial that I found really helpful for developers in a long-way path.

Recommended procedures to follow:

• Homebrew => iTerm2 => Fishshell => OMF => Powerline Fonts
• Homebrew => iTerm2 => Zsh shell => Oh My Zsh => Powerline Fonts

Content:

• Homebrew
• iTerm2
• Fishshell
• • OMF
• Zsh shell
• • Oh my zsh
• Powerline Font
• • Apply fonts
• Result
• Bonus

Homebrew:

Homebrew is a package manager for OSX that is convenient and is a necessary tool for any developer working on OSX environment.

In a nutshell, brew allows you to install applications, softwares, and packages in a much better (and elegant) way than the traditional drag-to-install.

To install homebrew, run the following command on your terminal:

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)" 

• After installing homebrew, use the command brew search <package name> to search for package.
• Run brew install <package name> or brew cask install <package name> to tap and get the desired package.
• brew uninstall <package name> to uninstall a package.

It's that simple !

Example of installing Discord via homebrew

Homebrew Documentation

iTerm2:

iTerm 2 is a terminal emulator that replaces your default terminal and support more functioning than the default one. Some shells even have special functioning that only work with iTerm2, but not your default terminal.

• Install via dmg from this link
• If you installed homebrew, then just run brew cask install iterm2

Note: First time launching iTerm2, you may have to give it Accessibility permission.

1. System Preferences => Security & Privacy => Click the lock at low left corner.
2. Click on Accessibility.
3. Check on iTerm2.
4. Restart iTerm2.

Fishshell:

Fish shell is a command line shell for Linux, MacOS that has better feature than default Bash such as auto-correcting, auto-suggestions, tab-completions, etc.

Installation

• Install via installer from fishshell website
• Or just run brew install fish on command line and let Brew does all the jobs.

After you finished installing Fish, you can simply call Fishshell with the command fish from your terminal.

Set Fish as Default Shell:

On terminal:

• Run echo /usr/local/bin/fish | sudo tee -a /etc/shells to permit fish to be login shell.

• Run chsh -s /usr/local/bin/fish to set Fish as your default shell.

• Switch back to Bash by chsh -s /bin/bash (or chsh -s /bin/zsh if you want to use zsh)

On VS Code (VSC):

• Open Vscode's settings
• Search and change the shell path of terminal.integrated.shell.osx to /usr/local/bin/fish (the default path way to Fishshell)

OR

• Control + Shift + ` by default, will open a mini terminal
• Choose select default shell
• Select fish on the drop down menu.

Fish Documentation for more info.

BONUS

• Go to the source config folder of fish at ~/.config/fish/functions as default and configure all the settings here.

• Add file with name: fish_greeting.fish in functions folder, add function to display a welcome message every time you open fish

function fish_greeting
  set_color $fish_color_autosuggestion
  figlet "Welcome message here  "
  set_color normal
end

OMF:

omf (Oh My Fish) is a Fishshell framework allows you to install packages and modify your shell at ease (not yourself).

Installation: curl -L https://get.oh-my.fish | fish

Check your omf version after installing by omf --version

After you installed omf, there are some useful commands:

• omf install + name to install package:

  Example of installing fishbone via omf

  Fishbone is one of my favorites omf packages. After you installed, you can get the current detail of your device every time you start a session.

• omf list will list installed packages

• omf theme <theme name> to switch back and forth in your installed themes.

• omf remove <name> will remove a theme or package.

• omf theme default will get you back to default

Note:

For the shake of this guideline, I recommend you to install bobthefish or agnoster theme since they are the 2 themes that support Powerline-Style.

omf install bobthefish

omf install agnoster

After installing one of the above themes, all you need to do left is download and enable Powerline Font

More available themes here

Zsh shell:

Zsh shell is a Unix shell and can be used as an alternate for fish. You might prefer using zsh to fish because of its rich available resources, plugins, and packages. It also allows you to configure the shell in a broader way than fish. However, zsh is not really my recommend for beginner since sometimes, you will need to play with source codes to make everything works. Besides, there are some functions are available by default on fish while in zsh, you will need to install plugins.

Installation: OSX preloaded Zsh. zsh --version to check your version. However, I recommend you to install the latest version by running brew install zsh. It will download and install the latest package automatically.

After installing, you can call zsh by zsh command on terminal.

Configure ZSH:

• Run chsh -s /usr/bin/zsh to make zsh as your default shell.
• On VSCode, call up your terminal and select default shell, select zsh on the drop down menu.

Oh My Zsh:

Oh My Zsh is a package manager for zsh shell that offers user with the functionality to install themes, packages, and modify your shell quickly.

Installation:

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

• Once finished installing oh my zsh, every time you install a new plugin, you will need to config the source file in $HOME directory. Head to ~/.zshrc and change the plugins field: Note: The plugins name are separated by whitespace, not comma

• To customize themes, after you installed the desired theme, you will need to change the ZSH_THEME field inside ~/.zshrc to the name of your desired theme to activate it. *If you leave ZSH_THEME = "random", zsh will activate a random theme every time you start a new session.

Oh My Zsh repository for more info

Powerlevel9k:

Powerlevel9k is a ZSH theme that uses Powerline fonts to customize.

Installation with Oh My ZSH:

$ git clone https://github.com/bhilburn/powerlevel9k.git ~/.oh-my-zsh/custom/themes/powerlevel9k

Then, edit ZSH_THEME in ~/.zshrc to active the theme: ZSH_THEME="powerlevel9k/powerlevel9k"

After you restart the terminal, powerlevel9k is loaded. All left to do is install Powerline Fonts

Powerline Font:

Powerline Font is the font supports statusline and prompts in a powerline-style.

• You can browse and choose the font you want to install here
• Download the font and double-clicks the file to let MacOS install.

OR

Install every font at once:

• cd to the directory that you want to contain the fonts folder. Then clone the folder from github:

  git clone https://github.com/powerline/fonts.git
  cd fonts
  ./install.sh
  

Demo

Configure Fonts:

after installing Powerline fonts, you need to change the font of your environment to make it works.

On iTerm 2:

• Head to Preferences -> Profiles -> Text -> Change Fonts
• Then choose the font you want with the extention for Powerline i.e: Meslo LG M DZ Regular for Powerline is the font I am using

On VSCode:

• Head to Settings, go to terminal.integrated.fontFamily.
• Change the value to one of the installed Powerline fonts i.e: Ubuntu mono derivative Powerline is the setting I am using.

Restart iTerm2 and you should be seeing the result now.

Final Result:

If you have done everything perfectly, then here is the result after all:

Final result using Fishshell

Final result using ZSH

Bonus:

Zsh shell:

• If you use zsh, then the functions for auto-completion, syntax-highlight will not be available by default. Thus, you will need to install them manually.

• I also customized ~/.zshrc by myself to get a better workflow for zsh. Check it out and customize it as you want:

POWERLEVEL9K_LEFT_PROMPT_ELEMENTS=(dir rbenv vcs)
POWERLEVEL9K_RIGHT_PROMPT_ELEMENTS=(status root_indicator background_jobs history time)
POWERLEVEL9K_PROMPT_ON_NEWLINE=true

# Add a space in the first prompt
POWERLEVEL9K_MULTILINE_FIRST_PROMPT_PREFIX="%f"

# Visual customisation of the second prompt line
local user_symbol="$ "
if [[ $(print -P "%#") =~ "#" ]]; then
    user_symbol = "#"
fi
POWERLEVEL9K_MULTILINE_LAST_PROMPT_PREFIX="%{%B%F{black}%K{yellow}%} $user_symbol%{%b%f%k%F{yellow}%} %{%f%}"

#new line after each prompt
POWERLEVEL9K_PROMPT_ADD_NEWLINE=true

#change color for warning git status
POWERLEVEL9K_VCS_MODIFIED_BACKGROUND=’red’

# Colorise the top Tabs of Iterm2
# Change the values of 20;26;43 as your desired RGB colour
echo -e "\033]6;1;bg;red;brightness;20\a"
echo -e "\033]6;1;bg;green;brightness;26\a"
echo -e "\033]6;1;bg;blue;brightness;43\a"

#Welcome message
figlet "Terminator   x 23"

• Auto suggesions for ZSH: Follow the step at this link to install the plugin, and activate it.

• Syntax-highlighting for zsh shell: Well, the name already explained its functionality.

  Installation: brew install syntax-highlighting

Fish Shell:

• bobthefish theme offers you a variety of choice for you to override the default settings in an easy way:

  

IF THERE IS ANYTHING DOES NOT WORK OR THERE IS ANY PROBLEM, QUESTION WHILE YOU ARE FOLLOWING THIS GUIDELINE, FEEL FREE TO INFORM ME. THANK YOU