Install and Configure WSL, VSCode, Hyper

wsl+hyper.md

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

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

3. Install oh-my-zsh:

sh -c "$(curl -fsSL https://raw.githubusercontent.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"

4. 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

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

5. 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

6. 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

7. Install neofetch (Optional):

sudo apt install neofetch
# See more on https://github.com/dylanaraps/neofetch

8. Download and install follow the guide on hyper.is

9. Configure Hyper to make it work with WSL2:

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

//.hyper.js
shell: 'wsl.exe',
shellArgs: ['-d', 'Ubuntu-20.04'],

10. Install Powerlevel10 follow the [official guide]https://github.com/romkatv/powerlevel10k#get-started) (Optional):

• Install the recommend fonts

git clone --depth=1 https://github.com/romkatv/powerlevel10k.git ${ZSH_CUSTOM:-$HOME/.oh-my-zsh/custom}/themes/powerlevel10k

• Set ZSH_THEME="powerlevel10k/powerlevel10k" in ~/.zshrc.
• Set the fontFamily: '"MesloLGS NF"', in .hyper

11. Install some oh-my-zsh plugins (Optional):

• zsh-completions
• zsh-autosuggestions
• fasd

# 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

• Add like this to ~/.zshrc:

plugins=(fasd git vscode yarn zsh-autosuggestions zsh-completions)

12. 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

// .hyper.js
config: {
// other configs
hyperBorder: {
            animate: true,
            borderRadiusOuter: '100px',
            borderRadiusOuter: '5px',
            borderWidth: '5px',
          },
          opacity: {
            focus: 1,
            blur: 0.92
          }
}

//.hyper.js
shell: 'wsl.exe',
shellArgs: ['-d', 'Ubuntu-20.04'],

Thank you very much!