Settings to declutter, emojify and prettify your terminal (iTerm2 & ZSH)
Tags: webdev
Published: 2019-09-21 22:39:21

---
title: Settings to declutter, emojify and prettify your terminal (iTerm2 & ZSH)
published: true
tags: webdev
canonical_url: https://www.stefanjudis.com/blog/declutter-emojify-and-prettify-your-iterm2-terminal/
---

I'm jumping back and forth between [iTerm2](https://www.iterm2.com/) and [Hyper](https://hyper.is/) for quite a while now. Hyper is beautiful, JavaScript-extensible and provides a very clean and reduced look. 

Unfortunately, it felt always a few milliseconds slower and less responsive than iTerm to me. This tiny difference led me to come back iTerm2 even though I found Hyper visually more appealing.

With the release of [v3.3 of iTerm2](https://iterm2.com/downloads/stable/iTerm2-3_3_0.changelog) (I only just recently noticed this version mixup – `v3` of `v2` 🙈) a Minimal and Compact theme entered the stage. That motivated me to prettify my iTerm2/ZSH terminal. 

Today, I'm very pleased with my setup, and people asked me to share my settings – so here we are!

![My terminal setup including command syntax highlighting, random emojis on every prompt line, command suggestions, reduced iTerm2 and a custom status bar](//images.ctfassets.net/f20lfrunubsq/3XCiYkrF2G1IrJlXDtorVv/c2d55431882415c75032d91348c0c12c/Screenshot_2019-09-10_at_14.50.25.png)

**Before we start: I use the latest iTerm2, `zsh`, and [oh-my-zsh](https://github.com/robbyrussell/oh-my-zsh). Most but not all of the described things work in a different environment.**

## New iTerm2 themes – `Compact` and `Minimal`

You can find the new theme selection under `Settings > Appearance`.

![Appearance dialog in iTerm2](//images.ctfassets.net/f20lfrunubsq/7MiCeibgMcEBcxwPwVPP88/b298cdc339017777ee3e48cd02ef856a/Screenshot_2019-09-08_at_10.38.18.png)

The themes differ in the top and bottom bar. 👇

![Different iTerm2 themes next to each other – regular, compact and minimal](//images.ctfassets.net/f20lfrunubsq/75RfSBWqv3u2svhJURc8ue/d7ff59db53c99cc3a9db49b81a073475/Screenshot_2019-09-08_at_10.39.51.png)

If you looked closely, you probably noticed that you can also configure the position of the status bar, which comes next, in this dialog. I prefer it to be at the terminal bottom.

## The new custom iTerm2 status bar

You can set the elements inside the status bar under `Profiles > Session` and find it a "Configure Status Bar" button in the bottom.

![Profiles - Session dialog in iTerm2 settings](//images.ctfassets.net/f20lfrunubsq/20wW8mLKysby2mbaR6XURI/287b0fb082b254dc92c51cd2c82d29c6/Screenshot_2019-09-08_at_11.58.06.png)

The new status bar provides a bunch of elements to display battery status, git status, and other useful things. 

![Status bar settings in iTerm2](//images.ctfassets.net/f20lfrunubsq/1G6OWqlY6OnWhtRTcSxYYz/4d32b1f3c099bc5a896bcc3df21a2f04/Screenshot_2019-09-08_at_11.58.12.png)

Unfortunately, there is no element showing the current Node.js version (yet). Additionally, the `Current Directory` element shortens the file path when you use `Prefer tight packing to stable positioning` (it moves all the items to the left), which you'll find under the advanced settings.

To solve these issues, you can use the `Interpolated String` element which enables you to display whatever you want right in the status bar.

### Custom variables in the status bar

To set custom iTerm accessible variables, have a look at [this tutorial](https://www.nicksays.co.uk/iterm-tool-versions-status-bar/). You have to enable [the shell integration](https://www.iterm2.com/documentation-shell-integration.html) and to define a `iterm2_print_user_vars` function.

```
# .zshrc
test -e "${HOME}/.iterm2_shell_integration.zsh" && source "${HOME}/.iterm2_shell_integration.zsh"

iterm2_print_user_vars() {
  # extend this to add whatever
  # you want to have printed out in the status bar
  iterm2_set_user_var nodeVersion $(node -v)
  iterm2_set_user_var pwd $(pwd)
}
```

For me, these are defined in [my .zshrc](https://github.com/stefanjudis/.dotfiles/blob/master/.zshrc#L29-L36). You see above that I define `pwd` and `nodeVersion`, which then are available in the `Interpolated String` element under `user`.

![Settings for the Interpolated String element in the iTerm2 status bar](//images.ctfassets.net/f20lfrunubsq/26qQZzeQiydDQLZD6i7Wd0/67ac981b4f8434bec9561f2738e0dd1f/Screenshot_2019-09-08_at_13.05.03.png)

## Other iTerm2 settings

These are my primary iTerm settings. Let me share some other minor things...

### The color theme

I use [Sindre Sorhus' Snazzy color theme](https://github.com/sindresorhus/iterm2-snazzy).

![Color theme setting in iTerm2 showing the Snazzy theme](//images.ctfassets.net/f20lfrunubsq/3REHCU7Wk6XDyxar4Ftgz2/1b1619bfe2002f0b5fed7c681802f8a2/Screenshot_2019-09-08_at_12.05.15.png)

### More space inside of the terminal window

And I like it to have a little bit of padding in my terminal which you can define in the advanced iTerm settings when you search for `margin`.

![Advanced iTerm2 settings showing the margin options](//images.ctfassets.net/f20lfrunubsq/4XT5dywVf7h9Z0sO4A2mYq/18b7c201570a02570c235b26e011d565/Screenshot_2019-09-08_at_12.06.08.png)

## Command syntax highlighting and auto-completion preview

As I'm using `oh-my-zsh`, the command highlighting and suggestions come out of the box. `oh-my-zsh` provides a bunch of useful plugins. 

These are the ones I use:

```
# .zshrc
plugins=(git node npm github zsh-syntax-highlighting zsh-autosuggestions git-open)
```

![iTerm2 showing command highlighting and command suggestions](//images.ctfassets.net/f20lfrunubsq/5HtNyftB4TD6bOHzGiiXJG/5b39f78cb29f37425dfb1cb7b9899a38/Screenshot_2019-09-08_at_13.20.11.png)

`zsh-syntax-highlighting` and `zsh-autosuggestions` are the plugins highlighting the current command inline and also showing suggestions from the command history. Have a look at [the plugins listing](https://github.com/robbyrussell/oh-my-zsh/wiki/Plugins); there is more good stuff in there.

## My custom theme

The theme doesn't include much fanciness except the emojis. I copied the idea from [Mathias Buus](https://twitter.com/mafintosh) who showed his terminal in a talk years ago, and he was so kind to give me an initial implementation.

Overall, it's a collection of emojis that are accessed with a random number inside of the terminal prompt. *In case you ran into a problem with emojis in the past... iTerm doesn't render all available emojis with the same width.* **Yes, I went through all of them one by one to not have a jumping terminal prompt.**

This led to 665 different emojis rendered in my terminal prompt.

```
# stefan-judis.theme
PS1_EMOJIS=("😀" "😃" "😄" "😁" "😆" "😅" "🤣" ...)
NUMBER_OF_EMOJIS=${#PS1_EMOJIS[@]}
THEME_DELIMITER="%{$fg_bold[blue]%}›%{$reset_color%}%{$fg_bold[red]%}›%{$reset_color%}%{$fg_bold[green]%}›%{$reset_color%}"

PROMPT='
%(?, ,%{$fg[red]%}FAIL: $?
%{$reset_color%})
${PS1_EMOJIS[$RANDOM % $NUMBER_OF_EMOJIS]}  $THEME_DELIMITER '

RPROMPT='%{$fg_bold[blue]%}[%*]%{$reset_color%}'
```

You can change the delimiter with the `THEME_DELIMITER` variable. Currently, it's three colored arrows.

Because I'm using `oh-my-zsh` the theme also includes provided color handling (e.g. `$fg_bold`) and functionality like the current time with `%*`. 

I use `PROMPT` to show the emojis and `RPROMPT` to display the current time on the right side.

![iTerm with a new random emoji on every prompt line](//images.ctfassets.net/f20lfrunubsq/6fMau8l1qday7zUNbOdaP7/9b2b111639733b44620d69c7c177e802/Screenshot_2019-09-08_at_12.34.48.png)

The emoji part should work just fine in any shell environment. If you want to have a look at the theme on GitHub, [here we go](https://github.com/stefanjudis/.dotfiles/blob/master/stefanjudis.zsh-theme).

*In case you have weird blue triangles in your terminal after copying the theme have a look at [this GitHub issue](https://github.com/robbyrussell/oh-my-zsh/issues/5088#issuecomment-221139633).*

## Commands I use daily and people usually ask about

### A colorful list command

To have a look at files in a directory, I use [exa](https://github.com/ogham/exa), which makes the output more beautiful and also has a bunch more settings than the default `ls`. I have it aliased to `ll`.

![Very colorful output of exa aliased to ll](//images.ctfassets.net/f20lfrunubsq/7HrmpwNZbEYcxgNAOAHFa4/a7468ff6e7ca21e2a5fdf72dbacb0b39/Screenshot_2019-09-08_at_12.06.48.png)

### Navigate from anywhere to anywhere

I'm rarely navigating somewhere with the whole path. And while many tools let you go somewhere quickly, I stuck on [autojump](https://github.com/wting/autojump) which is aliased to `j`. 

```
# navigate to /Users/stefan/projects/.dotfiles
# using autojump from anywhere
$ j dotfile
```

### A quicker `clone`

When I clone repositories from GitHub, I use [a custom `clone` function](https://github.com/stefanjudis/.dotfiles/blob/master/aliases.zsh#L38-L47
). It automatically clones a repository, navigates into it, and performs `npm install` if there is a `package.json` available.

```
# Usage:
# $ clone git@github.com:random-mdn/random-mdn-serverless.git
clone() {
  git clone $1
  cd $(basename ${1%.*})
  if test -f "./package.json"; then
    echo "..."
    echo "Found package.json... installing dependencies"
    echo "..."
    npm install
  fi
}
```


### A better `cat`

The usually available `cat` command is aliased to [bat](https://github.com/sharkdp/bat) which is "a cat clone with wings", and it's so good. It automatically does syntax highlighting and shows git modifications. I love it!

![Colorful output of bat showing also git status](//images.ctfassets.net/f20lfrunubsq/7DCKnxJM6G6i9fM8DWvRH6/b6f50ff4297cef89de98329fb0c284fb/Screenshot_2019-09-08_at_13.14.14.png)

------

And that's it friends! 

Feel free to snoop around in [my dotfiles](https://github.com/stefanjudis/.dotfiles) for more things. The repository doesn't include a proper Readme, but usually, there are comments next to the commands and definitions.

Have a wonderful day!