|
|
@@ -0,0 +1,290 @@ |
|
|
# Installing and configuring Powerline-style command line tools for developers (MacOS) |
|
|
|
|
|
# Intro: |
|
|
**For every developer, terminal is their weapon, so why don't customize it to become a more powerful weapon than your dummy default bash?** |
|
|
|
|
|
**Powerline style** refers to a terminal style that helps developer to keep track of their workflow easily, allows them to have perfect visual on 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 guide, 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. |
|
|
|
|
|
 |
|
|
|
|
|
*Example of ZSH Shell* |
|
|
|
|
|
## Recommended procedure: |
|
|
+ **Homebrew => iTerm2 => Fishshell => OMF => Powerline Fonts** |
|
|
+ **Homebrew => iTerm2 => Zsh shell => Oh My Zsh => Powerline Fonts** |
|
|
|
|
|
## Content: |
|
|
+ [Homebrew](#homebrew) |
|
|
+ [iTerm2](#iterm2) |
|
|
+ [Fishshell](#fish-shell) |
|
|
+ * [OMF](#omf) |
|
|
+ [Zsh shell](#zsh-shell) |
|
|
+ * [Oh my zsh](#oh-my-zsh) |
|
|
+ [Powerline Font](#powerline-font) |
|
|
+ * [Apply fonts](#configure-fonts) |
|
|
+ [Result](#final-result) |
|
|
+ [Bonus](#bonus) |
|
|
|
|
|
## Homebrew: |
|
|
### [Homebrew](https://brew.sh/) is a package manager for macOS (or Linux) that is convenient and is a necessary tool for any developer working on MacOS environment. |
|
|
In a nutshell, `brew` allows you to install applications, softwares, and packages in a much better way than the traditional dragging-to-install way. |
|
|
|
|
|
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 ! |
|
|
|
|
|
<center> Example of installing Discord via homebrew</center> |
|
|
|
|
|
 |
|
|
|
|
|
> [Homebrew Documentation](https://docs.brew.sh/) |
|
|
|
|
|
## iTerm2: |
|
|
### [iTerm 2](https://www.iterm2.com/index.html) 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](https://www.iterm2.com/downloads.html) |
|
|
+ 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](https://fishshell.com/) |
|
|
> + **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](https://fishshell.com/docs/current/index.html) 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](https://github.com/oh-my-fish/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](#powerline-font) |
|
|
|
|
|
More available themes [here](https://github.com/oh-my-fish/oh-my-fish/blob/master/docs/Themes.md) |
|
|
|
|
|
|
|
|
## 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](https://github.com/robbyrussell/oh-my-zsh) for more info |
|
|
|
|
|
#### Powerlevel9k: |
|
|
[Powerlevel9k](https://github.com/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: |
|
|
### [Powerline Font](https://github.com/powerline/fonts) is the font supports statusline and prompts in a powerline-style. |
|
|
+ You can browse and choose the font you want to install [here](https://github.com/powerline/fonts) |
|
|
+ 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: |
|
|
|
|
|
 |
|
|
**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 look 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](https://github.com/zsh-users/zsh-autosuggestions/blob/master/INSTALL.md#oh-my-zsh) 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](https://github.com/oh-my-fish/theme-bobthefish) theme offers you a variety of choice for you to override the default settings in an easy way: |
|
|
 |
|
|
|
|
|
|
DucNgn revised this gist