Jazz Up Your Terminal: ZSH + Hyper

Shahrooz Me

Hi, I'm Shahrooz, a front-end developer. I'm the author of this blog, nice to meet you!

→ Follow me on Twitter!

Setting up my terminal is the first thing I do when I get a new computer.

This is the key part of my development setup — my terminal.

After reading this article, you will have:

hyper-terminal

Before starting, make sure that you have Homebrew installed. Homebrew is a package manager for OS X.

To setup our terminal we need to go through these two steps:

  1. Setting up the Shell
  2. Setting up the Hyper

Setting up the Shell

I use Zsh instead of Bash. Zsh includes many useful features which makes the development process much easier. For example, tab completion is much better in Zsh as compared to Bash. It even has tab completion for Git!

Oh-My-Zsh is a framework for managing your Zsh configuration and it is a must download.

Installation

# install zsh
brew install zsh

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

Themes

Oh-My-Zsh comes with hundreds of themes which you can find your favorite one here.

Personally, I use the Avit theme. It is really simple and gives me git information.

# ~/.zshrc
ZSH_THEME="avit"

Plugins

Another great feature of Zsh is plugins. I especially recommend the git plugin — it’s what gives you tab completion for git! I love zsh-syntax-highlighting too. It highlights valid commands green and invalid ones red, so you don’t even have to test the command to see if it will work!

I only use few plugins:

After installing the plugins update your ~/.zshrc:

plugins=(
  z
  zsh-syntax-highlighting
  git
)

Setting up the Hyper

I use Hyper for my terminal emulator. It has some cool features, like search, autocomplete, and paste history. That being said, the feature that makes it great for me is the split panes.

hyper-terminal-split-panes

To customize the Hyper open the Hyper app and then hit the cmd + , and that will open up the configuration file or you can open it up at ~/.hyper.js.

You can do all sort of things like changing the font size, font family, cursor shape, etc.

First of all double check if the shell property is set to zsh:

// ~/.hyper.js
shell: 'zsh'

Now it’s time for installing the plugins. You can find all sort of plugins here.

To install a plugin simply write its name in the plugins array or use hyper install "plugin name" command.

My favorite plugins are:

// ~/.hyper.js
plugins: [
  "hyper-material-theme",
  "hyperpower",
  "hypercwd",
  "hyperborder",
  "hyper-tabs-enhanced",
  "hyper-search",
]

Don’t be a stranger!

If you liked this article and want to read more, I have a weekly newsletter. Also, tweet me a picture of your terminal setup!