Getting The Right Terminal

Before we can start using ZSH, Z and related tools, getting the right terminal application up and running would be extremely helpful. The default Terminal and Powershell applications on OS X and Windows leave much to be desired.

Further Reading on SmashingMag:

For OS X users, iTerm 2 is recommended as a replacement for OS X’s default Terminal. iTerm 2 introduces some features that are missing in the regular terminal, including commands you would regularly use in your text editor. This includes pane splitting, custom color schemes, paste history, fine-grained control over hotkeys, together with dozens of other handy preferences that you will find useful as you become more comfortable in the terminal.

On Windows we have the built-in PowerShell. Most users find this quite different to the interface of the typical UNIX servers used to host websites; it’s also rarely addressed in online tutorials. For this reason, it’s recommended to use an emulator that provides a closer experience to a real UNIX command line, like Linux and OS X do.

You have a couple of options here. The easiest would be to install Cmdr, which provides Git integration, custom prompt and color schemes out of the box. For most, this will be more than enough to get started with all major web development tooling. It cannot, however, do any of the ZSH and Z that we will be exploring below.

For a full-blown UNIX emulation, there is Cygwin which allows us to run all UNIX commands as well as to work with Oh My ZSH. It’s not for the faint of heart, but if you are fairly comfortable with Windows, it might be worth trying out. Alternatively there is the all-in-one OH MY CYGWIN, which might speed up your installation process.

Use ZSH and Oh My ZSH

When you start a terminal application, whether it be on your server or your local computer, it is running a shell called Bash. Bash is by far the most popular shell and comes with pretty much every UNIX-based operating system. There are, however, alternatives to Bash that make using the terminal faster and more comfortable for web developers.

One of the most popular shells with web developers is the Z shell, or ZSH. Along with that, we use a ZSH framework named Oh My ZSH.

Installing Oh My ZSH is very simple. Simply run the following command and restart your terminal:

curl -L https://raw.github.com/robbyrussell/oh-my-zsh/master/tools/install.sh | sh

Now, each time you start a terminal session, you will be using ZSH rather than the default Bash!

ZSH Settings

Before jumping into the next few sections, we need to know about ZSH settings. These are stored in a .zshrc file located in your home directory. It’s a hidden file, so you might not see it in your home directory, but you can view it by running open ~/.zshrc from the terminal. Swap out open with your favorite editor command, such as nano , subl or vim .

Now, we aren’t making any changes to this file just yet, but leave it open. Whenever you make a change to this file, you need to source it in order for the changes to take effect in your terminal. To do this, you can either close the current tab and open a new one or run the source ~/.zshrc command from the terminal.

Terminal Customization

Customizing what your terminal looks like is one of the best things you can do. Not only does it make you look like a bad-ass coder, but it can greatly improve readability via different colors. It can also improve productivity by displaying important information related to file path, Git status and more!

Prompts

Prompts are the line(s) of text shown when you are about to type something into the terminal. Your prompt provides useful information related to your project, such as the current version of Ruby, Node.js and so on, the current status of your Git repository, the outcome of the last run task, as well as the current working directory.

You can customize your path into oblivion, but chances are that someone has created a prompt that already suits your needs.

Your ZSH theme is set in the few lines of your .zshrc file. Look for something like ZSH_THEME="robbyrussel" — this is the default theme that comes with ZSH. I recommend setting this to ZSH_THEME="random" , which will randomly assign a theme each time you open a new terminal tab or run source ~/.zshrc . Run this a few times until you find one you like; you can find the current theme name by running echo $ZSH_THEME .

You can browse all the ZSH themes and prompts in the wiki. Because there are hundreds of themes, not all of them come with ZSH by default. Any you want will need to be downloaded and placed in ~/.oh-my-zsh/themes ; Because this is a hidden directory, you can access it by running open ~/.oh-my-zsh/themes .

Here are a few popular themes:

Note: Many of these themes require a patched font to display the arrows and Git icons. You can download the fonts on GitHub; then, make sure to set them in your iTerm2 settings.

Color Schemes

Now, the prompts define the standard color to be used, but we’ll use iTerm2 themes to customize what those colors actually look like. By default, the themes come with your basic red, green, yellow and blue, but we can tweak those to be the exact variants that we want.

You can think of these colors as variables we can tweak. (View large version)

You can edit the colors or even make your own theme in “Preferences” → “Profiles” → “Colors,” or grab one of the existing themes already out there.

The ZSH Cobalt2 prompt also comes with an iTerm2 theme, and you can find hundreds of them with a GitHub search; Bastien Dejean’s repository in particular houses a few interesting ones.

File Tabbing

So, now that our terminal is looking great, what can we actually do with ZSH and related tools? Probably one of the most useful features of ZSH is that it enables us to list and tab through files and folders. If you have ever tried to perfectly spell the name of a file, struggled with the case or fought with an impossibly long list of folders with spaces in it, you know the pain and limitations of Bash.

Folder and file tabbing works with any terminal command: cd , trash , cp , open , subl , etc. But for the purposes of this tutorial, let’s use cd for folders and open for files.

Go ahead and type cd (note the space after cd ), and hit the “Tab” key twice. You can now use your arrow keys to move over, up and down through the files and folders. To select a folder, hit “Return.” You can now hit “Tab” and “Tab” again to discover subdirectories or hit “Return” to run the command.