Hyper.js + Hyper.js Plugins + ZSH + Starship + Fira Code + Dark Theme - (macOS)

hyperjs.md

hyperjs_instructions.md

Instructions

Hyper.js

Installation

brew cask install hyper

Or, if you do not have homebrew (you should ;)): Download and install Hyper.js

Basic Configuration

Hyper’s config is defined in the ~/.hyper.js file (located in your home directory).

// Future versions of Hyper may add additional config options,
// which will not automatically be merged into this file.
// See https://hyper.is#cfg for all currently supported options.

module.exports = {
  config: {
    // choose either `'stable'` for receiving highly polished,
    // or `'canary'` for less polished but more frequent updates
    updateChannel: "stable",

    // default font size in pixels for all tabs
    fontSize: 12,

    // font family with optional fallbacks
    fontFamily:
      'Menlo, "DejaVu Sans Mono", Consolas, "Lucida Console", monospace',

    // default font weight: 'normal' or 'bold'
    fontWeight: "normal"

    // rest of the config
  }
  // rest of the file
};

Here we have complete control over our settings. Let's get it on!

Font

1. fontSize - I changed my fontSize to 13, but you can use the fontSize you prefer.

2. fontFamily - Let's use a really nice font with ligatures - FiraCode. Since the brew installation of this font might install an outdated version, we are going to install this one manually:

   1. Download the latest version of the font from the Github Releases tab
   2. Extract the archive and open the ttf directory.
   3. Select all .ttf files > right click > Open > Install Font
   4. Configure the font in the ~/.hyper.js file (with double quotes around Fira Code):

   module.exports = {
     config: {
       fontFamily:
         '"Fira Code", Menlo, "DejaVu Sans Mono", Consolas, "Lucida Console", monospace'
       // rest of the config
     }
     // rest of the file
   };

   5. To enable font ligatures, we have to install a Hyper.js plugin named hyper-font-ligatures. Write this in your Hyper.js terminal:

   hyper i hyper-font-ligatures
   

   6. The plugin should automatically appear in your ~/.hyper.js file in the plugins sections. To enable ligatures we need to add one more line to the config (look here and here for more information):

   module.exports = {
     config: {
       // rest of the config
       webGLRenderer: false
     }
     // rest of the file
   };

   7. Everything should work as expected now and we should have the new font with ligatures in the terminal.

Theme

Hyper.js has themes available from their own website.I'm going to install the hyper-one-dark theme:

hyper i hyper-one-dark

Search Plugin

To be able to perform search operation in Hyper.js, we need to install a plugin named hyper-search.

hyper i hyper-search

After installation, we need to restart Hyper.js for the changes to take effect.

Pane Navigation Plugin

Hyper.js has a cool plugin named hyper-pane to be able to jump between different panes.

hyper i hyper-pane

Open New Tabs in 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 hypercwd.

hyper i hypercwd

Mark Active Tab with a Symbol

When using multiple tabs, it might be hard to find the current active one. With hyper-active-tab we can add an icon to the active tab.

hyper i hyper-active-tab

You can configure a custom icon like this:

module.exports = {
  config: {
    // rest of the config
    activeTab: "🚀"
  }
  // rest of the file
};

Showing CPU, RAM, Battery stats

If we want to track our CPU, Memory, Battery resources we can add hyperline.

hyper i hyperline

After installation, we need to restart Hyper.js for the changes to take effect.

ZSH

Installation

brew install zsh

After zsh installation, we need to specify that we want to use it in the ~/.hyper.js config:

module.exports = {
  config: {
    // rest of the config
    shell: "/usr/local/bin/zsh"
  }
  // rest of the file
};

Right now, Hyper.js should use zsh as the default shell.

Starship

Installation

brew install starship

To use the Starship prompt, we need to add it to our ~/.zshrc configuration file.

echo 'eval "$(starship init zsh)"' >> ~/.zshrc

We need to restart Hyper.js for the changes to take effect.

Syntax Highlighting

# Create a `.zsh` directory to store our plugins in one place
mkdir ~/.zsh

# Clone repo to `~/.zsh/` directory
cd ~/.zsh && git clone https://github.com/zdharma/fast-syntax-highlighting.git

# Enable 'fast-syntax-highlighting' plugin in ZSH
echo "source $HOME/.zsh/fast-syntax-highlighting/fast-syntax-highlighting.plugin.zsh" >> ~/.zshrc

# Reload ZSH
source ~/.zshrc

Completion Plugin

We are going to use wget here. If you don't have wget on your Mac, you can install it like this.

brew install wget

# Download completion config
cd ~/.zsh && wget https://raw.githubusercontent.com/robbyrussell/oh-my-zsh/master/lib/completion.zsh

# Enable 'completion' plugin in ZSH
echo "source $HOME/.zsh/completion.zsh" >> ~/.zshrc

For this to work, we need to add a few more lines to our ~/.zshrc file.

# rest of the `~/.zshrc` file

# Load completion config
source $HOME/.zsh/completion.zsh

# Initialize the completion system
autoload -Uz compinit

# Cache completion if nothing changed - faster startup time
typeset -i updated_at=$(date +'%j' -r ~/.zcompdump 2>/dev/null || stat -f '%Sm' -t '%j' ~/.zcompdump 2>/dev/null)
if [ $(date +'%j') != $updated_at ]; then
  compinit -i
else
  compinit -C -i
fi

# Enhanced form of menu completion called `menu selection'
zmodload -i zsh/complist

We need to restart Hyper.js for the changes to take effect.

Autosuggestions Plugin

# Download 'zsh-autosuggestions' plugin
cd ~/.zsh && git clone https://github.com/zsh-users/zsh-autosuggestions.git

# Enable 'zsh-autosuggestions' plugin in ZSH
echo "source $HOME/.zsh/zsh-autosuggestions/zsh-autosuggestions.zsh" >> ~/.zshrc

# Reload ZSH
source ~/.zshrc

History Plugin

# Download history config
cd ~/.zsh && wget https://raw.githubusercontent.com/robbyrussell/oh-my-zsh/master/lib/history.zsh

# Enable 'history' config in ZSH
echo "source $HOME/.zsh/history.zsh" >> ~/.zshrc

# Reload ZSH
source ~/.zshrc

Now, by using the Up Arrow we can go back to our previous commands.

Colorized ls Output

# Enable colorized output for `ls` command.
echo "alias ls='ls -G'" >> ~/.zshrc

# Reload ZSH
source ~/.zshrc

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

# Download key bindings config
cd ~/.zsh && wget https://raw.githubusercontent.com/robbyrussell/oh-my-zsh/master/lib/key-bindings.zsh

# Enable 'key-bindings' config in ZSH
echo "source $HOME/.zsh/key-bindings.zsh" >> ~/.zshrc

# Reload ZSH
source ~/.zshrc

Aliases

Aliases play a huge part in productivity when using a command line.

cd ~/.zsh/
touch aliases.zsh
echo "source $HOME/.zsh/aliases.zsh" >> ~/.zshrc

A few useful aliases that I often use are listed below:

alias ls='ls -G' # colorize `ls` output
alias zshreload='source ~/.zshrc' # reload ZSH
alias shtop='sudo htop' # run `htop` with root rights
alias grep='grep --color=auto' # colorize `grep` output
alias ..='cd ..'
alias ...='cd ../..'
alias ....='cd ../../..'
alias less='less -R'
alias g='git'

alias rm='rm -i' # confirm removal
alias cp='cp -i' # confirm copy
alias mv='mv -i' # confirm move
alias weather='curl v2.wttr.in' # print weather for current location (https://github.com/chubin/wttr.in)

Credits

Credits to Thomas Jaskiewicz for setting this up.

Fixed some issues with github url's for the Hyper.js plugins. I will try my best to update this gist when new (useful) Hyper.js plugins are available.