Hyper Install Plugins

[Revised at 2020-07-07]

• Hyper Install Plugins Windows 10
• Hyper Install Plugins Download

Probably, the first thing that developers do after getting a new computer is… terminal setup. I wanted to share with you my current development setup - here, terminal setup.

Talk is cheap, let's show some code.

Plugins: 'hyperterm-material', 'hyperterm-blink', 'hyper-transparent' Got it working! Took me a sec to realize that the transparency controls where in the view menu of the OSX toolbar. This plugin allows setting Hyper terminal window transparency, background color and on macOS a dropdown menu for setting vibrancy and transparency., plugins: 'hyper-transparent' Hyperterm Tabs.

1. Terminal - Hyper.js

1.1 Download and install Hyper.

Let's go to Hyper™ page and download a version for your OS.
I downloaded a Mac OS version. When we extract zip file Hyper-3.0.2-mac.zip we get a Hyper.app file. To install it just drag it to Applications folder. Now, by using the Spotlight Search (CMD + SPACE) type hyper and there should be a Hyper application on the list.

The Hyper's window looks like this in my case:

Don't worry if your prompt looks differently. We are going to take care of it later. You might be using a different shell, different config at the beginning.

1.2 Basic configuration

Now, the magic happens. Hyper's config is defined as ~/.hyper.js file. File is structured like this:

This is awesome information! We have complete control over our settings.
Let' start with basic config.

1.2.1 Font

• fontSize - personally, I prefer a little bigger font, let's use 13. Later on you can change the font size in the terminal by using CMD + + and CMD + - keyboard shortcuts.
• fontFamily - let's use a really nice font with ligatures - FiraCode . I attach an overview below:

Installing instructions are described here. I prefer the manual way (for Mac OS):

• Download the latest version of the font from Github releases tab: Releases · tonsky/FiraCode · GitHub - As for now, it's Fira_Code_v5.2.zip .
• Extract the archive and go to ttf directory.
• Select all fonts .ttf files , click right , then Open and select Install Font

Now, when our font is installed let's set it in our Hyper terminal. The config file should be placed in the home directory:

At this point we enabled Fira Code font in the terminal but ligatures are still not enabled. Let's turn them on.
We need to install a dedicated plugin: hyper-font-ligatures:

Plugin should immediately appear in our config file:

To enable ligatures we need to add one more line to the config (See issue #8 and zeit/hyper#3607 for more details):

Now, everything should work as expected and we should see new font with ligatures in the terminal:

1.2.2 Theme

With Hyper we can download multiple themes that are available here: Hyper Store - Plugins. I'm going to use Hyper Store - hyper-one-dark theme. To install it, just run:

With my current shell it looks like this:

1.2.3 Search Plugin

To be able to search for a keyword in the terminal we need to install a dedicated plugin: Hyper Store - hyper-search

This time we need to restart the Hyper completely. After the restart we can start using our plugin:

1.2.4 Pane Navigation Plugin

If we want to jump between panes in the terminal we need to add Hyper Store - hyper-pane plugin:

How it works?

1.2.5 Open new tabs with the same directory

When opening new tabs, I often want to be in the same directory. To be able to do it, let's add Hyper Store - hypercwd:

1.2.6 Mark active tab by adding a symbol to it

Sometimes when we have multiple tabs opened it might be difficult to notice which one is active at the moment. Make our life easier and add Hyper Store - hyper-active-tab:

I'm going to use a custom symbol:

Now, it looks like this:

1.2.7 Showing CPU, RAM, battery stats

If we want to track our CPU, Memory, Battery resources we can add: GitHub - Hyperline/hyperline: ✨ Status line plugin for Hyper ✨:

After full reload new status line will appear:

There is even a Spotify plugin showing the currently played song.

1.2.8 Bonus: feel this power!

Javascript enables users to create almost anything. Let's see what Hyper Store - hyperpower can do:

This one is quite showy:

There are a lot of other plugins and the list is rapidly growing. For more plugins check especially those two sources:

• Official plugins store: Hyper Store - Plugins
• A repository with the list of Hyper plugins: https://github.com/bnb/awesome-hyper

2. Shell - ZSH + starship prompt

There are a few most popular shells for linux:
- Bash Shell - Bash (Unix shell) - Wikipedia
- Tcsh/Csh Shell - https://pl.wikipedia.org/wiki/Tcsh
- Ksh Shell - https://pl.wikipedia.org/wiki/Korn_shell
- Zsh Shell - https://pl.wikipedia.org/wiki/Zsh
- Fish - https://pl.wikipedia.org/wiki/Friendly_interactive_shell

After experimenting with some shells I decided to use ZSH.

2.1 Installing ZSH

For Mac OS:

If you don't have a homebrew installed you can add it (official installation docs here):

Homebrew is a package manager for macOS.

After installing ZSH check its version:

To use ZSH with Hyper we need to specify it in the config (~/.hyper.js):

At this point Hyper should start with freshly installed ZSH as default shell.
We can move on to the next point.

2.2 Installing starship prompt

There are many different prompts that can be used. After testing some of them I decided to stay with GitHub - starship/starship: ☄️🌌️ The minimal, blazing-fast, and infinitely customizable prompt for any shell!

2.2.1 Install

There are a few different ways to install starship described in the documentation: GitHub - starship/starship: ☄️🌌️ The cross-shell prompt for astronauts.

For Mac OS:

Check whether it's working:

To enable starship prompt we need to add it to ~/.zshrc. Add following code to the end of ~/.zshrc file:

After restarting the Hyper our terminal should look like this:

Unfortunately, we don't have any syntax highlighting, commands completion, history enabled, aliases and a few other things. We need to adjust it.

2.2.2 Syntax Highlighting

There is another great repo with ZSH plugins that you should check out: GitHub - unixorn/awesome-zsh-plugins: A collection of ZSH frameworks, plugins & themes inspired by the various awesome list collections out there. I searched it for a syntax highlighting plugin.
I'm going to use GitHub - zdharma/fast-syntax-highlighting: (Short name F-Sy-H). Syntax-highlighting for Zshell – fine granularity, number of features, 40 work hours themes.

I will install it by cloning the repo (it will allow later to easily keep it up-to-date by pulling the master):

If you couldn't clone the repo and got error like:

Videosolo blu ray player 1 1 8t. Then try using 'Clone with HTTPS', it would look like this:

After those few steps we should have already syntax highlighting enabled:

2.2.3 Setting completion plugin

We are going to use already defined completion.zsh from GitHub - robbyrussell/oh-my-zsh:

Additionally, this time we need to add a few more lines to ~/.zshrc file:

Restart the terminal and completion should work now:

Hyper Install Plugins Windows 10

You might ask, why I don't use Oh My Zsh? It feels overloaded for me. I like to have control over the tools I use. I prefer to build things starting from small parts and build on that something bigger, step by step.

Hyper Install Plugins Windows 10

You might ask, why I don't use Oh My Zsh? It feels overloaded for me. I like to have control over the tools I use. I prefer to build things starting from small parts and build on that something bigger, step by step.

2.2.4 Setting autosuggestions plugin

Except completion feature it's nice to have also suggestions. When you start typing there is a suggestion displayed in the command line. Let's use GitHub - zsh-users/zsh-autosuggestions: Fish-like autosuggestions for zsh plugin.

Install it:

It works really nicely by suggesting the rest of the command, you can use arrows to accept suggested command:

2.2.5 Commands history config

Here again, we are going to use a ready config from oh-my-zsh:

Now, by using the Up Arrow we can go back to our previous commands. We can also use backwards search by clicking CTRL + R:

2.2.6 Colorized ls output

Right now when we want to list a directory's content we have a raw gray list:

It doesn't look good. Let's use some colours to make it more readable.
When you go to ls command's manual there is a -G option:

But, we are not going to add -G each time when we want to use lscommand. We can create an alias for it:

It looks better now:

2.2.7 Key bindings

When working in the terminal on daily basis it's good to have shortcuts enabled. Going back to the beginning of the line (CMD + LEFT ARROW), or to the end (CMD + RIGHT ARROW)?

Let's install key bindings:

2.2.8 Aliases

Shell aliases play a huge part in productivity when using a command line. If you have well defined shortcuts it allows you to be really efficient and quick when developing new apps, scripts, etc.

A few useful aliases that I often use are listed below:
~/.zsh/aliases.zsh

As a bonus, I thought that sharing git aliases might also benefit you. The list below might seem to be quite broad but I added comments explaining what each of them is meant to be doing.
~/.gitconfig

Summary

I hope you will find this article useful and it will help you boost your productivity in the command line. It's not an ultimate setup, rather treat it as a beginning or enhancement for your current setup. The amount of available tools, plugins, configs is simply overwhelming. Each user has different use cases, different technologies that he uses.
I tried to focus on the common ground which could be used by anyone.

If you know and recommend some of the tools you use and can't live without please let me know in the comments.

Photo by Анна В on Unsplash

Hyper is a terminal built on web technologies, based on JavaScript, HTML and CSS providing a beautiful and extensible experience for command-line interface users. Hyper achieves a lot of its speed and functionality thanks to the power of hterm underneath, the terminal emulator of the Chromium project.

If you're just getting started with Hyper terminal I'd suggest you definitely head to Hyper website, they have an extensive installation guide and usage documentation

Today we'll be looking at the best packages and themes to make our Hyper terminal much cooler.

Prerequisites

Note

1. Important words are highlighted.
2. Bold words emphasis a point.
3. Previous / Next code appears like this . . . .

4. Material Theme for Hyper are link to package/theme npm repository.

This project requires Node.js v6.11.0 LTS or higher and Hyper installed. Now that you have completed the prerequisites, let's get started!

Installing Packages And Themes

Hyper primary focus has been around speed, stability and the development of API for extension authors. Extensions are available on npm and you can search hyper using npm search command.

Then edit ~/.hyper.js and add it to plugins

Fully reload Hyper (Cmd + Shift + R) and Hyper will show a notification when your modules are installed to ~/.hyper_plugins.

Themes

Material Theme for Hyper

Hyper Snazzy

Hyper Materialshell

Hyperterm Monokai

Verminal

Solarized Dark theme for Hyper

Dracula for Hyper

Hyper Pokemon

Packages

Git Rocket

A fun plugin that shows a red rocket ship launching from the right-bottom corner of your terminal whenever you push code to Github.

Hyper Power

This plugin turns your Hyper terminal on power mode, blasting sparks as you type away.

Hyperline

A status line plugin that shows useful system information such as free memory, total memory, battery level, system uptime, CPU usage, hostname and network upload/download speed. Iglasses 3 3 1 – webcam effects and enhancement utility.

Hyper CWD

This plugin allows opening new tabs with the same current working directory as the current tab.

Hyperterm Summon

This plugin opens your terminal window using a system-wide configurable hotkey. It's especially useful on macOS to toggle between previously active application and your Hyper application.

Hyper Statusline

This statusline plugin shows clickable and useful information when working with a Git enabled project.

Hyper Spotify

My favorite, if you use spotify this plugin displays currently playing song and a play/pause at the bottom of the terminal but the position of this bar can be configured.

Hyper Pane

This plugin enhances your terminal with pane navigation, just like you'd find with VIM. It supports navigating panes with arrow keys, jumping to a specify pane using digits and temporarily maximizing a pane.

Hyper Tabs Enhanced

This plugin enhances your Hyper terminal tab, showing tab icons, colors and activity indicator.

Hyper Install Plugins Download

Hyper Transparent

This plugin allows setting Hyper terminal window transparency, background color and on macOS a dropdown menu for setting vibrancy and transparency.

Hyperterm Tabs

Tabs reordering makes grouping similar tabs possible, this plugin enables that feature and provides configurable keyboard shortcuts.

Conclusion

I have been getting more familiar with not only Hyper, but packages and themes built for Hyper, I hope you feel this way too. Any combination of theme + package can be used so keep combining or switch every week!

What are your favorite themes, packages, or theme + package? I'm looking forward to your comments, questions or thoughts in the comments below. I would love to see them.

And oh yeah, have fun :)