The two primary tools for web developers are the Code Editor and the Command Line, and the efficient use of this tools can lead to a better productivity in your day to day tasks as a web developer.

This post is a step-to-step guide to set your command line up to have a better looking and user-friendly terminal that can help you boost your productivity.

Install iTerm2

The first step is to install iTerm2, which is a replacement for Terminal.

You can install it with Homebrew running the following command in your terminal

brew cask install iterm2

If you don't use Homebrew, you can download it directly from iTerm2.

Install oh-my-zsh

Oh my zsh is a framework to manage your shell configuration and it has a bunch of functions, helpers, plugins and themes that will make your command line look much better and will add some nice functionality to it.

To install it you can do it either with curl or wget pasting one of the following commands in your command line.

curl

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

wget

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

Change your Terminal's theme

One thing that you can do with oh-my-zsh is to change your Terminal's theme. To change the theme, you need to edit your .zshrc file running the following command in the terminal.

vi ~/.zshrc

After this, look for ZSH_THEME environmental variable, it looks like this:

ZSH_THEME="robbyrussell"

To change the theme, simply change the variable "robbyrussell" for the theme of your preference, you can find a list of themes here.

Plugins

In the same .zshrc file, you can add some oh-my-zsh plugins, there is a list of plugins in this link.

Look for the plugins variable in the document to add more. Notice that if you have more than one, you have to separate them with spaces not with commas.

plugins=(git dotenv)

By default, you will have the git plugin enabled, which will let you write commands shortcuts like the following:

gcmsg instead of git commit message
ga instead of git add

Be careful about adding lots of plugins since this can slow down your shell, you might not need that many.

Aliases

Aliases are very powerful and making use of them can turn you into a more productive developer by not spending that much time writing long commands or repetitive ones.

To create aliases you have to open your .zshrc file and navigate to the last section of it, and write them with the following format:

alias nr="npm run"
alias art="php artisan"
alias ls="ls -1"
alias gpf="git push --force-with-lease"

As you can see, writing nr is much faster than writing npm run every time you need to execute this command, you can also use it to add options to your commands, like gpf instead of git push --force-with-lease.

If you run alias in your terminal, you will get a list of all the aliases that you currently have registered.

Keyboard shortcuts

As you might have already noticed, if you want to delete, select or modify a command you can only move your caret character by character, by default, you can't move the caret to the end of the line or the word if you click ⌘ + → or ⌥ + →. But it can be done if you add the right Key Mappings and Hex Codes to your iTerm settings and it can be incredibly useful and save you tons of time. I'll show you how to do this.

First, open iTerm and go to iTerm preferences. Then, in the upper menu go to 'Profiles' and inside of 'Profiles', in the submenu, go to the 'Keys' section, as shown in the next image.

iTerm 'Profiles' preferences

Then click in the "+" icon, below the Key Mappings list and a menu will show to add a new keyboard shortcut.

Menu to add new shortcut

I find this next six shortcuts the most useful ones. You can add them following the last step and using this combinations of Shortcut-Action-Code found in the next table.

Keyboard shortcut Action Code Description
⌘←Delete Send Hex Codes 0x15 Deletes Whole Line
⌥←Delete Send Hex Codes 0x1b 0x08 Deletes One Word
⌥← Send Escape Sequence b Move to Last Word
⌘← Send Hex Codes 0x01 Move to the Beggining of the Line
⌥→ Send Escape Sequence f Move to Next Word
⌘→ Send Hex Codes 0x05 Move to the End of the Line

Last Tip

I'll leave this extra tip that will help you open, close and use your Command Line faster.

I like having a system-wide hotkey to show and hide all windows, this way you don't have to be navigating across all your opened windows, or use your mouse to open your terminal.

To do this, you have to go to your iTerm preferences and move to the Keys > Hotkey menu and simply input the key of your preference under the Hotkey input, I like setting the º key since it is easy to reach and not that commonly used.

iTerm preferences to set a system-wide hotkey

It is impressive all the things that can be done from the terminal, it is worth exploring it and finding more ways to optimize the use of this awesome tool. This is just an introduction to basic things that I believe every web developer should have, but there are many more that you can do and customize according to your preference and needs. I hope you keep exploring and don't forget to share what you find!