5 Steps to a Beautiful Terminal That You’ll Love Using
Let’s give your command line a makeover
If you’re here, chances are you’re not a big fan of your terminal, and entering commands is probably on your painful-moments list as a developer. Been there. But we spend a significant amount of time in there, so we’d better make it enjoyable to be as productive as we can.
And as you probably spent a significant amount of time customizing your code editor — choosing the best font, installing the Material Icon theme to have great-looking files and folders, and choosing the best extensions out there — well, there’s no reason not to give your terminal a little makeover, too.
I customized mine referencing several different articles on the web, docs, and troubleshooting forums. I always found those articles were going far too deep in technical twists while all I wanted was to make my terminal more friendly to use quickly. So I thought I’d make an article in this spirit of keeping it simple for everyone.
At the end of this article you, too, will look for any reason to hit the command line, so let’s begin!
Screenshot of my customized terminal after applying the configs explained here
There are several terminal emulators out there, and even though other emulators like iTerm2 seems faster (at the time of writing this article), it’s only for Mac users. I wanted to make this post useful for everyone, so I’m going for Hyper.
Hyper is cross-platform (it’s packaged with Electron to achieve this), and version 3 is a huge improvement in terms of performance. It was indeed their prime concern for building v3 — you can read more about this new version of Hyper on their blog. And it’s icon has only gotten more beautiful. So download Hyper, and let’s move on.
1. The Terminal: Setting Up Hyper
Hyper is cross-platform (it’s packaged with Electron to achieve this), and version 3 is a huge improvement in terms of performance. It was indeed their prime concern for building v3 — you can read more about this new version of Hyper on their blog. And it’s icon has only gotten more beautiful. So download Hyper, and let’s move on.
Hyper terminal download page
Now, a bit of configuration. First, we need to go to the .hyper.js file (notice the . at the beginning of the file name), which is located in your /Users/<your_username> folder. So to open it:
Now, a bit of configuration. First, we need to go to the .hyper.js file (notice the . at the beginning of the file name), which is located in your /Users/<your_username> folder. So to open it:
code /Users/<your_username>/.hyper.js
The file contains a configuration object, where you can choose your font and add styles, plugins, and more. When you first open it, it should look something like this:
The file contains a configuration object, where you can choose your font and add styles, plugins, and more. When you first open it, it should look something like this:
Configuring Hyper — default content of .hyper.js file
Theme
The Hyper store has lots of themes available for you to spend hours browsing. You can even have a Pikachu theme. I personally chose hyper-one-dark because it looks a lot like my VS Code theme:
To install it:
hyper i hyper-one-dark
And then enable the theme by adding its name into the plugins array outside of the config object in the .hyper.js file:
And then enable the theme by adding its name into the plugins array outside of the config object in the .hyper.js file:
.hyper.js file
Font
Let’s make a few changes, like setting the font size to 14 and the line height to 1.2 (if they’re not already set this way).We’ll also install our own font by setting the font family to FuraCode Nerd Font. This is a great looking nerd font that you can download here (or choose another from all the ones available on this site).
Notice that it’s spelled “FuraCode” with a “u.” That’s because when you download FiraCode Nerd Font from this site, you get a font starting with “Fira” and another starting with “Fura.” Choose your favorite.
Also be careful here. Notice the list of fonts is set between single quotes, so you can add fonts with a several-word name surrounded with double-quotes. Make sure you have those single quotes surround your whole list of fonts; otherwise, it won’t work.
Ligatures
Now that we have a great font, we want to enable ligatures, which is a big word to represent two characters associated with another to form a new single character. Geoffrey Dorne defines the concept very clearly here, and you can find visual examples here.To enable them, we need the hyper-font-ligatures plugin. First, install it:
hyper i hyper-font-ligatures
Second, you need to enable the plugin by adding its name to the plugins array and disabling WebGL rendering (as explained here) inside of the config object in .hyper.js , like so:
Second, you need to enable the plugin by adding its name to the plugins array and disabling WebGL rendering (as explained here) inside of the config object in .hyper.js , like so:
.hyper.js file
2. The Shell: Setting Up Zsh
From macOS Catalina forward, Apple has replaced Bash (Bourne-again shell) with Zsh (Z shell) as its default shell. This is good news for us since this is the shell we want to use for its higher-customization possibilities with supports for themes and plugins. But there is more, and this article does a great job at comparing Zsh and Bash features if you want more on the subject.
If you’re not yet on macOS Catalina, go ahead and install Zsh (for which you need brew):
brew install zsh
Add it to the config object in the .hyper.js file:
Add it to the config object in the .hyper.js file:
Setting Zsh as shell in .hyper.js file
Now that we’re all on the same page, we can start with customizing our prompt.
3. The Prompt: Setting Up the Spaceship Prompt
The prompt is the text you see before your commands, and, by default, it’s pretty poor and gives you just the basic file system information. Using the Spaceship prompt, you get a lot more information, such as:
- Current Git branch and rich repo status
- Current Node.js/Ruby/Python/Swift/Docker/… version
- Package version (if any)
- Prompt character turns red if the last command exits with nonzero code
- And much more
npm install -g spaceship-prompt
As indicated on the Spaceship prompt doc, this command should link spaceship.zsh as prompt_spaceship_setup to your $fpath and set the prompt spaceship in .zshrc.
You need to reload your terminal after this.
Note: If you don’t get the spaceship prompt using npm, try other installations — I went with the Oh My Zsh option once, and it worked like a charm (while for some wild reason I was struggling to make it work with npm).
Now your prompt should look like this:
Now we’ll install zsh-syntax-highlighting, which enables highlighting for commands, making them a lot more readable and helping them to avoid typos.
Following its install instructions for macOS:
2. Install the patched fonts of the Powerline Nerd font and/or Font Awesome, which we already did at the font section earlier.
3. Install the colorls Ruby gem with:
As indicated on the Spaceship prompt doc, this command should link spaceship.zsh as prompt_spaceship_setup to your $fpath and set the prompt spaceship in .zshrc.
You need to reload your terminal after this.
Note: If you don’t get the spaceship prompt using npm, try other installations — I went with the Oh My Zsh option once, and it worked like a charm (while for some wild reason I was struggling to make it work with npm).
Now your prompt should look like this:
Spaceship prompt
Syntax Highlighting
Now we’ll install zsh-syntax-highlighting, which enables highlighting for commands, making them a lot more readable and helping them to avoid typos.
Following its install instructions for macOS:
brew install zsh-syntax-highlighting
This command should add the source at the end of your .zshrc file, which should be located (at least from macOS Catalina) in your /Users/<your_username> folder.
Open a new terminal session to see the commands highlighted.
If it doesn’t, you’ll need to add it manually at the end of this file following the instructions listed here.
We’ve arrived at my favorite part of all: Using Color LS, you’ll add colors and pretty icons to your files and folders when you list then in your command line using the ls command. To install it, we just follow the instructions described here:
This command should add the source at the end of your .zshrc file, which should be located (at least from macOS Catalina) in your /Users/<your_username> folder.
Open a new terminal session to see the commands highlighted.
If it doesn’t, you’ll need to add it manually at the end of this file following the instructions listed here.
4. Color It Up With Color LS
We’ve arrived at my favorite part of all: Using Color LS, you’ll add colors and pretty icons to your files and folders when you list then in your command line using the ls command. To install it, we just follow the instructions described here:
2. Install the patched fonts of the Powerline Nerd font and/or Font Awesome, which we already did at the font section earlier.
3. Install the colorls Ruby gem with:
gem install colorls
4. Enable tab completion for flags by entering the following line to your .zshrc shell configuration file. So open /Users/<your-username>/.zshrc in your code editor, and add the following line:
4. Enable tab completion for flags by entering the following line to your .zshrc shell configuration file. So open /Users/<your-username>/.zshrc in your code editor, and add the following line:
source $(dirname $(gem which colorls))/tab_complete.sh
And Color LS is ready for use! Now we can customize colors by modifying the default dark_colors.yaml file.
First copy the dark_colors.yaml files from $(dirname $(gem which colorls))/yaml into ~/.config/colorls using the following command:
And Color LS is ready for use! Now we can customize colors by modifying the default dark_colors.yaml file.
First copy the dark_colors.yaml files from $(dirname $(gem which colorls))/yaml into ~/.config/colorls using the following command:
cp $(dirname $(gem which colorls))/yaml/dark_colors.yaml ~/.config/colorls/dark_colors.yaml`
Then you can open the file in your code editor and change the colors as you please. Personally, I loved the colors chosen by Robert Cooper in his great article, which was one of the several posts on which I relied upon for my own configuration, so I reused its dark_colors.yaml file which he so kindly shares in this gist.
Finally, let’s create three aliases to list different degrees of information depending on our needs. Open your .zshrc file in your code editor, and add the three following lines:
Then you can open the file in your code editor and change the colors as you please. Personally, I loved the colors chosen by Robert Cooper in his great article, which was one of the several posts on which I relied upon for my own configuration, so I reused its dark_colors.yaml file which he so kindly shares in this gist.
Finally, let’s create three aliases to list different degrees of information depending on our needs. Open your .zshrc file in your code editor, and add the three following lines:
Defining aliases for listing files and directories in the terminal — .zshrc file
Now if you hit the ls command your files and folders have a nice looking blue coloring like this:
As I want to keep this post simple and straightforward, I won’t go into too many plugins here. Here are my three favorites, and if you want to browse for more, you can go check all the plugins available in the Hyper store.
Active Tab Icon
You might have noticed the little fox emoji in my tab title in the screenshot at the beginning of this post? This is thanks to this plugin.
1. Install the hyper-active-tab plugin:
Colorls files and folders coloring effect
And you should be set regarding the theming part! Now let’s add some features to enhance our command experience.
5. Add Features With Plugins
As I want to keep this post simple and straightforward, I won’t go into too many plugins here. Here are my three favorites, and if you want to browse for more, you can go check all the plugins available in the Hyper store.
Active Tab Icon
You might have noticed the little fox emoji in my tab title in the screenshot at the beginning of this post? This is thanks to this plugin.
1. Install the hyper-active-tab plugin:
hyper i hyper-active-tab
2. Add it to the plugins array in your .hyper.js file:
2. Add it to the plugins array in your .hyper.js file:
Add plugin name to the plugins array — .hyper.js file
3. Add the activeTab property with the emoji of your choice inside the config object of your .hyper.js file:
You might not want that, but nine times out of ten, when I open a new tab in my term, it’s to perform an action on the same project I’m working on. Having to navigate to the folder each time is wasted time, so the hyper-samewd plugin is very welcome.
1. Install it:
Setting your active tab icon — .hyper.js file
Open new tab in the same directory
You might not want that, but nine times out of ten, when I open a new tab in my term, it’s to perform an action on the same project I’m working on. Having to navigate to the folder each time is wasted time, so the hyper-samewd plugin is very welcome.
1. Install it:
hyper i hyper-samewd
2. And add it to the plugins array in your .hyper.js file:
To search text in your terminal. As usual:
1. Install it:
2. And add it to the plugins array in your .hyper.js file:
And you’re set! I hope you enjoy this new custom terminal experience as much as I do. Don’t hesitate to share your favorite plugins, themes, or configs in the comments.
Happy command typing!
2. And add it to the plugins array in your .hyper.js file:
Add plugin name to the plugins array — .hyper.js file
Restart Hyper after this and make sure your plugins array in your .hyper.js file now includes hyper-samewd . If it’s still slow and too much of a pain for you which I totally understand, I suggest you open an issue in hypersamewd repo and turn it off in the meantime.
Ctrl-F for your terminal
To search text in your terminal. As usual:
1. Install it:
hyper i hyper-search
2. And add it to the plugins array in your .hyper.js file:
Add plugin name to the plugins array — .hyper.js file
And you’re set! I hope you enjoy this new custom terminal experience as much as I do. Don’t hesitate to share your favorite plugins, themes, or configs in the comments.
Happy command typing!
Written By Medium Writer
WRITTEN BY
Comments
Post a Comment