DEV Community

Cover image for Setting Hyper with WSL 2
LocTran016
LocTran016

Posted on

Setting Hyper with WSL 2

#hyper

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
 
sebasttiandaza profile image
Sebastian Daza •

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

Collapse
 
emmanuelouzan profile image
Emmanuel Ouzan •

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