DEV Community

Cover image for Setting Hyper with WSL 2
LocTran016
LocTran016

Posted on

Setting Hyper with WSL 2

Please note that I've only tested this on Ubuntu 20.04 and WSL 2

image

Steps

  1. Install WSL 2 and install Linux dist following Microsoft's guide

  2. Install ZSH on Linux dist following oh-my-zsh's guide:

sudo apt update && sudo apt upgrade -y
# Upgrade all available updates
sudo apt install zsh -y
# Install ZSH
Enter fullscreen mode Exit fullscreen mode
  1. Install oh-my-zsh:
sh -c "$(curl -fsSL https://raw.githubusercontent.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"
Enter fullscreen mode Exit fullscreen mode
  1. Install nvm following nvm official guide:
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.38.0/install.sh | bash
# The v0.38.0 is going to be changed in the future, give a comment if it's outdated
Enter fullscreen mode Exit fullscreen mode

Add the following to /.zshrc:

export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm
Enter fullscreen mode Exit fullscreen mode
  1. Install Node LTS using nvm:
echo "lts/*" > ~/.nvmrc # to default to the latest LTS version
nvm install 'lts/*' # Install latest Node LTS version
nvm alias default lts/* # Default to use Node LTS
Enter fullscreen mode Exit fullscreen mode
  1. Install Yarn, see more on Issue #3189 on yarn repo:
sudo apt remove cmdtest
sudo apt remove yarn
curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
sudo apt-get update
sudo apt-get install yarn
Enter fullscreen mode Exit fullscreen mode
  1. Install neofetch (Optional):
sudo apt install neofetch
# See more on https://github.com/dylanaraps/neofetch
Enter fullscreen mode Exit fullscreen mode
  1. Download and install follow the guide on hyper.is

  2. Configure Hyper to make it work with WSL2:

PLEASE NOTE: I've figured the shellArgs using Window Terminal

image

//.hyper.js
shell: 'wsl.exe',
shellArgs: ['-d', 'Ubuntu-20.04'],
Enter fullscreen mode Exit fullscreen mode
  1. Install Powerlevel10 follow the [official guide]https://github.com/romkatv/powerlevel10k#get-started) (Optional):
git clone --depth=1 https://github.com/romkatv/powerlevel10k.git ${ZSH_CUSTOM:-$HOME/.oh-my-zsh/custom}/themes/powerlevel10k
Enter fullscreen mode Exit fullscreen mode
  • Set ZSH_THEME="powerlevel10k/powerlevel10k" in ~/.zshrc.
  • Set the fontFamily: '"MesloLGS NF"', in .hyper
  1. Install some oh-my-zsh plugins (Optional):
# zsh-completions
git clone https://github.com/zsh-users/zsh-completions ${ZSH_CUSTOM:=~/.oh-my-zsh/custom}/plugins/zsh-completions
# zsh-autosuggestions
git clone https://github.com/zsh-users/zsh-autosuggestions ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-autosuggestions
# fasd
sudo apt install fasd -y
Enter fullscreen mode Exit fullscreen mode
  • Add like this to ~/.zshrc:
plugins=(fasd git vscode yarn zsh-autosuggestions zsh-completions)
Enter fullscreen mode Exit fullscreen mode
  1. Install some plugins to Hyper (Optional):
  • Run the following in Hyper:
hyper i hyper-snazzy
hyper i hyper-opacity
hyper i hyperborder
hyper i hyper-tab-icons-plus
hyper i hyper-fading-scrollbar
Enter fullscreen mode Exit fullscreen mode
// .hyper.js
config: {
// other configs
hyperBorder: {
            animate: true,
            borderRadiusOuter: '100px',
            borderRadiusOuter: '5px',
            borderWidth: '5px',
          },
          opacity: {
            focus: 1,
            blur: 0.92
          }
}

Enter fullscreen mode Exit fullscreen mode

Top comments (2)

Collapse
 
emmanuelouzan profile image
Emmanuel Ouzan

What exactly does the Ubuntu Logo at the opening of the shell?

Collapse
 
sebasttiandaza profile image
Sebastian Daza

Esta muy bueno tu post, aunque deberias de agregar mas informacion