Quickstart Guide: Hyper JS/HTML/CSS TerminalsteemCreated with Sketch.

in #programming7 years ago

Screen Shot 2017-08-19 at 9.56.42 PM.png

Getting Started with Hyper

Hyper is pretty cool in that it is a terminal emulator built entirely from html/css and javascript. Behind the scenes, Hyper uses Electron for its cross platform compatibility.

In this very brief guide, we'll get up and running with the hyper terminal along with a few plugins.

Download/Install Hyper

Install homebrew cask and then issue the command:

  • brew cask install hyper

Setting up Zsh as your shell instead of Bash

  1. First, verify if you are using zsh or bash
    • echo $0
  2. Change the default shell for your working user:
    • chsh -s $(which zsh)
    • exit and reopen your hyper terminal
  3. Edit the hyper config file and change the shell option:
    • vi ~/.hyper.js
    • shell: '/usr/local/bin/zsh'
  4. Let's make sure your favorite editor is setup in your zsh runtime configuration file
    • nvim ~/.zshrc
    • There should be a line that reads: export EDITOR="/usr/local/bin/nvim"
  5. If you run into issues when you try to use Hyper --> Preferences in the file menu (such as Xcode opening instead of your editor)
    • Find any file type of js and right click on it --> Get Info
    • Open With --> Other...
    • Browse to the location of your editor (or pick TextEdit) and choose it.
    • Pro Tip: some files are hidden in OSX. In finder you can press CMD + Shift + . to force hidden files/folder to be shown

Congrats! If you're still here and made it this far, you have a basic installation of the Hyper terminal emulator configured and running.

Now for a slight detour, let's beautify our terminal:

Installing Oh-My-Zsh (detour, totally skippable)

Install Oh-My-Zsh

Now let's add a plugin or two to make this thing look cool.

Installing Plugins for Hyper

  1. First make sure you have node installed, along with npm:
  2. Edit the hyper configuration file nvim ~/.hyperjs
    • Let's hide the annoying hyper titlebar: plugins: ['hyperminimal'],
    • To fullscreen on MacOS, you can press CTRL + ALT + F
  3. Now let's get add a nice color theme to hyper:
    • Make your plugins line in the .hyperjs conf file look like so:
      • plugins: ['hyperminimal', 'hyper-snazzy'],

Congrats!

You now have a nice looking terminal that is completely written using html, js, and csss. It is very customizable.

Check out awesome hyper for more neat plugins and color schemes: https://bnb.github.io/awesome-hyper/

I hope this helped! Leave comments below if you run into any issues.