Customize Your Mac Terminal

Original Source: https://medium.com/@marouen.helali/customize-your-mac-terminal-5baa3ec308f0

Learn how to personalize your Mac terminal in 5 simple steps.

Customizing your terminal can simplify a lot of your tasks, and set you up with basic shortcuts that will save you from some headaches, especially if you spend a lot of time using CLIs. We can break down this process into 5 major steps: Picking a terminal program, adding terminal plugins, picking a shell program, adding shell plugins, and configuring your terminal editor. This article will walk you through each of the steps in detail.

1. Pick a terminal program: hyper.js 🤖

Default Mac terminal. It comes natively with every Mac

Each user is free to choose their favorite terminal software since each program has its own pros and cons. However, they generally do not differ too much, except for plugins and such. My favorite terminal interface is the hyper terminal. It is very customizable and allows us to easily add powerful plugins (which will be covered in part 2). To install hyper, navigate to the website and click the download button. Follow the instructions on the screen to finalize the installation of hyper.

Last installation step

Now search for Hyper, and launch it.

Searching for Hyper after the installation

Hyper terminal

It is worthwhile to mention that the native Mac terminal is also a great lightweight option that also allows us to add plugins and optimizations. Another popular third party software is the iterm2 terminal.

2. Add some plugins 🔌

Hyper is very customizable. It offers a growing list of plugins. Installing a new plugin is simple. All you need to do is edit your .hyper.js file. Note:

Many terminal programs allow you to customize some settings and parameters about them via their "dotfiles". Dotfiles stand for the config files that start with a dot and are usually located within your root directory.

Based on the above note, we can deduce that the .hyper.js file came from the installation of the hyper terminal. We will also end up with more dotfiles as we install more programs.
Use your favorite editor to open the .hyper.js files (located in your system's root directory ~/.hyper.js). For this tutorial, we will use Vim (we will also be adding some extensions to improve the vim experience in part 5). If you are not familiar with vim, take a look at my getting started with Vim article for a quick cumulative intro to the topic.

vim ~/.hyper.js

Let's start by adding one of my favorite Hyper plugins: hyper-pane. After opening the config file, scroll down to the bottom of it and you will find a plugins array. Add a new string to it with the value of your chosen plugin.

Adding hyper-pane to plugins array via vim

Relaunch the program and hyper will reload itself after installing the plugin. Congrats you installed your first plugin! Hyper-pane is simple to use, but the shortcuts can be easily forgotten (speaking from experience lol). Below are the most important commands, feel free to copy them to your notes:

Vertical Pane: CMD + D
Horizontal Pane: CMD + SHIFT + D
Close Pane: CMD + W

Now that you know how to add plugins, knock yourself out by adding any new plugins you'd like, here is a nice cumulative list of very useful plugins:

plugins: [
     'hypercwd',
     'hyper-alt-click',
     "hyper-search",
     "hyper-pane",
     "hyper-active-tab",
     "hyper-highlight-active-pane"
   ],

All these plugins are useful, for example, Hypercwd allows you to open new tabs at the same directory you were in. You can learn more about how to use each plugin, and their functionality by looking at the specific plugin details within the list of plugins.

Full list of favorite plugins

3. Installing a different terminal shell 🐚

Now that you have a powerful terminal, let's equip you with the best shell out there. Mac's default command-line shell is called bash. Bash is great, but it will be lacking some of the performance improvements, extensions, and updates that come from more optimized, open-source shells such as the almighty oh-my-zsh. You can install it by running:

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

Feel free to refer to the Github README.md for more details about the installation. Follow the installation steps, restart your terminal, and boom! You now have zsh! Note that will this installation brings a new dotfile (.zshrc).

4. Add zsh plugins 🔌

The main reason for choosing the zsh shell might just be its plugins. This step is the most valuable of all. Just like we edited the .hyper.js to add some plugins to the hyper terminal, we will be editing the .zshrc to add useful tools:

vim ~/.zshrc

What default .zshrc looks like. Source: https://github.com/ohmyzsh/ohmyzsh/blob/master/templates/zshrc.zsh-template

The list of zsh plugins is exhaustive. However, the most indispensable plugins are these:

plugins=( 
    git 
    zsh-autosuggestions 
    zsh-syntax-highlighting 
)

Once you are done editing your .zshrc, you will need to source your .zshrc for any changes to take effect:

source ~/.zshrc

Sourcing your .zsh and cloning plugins' repos

You might encounter: plugin 'zsh-autosuggestions' not found. This is normal because unlike hyper (Javascript-based) which automatically takes care of doing the plugin imports for us, we will need to download the plugins ourselves. We do it by cloning the source for the plugin into the dedicated zsh plugin directory via these commands (for the two above plugins):

# Download zsh-autosuggestions
git clone https://github.com/zsh-users/zsh-    autosuggestions.git $ZSH_CUSTOM/plugins/zsh-autosuggestions
# Download zsh-syntax-highlighting
git clone https://github.com/zsh-users/zsh-syntax-    highlighting.git $ZSH_CUSTOM/plugins/zsh-syntax-    highlighting

Zsh auto-suggestions will allow you to use the right arrow to fill commands based on your terminal history, while syntax-highlighting will highlight in green commands that are recognized by your shell, and in red those that are expected to error from syntax issues. Here is a quick look at the two plugins:

Zsh auto-suggestions demo

Zsh syntax-highlighting demo

It might be fun to change the .zsh theme. Here is the long list of themes. You can do this simply by updating the theme variable in the .zsh file:

vim ~/.zshrc

Finally, it might not be a bad idea to scroll through the rest of the parameters and options within the .zshrc file. It is very well documented and you might find a setting that will appeal to your usage.

5. Tweak your text editor: vim 📝

In this section, I will be using vim (staying within the terminal), but keep in mind that editing other popular text code editors such as VSCode is just as similar (update your .vscode config file).

vim ~/.vimrc

You might have some sample configuration there, or it could be empty. In either case, a very neat vim config (that I personally use) is presented in this gist. You can copy it and paste it into your .vimrc file. You can reload your terminal, and open vim again, and you will see the new settings such as line numbers, and separate variable colors taking effect.

To the left is Vim after adding the gist config. To the right is the original look of Vim

In conclusion, editing your terminal is not much different from setting up your favorite software workspace on your computer. It is just a matter of picking an adequate program for your functions, learning how to use it, and finally learning how to configure it so you can get the most out of it by simplifying and automating its usage.

Source: https://giphy.com/gifs/season-17-the-simpsons-17x10-3orif2MpoMCp4IVXKU

Cover source: https://unsplash.com/photos/zDxlNcdUzxk