DEV Community

Cover image for Make your terminal beautiful - HYPER
Mohammed Nadeem Shareef
Mohammed Nadeem Shareef

Posted on • Edited on

Make your terminal beautiful - HYPER

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

Table Of Contents

Hyper - Web based terminal

  • 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

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. 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.

Hyper config file Image

  • 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)

  • 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

My terminal look 🤪🤪🤪.

Terminal look

  • 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
My Hyper config file
My Portfolio
Twitter ShareefBhai99
Linkedin
My other Blogs

Top comments (2)

Collapse
 
tinpham profile image
Bao.Tin

Can i hide the title bar in hyper

Collapse
 
kobfolson profile image
kobfolson

yep, install hyperminimal using npm and add to plugins