Make your terminal beautiful - HYPER
Tags: webdev, terminal, hyper, vercel
Published: 2021-06-19 14:19:42

**Hello Developers🤩🤩🤩**

This week, I am going to show you how to **beautify your terminal**.

I am very excited✨ about this topic as I always wanted my terminal to stand out and look amazing.

To be **consistent and beautiful** on windows and macOS and Linux, I started using **hyper**.

**[Hyper installation link](https://hyper.is/)**

## **Table Of Contents**
* [Introduction](#introduction)
* [Connect Hyper to bash](#hyper-to-bash)
* [Beautify hyper](#beauty)

### Hyper - Web based terminal <a name="introduction" />
* Hyper is an Electron-based terminal.
* Built on HTML/CSS/JS.
* Fully extensible.

I am a web developer and I am amazed at how they made such a powerful terminal.

Okay enough of talking, let's see how to config the **hyper** terminal.

### Connect hyper to bash <a name="hyper-to-bash" />

We have to connect hyper to bash to use bash shell commands in it.

I assume that you have Git for Windows installed. if you don't, [follow this guide](#https://git-scm.com/download/win). With that done, follow the steps:

* hyper automatically add PATH to your environmental variables, check if they exist or not, and restart your PC after installing **Hyper**.
* If PATH is not set then set by clicking the top left burger menu (☰) ⟹ Plugins ⟹  install Hyper CLI command in PATH.
* Now, we just have to copy-paste the settings, [from here](https://gist.github.com/coco-napky/404220405435b3d0373e37ec43e54a23).

![Hyper config file Image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wkge1wild6qad0xscdff.png)

* After coping open hyper then press ctrl + , (comma) or you can go to the top left burger menu (☰) ⟹ Edit ⟹ Preferences.
* Select all and paste the copied settings.
And kaboom 💥 , you have successfully config **hyper** with git bash.

### Beautify hyper (Installing basic plugins) <a name="beauty" />

* Install the beautiful theme of your choice, check out all the themes. `hyper install [theme name]`.
* Add beautiful borders `hyper install hyperborder`.
* Make hyper transparent `hyper install hyper-opacity`.
* Add icon to new tabs `hyper install hyper-tab-icons`.
* Add search functionality to hyper, `hyper install hyper-search`.
* Typ in style by installing hyperpower, `hyper install hyperpower`.
* To open the same path in the new tab, `hyper install hypercwd`.

### References
* [Git Bash Config file](https://gist.github.com/coco-napky/404220405435b3d0373e37ec43e54a23), this repo is still active and very helpful.
* [Hyper official website](https://hyper.is/)
* [Hyper official plugins](https://hyper.is/plugins)
* [Hyper official themes](https://hyper.is/themes)
* [Hyper and Github config old blog post](https://myrlandnu.medium.com/guide-to-install-and-configure-hyper-for-windows-10-52a829c97b25)

### My terminal look 🤪🤪🤪.

![Terminal look](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qkoagk6o656jtsr9pjq2.png)

* I config my terminal to only show, **user name**, **current folder** and **time** then **new line** and a custom char (⟹)

Closing here 👋👋👋
> This is **Shareef**.
> [My bash config file](https://github.com/shareef99/blogs/blob/master/Hyper/.bash)
> [My Hyper config file](https://github.com/shareef99/blogs/blob/master/Hyper/hyper.js)
> My [Portfolio](https://portfolio.shareef.vercel.app/)
> Twitter [ShareefBhai99](https://twitter.com/shareefBhai99)
> [Linkedin](https://www.linkedin.com/in/nadeem-shareef-7a8394182/)
> My [other Blogs](https://dev.to/shareef)