Customize the Terminal : Zsh + iTerm2 + Powerlevel10k

Published in

Seok Jun Hong

5 min readJan 24, 2021

If you want something better than the default Terminal in macOS, here’s a tutorial for customizing your terminal with iTerm2 and Powerlevel10k.

Result

Step 1. iTerm2

If you have homebrew installed, use the command on the terminal.

$ brew cask install iterm2

You can also manually install iTerm2 Here.

iTerm2 is an application that can substitute Terminal with several useful features. You can split the screen or decorate your terminal console with iTerm2.

To set iTerm color theme, go to
iTerm → Preferences → Profiles → Colors → Color Presets.

I used Solarized Dark in the example.

If you want more themes, check iterm2colorschemes. To apply, save the theme file and open the file. The setting will be imported to iTerm2 automatically.

Step 2. Oh My Zsh

Oh My Zsh is a framework for managing zsh configuration. For more information, check oh-my-zsh.

Open iTerm2 application and install Oh My Zsh.

To install Oh My Zsh, run

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

When the installation is completed, we will edit ~/.zshrcfile to add settings. Following command in iTerm2 will open up ~/.zshrcfile.

$ open ~/.zshrc

default look is ZSH_THEME=“agnoster”

Step 3. Powerlevel10k

For a better look, we will use Powerlevel10k. run:

$ git clone https://github.com/romkatv/powerlevel10k.git $ZSH_CUSTOM/themes/powerlevel10k

Then open ~/.zshrc file with $ open ~/.zshrcand set ZSH_TEME=“powerlevel10k/powerlevel10k”

setting ZSH_TEME=”powerlevel10k/powerlevel10k”

after you set the theme, quit iterm2 and restart. Powerlevel10k configure wizard will ask you several questions to set your prompt. Remember to choose Unicode instead of ASCII if you want to use icons and sharp edges.

Other than that, choose options based on your preferences.

To reset your setting for Powerlevel10k, simply run

$ p10k configure

Step 4. Better Font with Icons

To get a better font with icons, check

download any fonts you want, run the .ffs file and click the “install Front” button. To set the font, go to
iTerm → Preferences → Profiles → Text → Font.

Search the font you downloaded.

Restart iTerm2 to apply all changes.

Further Settings

- Auto-suggestion

to set auto-suggestion on the iTerm2 prompt, run the following command and download the auto-suggestion plugin.

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

to set the plugin, run $ open ~/.zshrcand set

plugins=(zsh-autosuggestions)

Save the file and Restart the iTerm2.

If you want to change the color of auto-suggestion, go to
iTerm → Preferences → Profiles → Colors.

Colors in the blue circle represent the color of your command.
The red circle represents the color of your auto-suggestion. Choose any color you want.

- Word jumps and delete.

In iTerm2, you will notice that natural jumps using “option + → or ←” do no work. To set this command, go to
iTerm → Preferences → Profiles → Keys.

First, set left ⌥ key acts as +ESC

With this setting, you can delete a block or line using ⌥ + backspace, command + backspace.

2. Backward jumps

Click the plus icon below the key mapping box to add a new Key Mapping. — -Press ⌥ + ←.
Select “Send Escape Sequence” for action.
Input ‘b’ on Esc+.

3. Forward jumps

repeat with ⌥+ → and ‘f’ this time.

- Shorter Prompt Line

It might be annoying to have many icons and directories showing on the prompt. I personally thought that the Apple icon is distracting. Here is how to customize the prompt line.

run

$ open ~/.p10k.zsh

it will open a setting file of powerlevel10k. Inside the file, find POWERLEVEL9K_LEFT_PROMPT_ELEMENTS and modify it.

In my case, I commented out os_icon since I don’t want to see the OS icon.

Save the file and restart iTerm2.

Before

After

- Syntax Highlighting

To install syntax highlighting, run

$ brew install zsh-syntax-highlighting

After the installation, open ~/.zshrc file using $ open ~/.zshrc and add the following line to the very end of the ~/.zshrc file.

source /usr/local/share/zsh-syntax-highlighting/zsh-syntax-highlighting.zsh

Save the file and Restart iTerm2.

- Visual Studio Code config

Installing a different font will mess up the integrated terminal in VSCode. To resolve this, go to VS settings. Use Command + shift + P and search for Preferences: Open Settings (JSON).

In settings.json file add or edit the following values:

for Source Code Pro + Font Awesome: Add "terminal.integrated.fontFamily": "'SourceCodePro+Powerline+Awesome Regular'". The single quotes are important! Restart VS Code after the config change.
for Source Code Pro: "terminal.integrated.fontFamily": "Source Code Pro for Powerline"
for Meslo: "terminal.integrated.fontFamily": "Meslo LG M for Powerline"
for other fonts, you’ll need to check the font name in Font Book.

You can also set the font-size: "terminal.integrated.fontSize": 14