loading...

Configuring Hyper Terminal in Windows

droidmakk profile image Kabeer ( Afroze ) Khan ・4 min read

So what is hyper?

Hyper is a highly extensible & customisable 📝, electron based terminal application for cross platform.

So, I'll share how I have configured my windows bash as interactive as possible. ☝️

In my development phase. I can take the privilege of saying pre hyper and post hyper. As my work most of it involved with terminal, there use to be a bunch of command prompt windows opened.

After hyper came into my life it was more organised. Since they said that it is completely customisable I started to see the plugins and what we can do with that.

So I made a few changes by installing plugins like hyper-power, hyper-border, hyper-cwd.

After all this is done. I took a look at ZSH terminal for MAC users. Which was not possible in windows as you have to setup PS1 Variable which is not going to happen in command prompt.
PS : There was also no colored output. Maybe i don't know how to do that!

So I found a way that we can do that in git bash. So this put an interesting smile on my face 😁. In my hyper config changed the terminal to git-command and some extra parameters to start it. Then edited the PS1 of Git bash.

Then, something was wrong i was'nt getting the special characters like branch icon / the wrong symbol. After doing some research i found the font Fira Code. Just changed the font family in hyper config to Fira Code after installation. Now take a look how it looks.

Hyper Look

And here is my config file . Link

// 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: "Fira Code",
        // default font weight: 'normal' or 'bold'
        fontWeight: 'normal',
        // font weight for bold characters: 'normal' or 'bold'
        fontWeightBold: 'bold',
        // terminal cursor background color and opacity (hex, rgb, hsl, hsv, hwb or cmyk)
        cursorColor: 'rgba(248,28,229,0.8)',
        // terminal text color under BLOCK cursor
        cursorAccentColor: '#000',
        // `'BEAM'` for |, `'UNDERLINE'` for _, `'BLOCK'` for █
        cursorShape: 'BLOCK',
        // set to `true` (without backticks and without quotes) for blinking cursor
        cursorBlink: true,
        // color of the text
        foregroundColor: '#fff',
        // terminal background color
        // opacity is only supported on macOS
        backgroundColor: '#000',
        // terminal selection color
        selectionColor: 'rgba(248,28,229,0.3)',
        // border color (window, tabs)
        borderColor: '#333',
        // custom CSS to embed in the main window
        css: '',
        // custom CSS to embed in the terminal window
        termCSS: '',
        // if you're using a Linux setup which show native menus, set to false
        // default: `true` on Linux, `true` on Windows, ignored on macOS
        showHamburgerMenu: '',
        // set to `false` (without backticks and without quotes) if you want to hide the minimize, maximize and close buttons
        // additionally, set to `'left'` if you want them on the left, like in Ubuntu
        // default: `true` (without backticks and without quotes) on Windows and Linux, ignored on macOS
        showWindowControls: 'left',
        // custom padding (CSS format, i.e.: `top right bottom left`)
        padding: '12px 14px',
        // the full list. if you're going to provide the full color palette,
        // including the 6 x 6 color cubes and the grayscale map, just provide
        // an array here instead of a color map object
        colors: {
        black: '#000000',
        red: '#C51E14',
        green: '#1DC121',
        yellow: '#C7C329',
        blue: '#0A2FC4',
        magenta: '#C839C5',
        cyan: '#20C5C6',
        white: '#C7C7C7',
        lightBlack: '#686868',
        lightRed: '#FD6F6B',
        lightGreen: '#67F86F',
        lightYellow: '#FFFA72',
        lightBlue: '#6A76FB',
        lightMagenta: '#FD7CFC',
        lightCyan: '#68FDFE',
        lightWhite: '#FFFFFF',
        },
        // the shell to run when spawning a new session (i.e. /usr/local/bin/fish)
        // if left empty, your system's login shell will be used by default
        //
        // Windows
        // - Make sure to use a full path if the binary name doesn't work
        // - Remove `--login` in shellArgs
        //
        // Bash on Windows
        // - Example: `C:\\Windows\\System32\\bash.exe`
        //
        // PowerShell on Windows
        // - Example: `C:\\WINDOWS\\System32\\WindowsPowerShell\\v1.0\\powershell.exe`
        shell: "C:\\Program Files\\Git\\git-cmd.exe",
        // for setting shell arguments (i.e. for using interactive shellArgs: `['-i']`)
        // by default `['--login']` will be used
        shellArgs: ['--command=usr/bin/bash.exe', '-l', '-i'],
        // for environment variables
        env: { TERM: 'cygwin' },
        // set to `false` for no bell
        bell: 'SOUND',
        // if `true` (without backticks and without quotes), selected text will automatically be copied to the clipboard
        copyOnSelect: false,
        // if `true` (without backticks and without quotes), hyper will be set as the default protocol client for SSH
        defaultSSHApp: true,
        // if `true` (without backticks and without quotes), on right click selected text will be copied or pasted if no
        // selection is present (`true` by default on Windows and disables the context menu feature)
        // quickEdit: true,
        // URL to custom bell
        // bellSoundURL: 'http://example.com/bell.mp3',
        // for advanced config flags please refer to https://hyper.is/#cfg
        opacity: 0.96
    },
    // a list of plugins to fetch and install from npm
    // format: [@org/]project[#version]
    // examples:
    // `hyperpower`
    // `@company/project`
    // `project#1.0.1`
    plugins: [
    "hyper-snazzy",
    "hyper-systray",
    "hyper-opacity",
    "hyper-tab-icons",
    "hyperborder"
    ],
    // in development, you can create a directory under
    // `~/.hyper_plugins/local/` and include it here
    // to load it and avoid it being `npm install`ed
    localPlugins: [],
    keymaps: {
    // Example
    // 'window:devtools': 'cmd+alt+o',
    }
};

Resources

Some links that i found helpful in the path of customization 😉

Posted on by:

droidmakk profile

Kabeer ( Afroze ) Khan

@droidmakk

Full Stack 👨‍💻. Developing Cross-platform applications, Microservices, PWA's & Cloud-native applications. JS/TS 💛.

Discussion

markdown guide
 

The only thing preventing this from being a great article is the lack of explanation or examples provided for setting up oh-my-git on Windows.

 

It would be great if you can elaborate it with a detailed explanation on how did you installed oh my git on windows and how did you configure it with git bash.
Hope you will provide us this info, it will be a great help for us.
Thanks

 

Hey, Hi. I installed Fira Code font. Changed the font family for bash in config and customized the PS1 variable.

 

How did you customize the PS1 variable? Cause I have 0 knowledge on shell script so I don't know what part to change plus I have read the oh-my-git installation guide there I couldn't find anything on how to install it on windows and integrate with git bash.

I'm not quite there yet either but i found this helpful:
alanbarber.com/post/how-to-customi...

 

Hey, Afroze!

This was exactly what I was looking for. Thank you so much for sharing your setup.

I'm facing a problem. My current setup looks like this.

Current Hyper Setup

It doesn't show the path of directory like your terminal does. I think that's because of PS1 you edited of Git Bash.

How do I do that on Windows?

Also, how do I setup oh-my-git on Windows?

 

You can use this link to set PS1 variable on your git bash.

Find your config file here
C:\Program Files\Git\etc\profile.d\lang.sh

 
 

Not yet. It's still the same as looks in screenshot.

 

This is really cool, thanks for sharing.

I'm struggling to properly display the git branch like you have, as I'm unable to display the symbols. I have Fira Code installed and set, can you share what values you edited in the PS1 of git bash?

 

you'll want to find a version of fira code that has been patched with 'powerline characters' - powerline is the name of a prompt style which i guess popularized the use of these stylistic additions.

a quick google gave me this patched version: github.com/ryanoasis/nerd-fonts/tr...

besides that, this is what i use to quickly setup a batch of pre-patched fonts: github.com/powerline/fonts

 

I wanted to change the font to Ubuntu Mono, I installed the font and changed it on hyper but I get this ugly font every time I try to change it. It's as if it won't accept anything other than the default font! :-/

 

How did you set the style of your git-bash?
Does oh-my-git work on windows too?

 

That you can configure separately for git-bash. Yes oh-my-git works its just the font fira-code does the magic!

 

Hi friend, I'm trying to configure the PS1 without success, could you please help me

Can you share your PS1 you've configured

 

Thank you sir, your config save my life

 

Hi friend, I'm trying to configure the PS1 without success, could you please help me

 

Hi friend, I'm trying to configure the PS1 without success, could you please help me