Setting Hyper with WSL 2 
Tags: hyper
Published: 2021-09-19 12:11:06

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

![image](https://user-images.githubusercontent.com/64778285/126907074-af75690a-806a-4a13-84e8-85ea7d985c0f.png)

## Steps
1. Install WSL 2 and install Linux dist following [Microsoft's guide](https://docs.microsoft.com/en-us/windows/wsl/install-win10#manual-installation-steps)

3. Install ZSH on Linux dist following [oh-my-zsh's guide](https://github.com/ohmyzsh/ohmyzsh/wiki/Installing-ZSH):
```bash
sudo apt update && sudo apt upgrade -y
# Upgrade all available updates
sudo apt install zsh -y
# Install ZSH
```

3. Install oh-my-zsh:
```bash
sh -c "$(curl -fsSL https://raw.githubusercontent.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"
```

4. Install nvm following [nvm official guide](https://github.com/nvm-sh/nvm#installing-and-updating):
```bash
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:
```sh
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](https://github.com/yarnpkg/yarn/issues/3189):
```bash
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](https://hyper.is/)

9. Configure Hyper to make it work with WSL2:

**PLEASE NOTE:** I've figured the shellArgs using [Window Terminal](https://docs.microsoft.com/en-us/windows/terminal/get-started)

![image](https://user-images.githubusercontent.com/64778285/126906481-bc6985b1-fd77-4fd7-942f-76ef158a29b0.png)


```js
//.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](https://github.com/romkatv/powerlevel10k#meslo-nerd-font-patched-for-powerlevel10k)
```bash
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](https://github.com/zsh-users/zsh-completions)
* [zsh-autosuggestions](https://github.com/zsh-users/zsh-autosuggestions)
* [fasd](https://github.com/clvv/fasd/blob/master/INSTALL.md)

```
# 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:

```sh
plugins=(fasd git vscode yarn zsh-autosuggestions zsh-completions)
```
12. Install some plugins to Hyper (Optional):

* Run the following in Hyper:

```bash
hyper i hyper-snazzy
hyper i hyper-opacity
hyper i hyperborder
hyper i hyper-tab-icons-plus
hyper i hyper-fading-scrollbar
```

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

```