Configuring Hyper.js with zsh on Windows 11 Linux Subsystem for Node.js development

.bashrc

# ...
# see /usr/share/doc/bash/examples/startup-files (in the package bash-doc)
# for examples

# Launch Zsh
if [ -t 1 ]; then
exec zsh
fi

# If not running interactively, don't do anything
case $- in
# ...

.hyper.js

// 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: '"Roboto Mono for Powerline", Menlo, "DejaVu Sans Mono", Consolas, "Lucida Console", monospace',
  
      // default font weight: 'normal' or 'bold'
      fontWeight: 'normal',
  
      // font weight for bold characters: 'normal' or 'bold'
      fontWeightBold: 'bold',
  
      // line height as a relative unit
      lineHeight: 1,
  
      // letter spacing as a relative unit
      letterSpacing: 0,
  
      // 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: false,
  
      // 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: '',
  
      // 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:\\Users\\dlenn\\AppData\\Local\\Microsoft\\WindowsApps\\bash.exe',
  
      // for setting shell arguments (i.e. for using interactive shellArgs: `['-i']`)
      // by default `['--login']` will be used
      shellArgs: ['--login'],
  
      // for environment variables
      env: {},
  
      // 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: false,
  
      // choose either `'vertical'`, if you want the column mode when Option key is hold during selection (Default)
      // or `'force'`, if you want to force selection regardless of whether the terminal is in mouse events mode
      // (inside tmux or vim with mouse mode enabled for example).
      macOptionSelectionMode: 'vertical',
  
      // URL to custom bell
      // bellSoundURL: 'http://example.com/bell.mp3',
  
      // Whether to use the WebGL renderer. Set it to false to use canvas-based
      // rendering (slower, but supports transparent backgrounds)
      webGLRenderer: true,
  
      // for advanced config flags please refer to https://hyper.is/#cfg
    },
  
    // a list of plugins to fetch and install from npm
    // format: [@org/]project[#version]
    // examples:
    //   `hyperpower`
    //   `@company/project`
    //   `project#1.0.1`
    plugins: ["hyper-material-theme", "hyper-pane"],
  
    // 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',
    },
  
    paneNavigation: {
      debug: false,
      hotkeys: {
        navigation: {
          up: 'ctrl+alt+up',
          down: 'ctrl+alt+down',
          left: 'ctrl+alt+left',
          right: 'ctrl+alt+right'
        },
        jump_prefix: 'ctrl+alt', // completed with 1-9 digits
        permutation_modifier: 'shift', // Added to jump and navigation hotkeys for pane permutation
        maximize: 'meta+enter'
      },
      showIndicators: true, // Show pane number
      indicatorPrefix: 'Tadfad', // Will be completed with pane number
      indicatorStyle: { // Added to indicator <div>
        position: 'absolute',
        top: 0,
        left: 0,
        fontSize: '10px'
      },
      focusOnMouseHover: false,
      inactivePaneOpacity: 0.6 // Set to 1 to disable inactive panes dimming
    }
  };
  

.zshrc

# If you come from bash you might have to change your $PATH.
# export PATH=$HOME/bin:/usr/local/bin:$PATH

# Path to your oh-my-zsh installation.
export ZSH="$HOME/.oh-my-zsh"

# Set name of the theme to load --- if set to "random", it will
# load a random theme each time oh-my-zsh is loaded, in which case,
# to know which specific one was loaded, run: echo $RANDOM_THEME
# See https://github.com/ohmyzsh/ohmyzsh/wiki/Themes
ZSH_THEME="agnoster"

# Removes the user@system display
DEFAULT_USER="<linuxUsername>"
prompt_context() {
  if [[ "$USER" != "$DEFAULT_USER" || -n "$SSH_CLIENT" ]]; then
    prompt_segment black default "%(!.%{%F{yellow}%}.)$USER"
  fi
}

# Set list of themes to pick from when loading at random
# Setting this variable when ZSH_THEME=random will cause zsh to load
# a theme from this variable instead of looking in $ZSH/themes/
# If set to an empty array, this variable will have no effect.
# ZSH_THEME_RANDOM_CANDIDATES=( "robbyrussell" "agnoster" )

# Uncomment the following line to use case-sensitive completion.
# CASE_SENSITIVE="true"

# Uncomment the following line to use hyphen-insensitive completion.
# Case-sensitive completion must be off. _ and - will be interchangeable.
# HYPHEN_INSENSITIVE="true"

# Uncomment one of the following lines to change the auto-update behavior
# zstyle ':omz:update' mode disabled  # disable automatic updates
# zstyle ':omz:update' mode auto      # update automatically without asking
# zstyle ':omz:update' mode reminder  # just remind me to update when it's time

# Uncomment the following line to change how often to auto-update (in days).
# zstyle ':omz:update' frequency 13

# Uncomment the following line if pasting URLs and other text is messed up.
# DISABLE_MAGIC_FUNCTIONS="true"

# Uncomment the following line to disable colors in ls.
# DISABLE_LS_COLORS="true"

# Uncomment the following line to disable auto-setting terminal title.
# DISABLE_AUTO_TITLE="true"

# Uncomment the following line to enable command auto-correction.
# ENABLE_CORRECTION="true"

# Uncomment the following line to display red dots whilst waiting for completion.
# You can also set it to another string to have that shown instead of the default red dots.
# e.g. COMPLETION_WAITING_DOTS="%F{yellow}waiting...%f"
# Caution: this setting can cause issues with multiline prompts in zsh < 5.7.1 (see #5765)
# COMPLETION_WAITING_DOTS="true"

# Uncomment the following line if you want to disable marking untracked files
# under VCS as dirty. This makes repository status check for large repositories
# much, much faster.
# DISABLE_UNTRACKED_FILES_DIRTY="true"

# Uncomment the following line if you want to change the command execution time
# stamp shown in the history command output.
# You can set one of the optional three formats:
# "mm/dd/yyyy"|"dd.mm.yyyy"|"yyyy-mm-dd"
# or set a custom format using the strftime function format specifications,
# see 'man strftime' for details.
# HIST_STAMPS="mm/dd/yyyy"

# Would you like to use another custom folder than $ZSH/custom?
# ZSH_CUSTOM=/path/to/new-custom-folder

# Which plugins would you like to load?
# Standard plugins can be found in $ZSH/plugins/
# Custom plugins may be added to $ZSH_CUSTOM/plugins/
# Example format: plugins=(rails git textmate ruby lighthouse)
# Add wisely, as too many plugins slow down shell startup.
plugins=(git)

source $ZSH/oh-my-zsh.sh

# User configuration

# export MANPATH="/usr/local/man:$MANPATH"

# You may need to manually set your language environment
# export LANG=en_US.UTF-8

# Preferred editor for local and remote sessions
# if [[ -n $SSH_CONNECTION ]]; then
#   export EDITOR='vim'
# else
#   export EDITOR='mvim'
# fi

# Compilation flags
# export ARCHFLAGS="-arch x86_64"

# Set personal aliases, overriding those provided by oh-my-zsh libs,
# plugins, and themes. Aliases can be placed here, though oh-my-zsh
# users are encouraged to define aliases within the ZSH_CUSTOM folder.
# For a full list of active aliases, run `alias`.
#
# Example aliases
# alias zshconfig="mate ~/.zshrc"
# alias ohmyzsh="mate ~/.oh-my-zsh"

Configuring Hyper.js with zsh on Windows 10 Linux Subsystem for Node.js development

Windows

1. Install WSL
   • wsl --install
2. Install Hyper.js
3. Update Hyper config file (.hyper.js)
4. Install Powerline fonts. At least RobotoMono or which ever font you specified in .hyper.js

Linux Subsystem

1. Ensure the Linux subsystem is up to date
   • sudo apt-get install && sudo apt-get upgrade -y
2. Install NVM
   • curl https://raw.githubusercontent.com/creationix/nvm/master/install.sh | bash
   • source ~/.bashrc
   • nvm install node
3. Install zsh
   • sudo apt-get install zsh -y
4. Copy lines 5-8 of the above .bashrc to the top of the existing .bashrc file
   • nano ~/.bashrc
5. Ensure git is installed
   • git --version
   • If not, install with: sudo apt-get install git
6. Install oh-my-zsh
7. (Optional) Set DEFAULT_USER and ZSH_THEME in ~/.zshrc. Theme options

VSCode Integration

1. Add the below to the settings.json file to run as an integrated terminal
   • "terminal.integrated.shell.windows": "C:\\Windows\\System32\\wsl.exe",