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 (1)

Collapse
 
sebasttiandaza profile image
Sebastian Daza

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

Let's team up together 🤝

We're Hiring

We're hiring for a Senior Full Stack Engineer to join the DEV team. Want the deets? Head here to learn more about who we're looking for.